/* DIVSA OS Design Tokens — canonical frontend design contract.
 * Components consume semantic variables from this file; tenant overrides are
 * emitted by TAP_Customizer. Do not place brand hex values in component CSS. */
:root {
  /* TalentAstro's canonical Canva palette. Derived tones use color-mix only. */
  --tap-purple: #6109BE;
  --tap-purple-deep: color-mix(in srgb, #6109BE 82%, #000000);
  --tap-purple-pale: color-mix(in srgb, #FFFFFF 90%, #6109BE);
  --tap-marigold: #FF7900;
  --tap-marigold-deep: color-mix(in srgb, #FF7900 82%, #000000);
  --tap-terracotta: #F99000;
  --tap-chocolate: #000000;
  --tap-saffron: #FF7900;
  --tap-sindoor: #6109BE;
  --tap-lotus: #6109BE;
  --tap-ganga: #6109BE;
  --tap-turmeric: #F99000;

  /* Base surfaces. */
  --tap-ink: #000000;
  --tap-muted: color-mix(in srgb, #000000 64%, #FFFFFF);
  --tap-line: color-mix(in srgb, #000000 14%, #FFFFFF);
  --tap-control-border: color-mix(in srgb, #000000 52%, #FFFFFF);
  --tap-bg: #FFFFFF;
  --tap-card: #FFFFFF;
  --tap-ok: #42D674;
  --tap-cta: #FF7900;
  --tap-cta-text: #FFFFFF;

  /* Semantic aliases — one vocabulary for every component. */
  --tap-primary: var(--tap-purple);
  --tap-primary-text: #000000;
  --tap-primary-deep: var(--tap-purple-deep);
  --tap-primary-soft: color-mix(in srgb, var(--tap-card) 88%, var(--tap-primary));
  --tap-a: var(--tap-primary);
  --tap-a-solid: var(--tap-primary);
  --tap-a-ink: var(--tap-primary-deep);
  --tap-secondary: var(--tap-primary-soft);
  --tap-accent: var(--tap-marigold);
  --tap-gold: var(--tap-marigold);
  --tap-accent-contrast: var(--tap-chocolate);
  --tap-cta-bg: var(--tap-cta);
  --tap-cta-deep: color-mix(in srgb, var(--tap-cta) 82%, #000);
  --tap-cta-pale: color-mix(in srgb, var(--tap-card) 90%, var(--tap-cta));
  --tap-surface: var(--tap-card);
  --tap-surface-2: color-mix(in srgb, var(--tap-card) 94%, var(--tap-primary));
  --tap-border: var(--tap-line);
  --tap-text: var(--tap-ink);
  --tap-text-muted: var(--tap-muted);
  /* Compatibility aliases now resolve here, never inside components. */
  --tap-ink-accent: var(--tap-primary);
  --tap-ink-2: var(--tap-muted);
  --tap-ink-3: color-mix(in srgb, var(--tap-muted) 72%, var(--tap-card));
  --tap-line-2: color-mix(in srgb, var(--tap-line) 72%, var(--tap-ink));
  --tap-surface-soft: var(--tap-surface-2);
  --tap-success: var(--tap-ok);
  --tap-danger: var(--tap-err);
  --tap-brand-ink: var(--tap-primary-deep);
  --tap-brand-ink-safe: var(--tap-brand-ink);
  --tap-cta-bg-safe: var(--tap-cta-bg);
  --tap-on-primary: #FFFFFF;
  --tap-on-dark: #FFFFFF;
  --tap-overlay: color-mix(in srgb, #000000 58%, transparent);
  --tap-focus: color-mix(in srgb, var(--tap-primary) 26%, transparent);

  /* Supporting semantics. */
  --tap-ok-pale: color-mix(in srgb, var(--tap-card) 90%, var(--tap-ok));
  --tap-warn: #FF7900;
  --tap-warn-bg: color-mix(in srgb, #FFFFFF 90%, #FF7900);
  --tap-warn-fg: #000000;
  --tap-err: #6109BE;
  --tap-gold-dark: #000000;
  --tap-gold-light: color-mix(in srgb, #FFFFFF 90%, #FF7900);

  /* Metallic accents use primitives only. */
  --tap-gold-stop-1: #FF7900;
  --tap-gold-stop-2: #F99000;
  --tap-gold-stop-3: #FF7900;
  --tap-gold-stop-4: #F99000;
  --tap-gold-stop-5: #FF7900;
  --grad-gold-multistop: linear-gradient(135deg,var(--tap-gold-stop-1) 0%,var(--tap-gold-stop-2) 25%,var(--tap-gold-stop-3) 50%,var(--tap-gold-stop-4) 75%,var(--tap-gold-stop-5) 100%);
  --grad-gold-metallic: linear-gradient(90deg,var(--tap-marigold-deep) 0%,var(--tap-gold-stop-2) 32%,var(--tap-marigold) 70%,var(--tap-gold-stop-5) 100%);
  --grad-sacred: linear-gradient(135deg,var(--tap-primary) 0%,var(--tap-terracotta) 100%);
  --grad-gold: linear-gradient(135deg,var(--tap-marigold) 0%,var(--tap-turmeric) 100%);
  --grad-dawn: linear-gradient(135deg,var(--tap-saffron) 0%,var(--tap-primary) 100%);
  --grad-night: linear-gradient(180deg,var(--tap-ink) 0%,color-mix(in srgb,var(--tap-ink) 74%,var(--tap-primary)) 100%);

  /* Typography. Fonts are tenant-overridable from Visual Studio. */
  --tap-font-heading: "Fraunces", Georgia, serif;
  --tap-font-display: var(--tap-font-heading);
  --tap-font-body: "Plus Jakarta Sans", system-ui, sans-serif;
  --tap-font-hindi: "Yatra One", "Noto Serif Devanagari", serif;
  --tap-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --tap-font-heading-weight: 600;
  --tap-font-body-weight: 400;
  --tap-font-hindi-weight: 400;
  --tap-fs-scale: 1;
  --tap-fs-xs: calc(11px * var(--tap-fs-scale));
  --tap-fs-sm: calc(13px * var(--tap-fs-scale));
  --tap-fs-md: calc(15px * var(--tap-fs-scale));
  --tap-fs-base: calc(16px * var(--tap-fs-scale));
  --tap-fs-lg: calc(18px * var(--tap-fs-scale));
  --tap-fs-xl: calc(22px * var(--tap-fs-scale));

  /* Spacing, shape, elevation and motion. */
  --tap-space-1: 4px;
  --tap-space-2: 8px;
  --tap-space-3: 12px;
  --tap-space-4: 16px;
  --tap-space-5: 20px;
  --tap-space-6: 24px;
  --tap-space-8: 32px;
  --tap-space-10: 40px;
  --tap-radius: 18px;
  --tap-radius-sm: 10px;
  --tap-radius-xl: 28px;
  --tap-radius-full: 999px;
  --tap-shadow-sm: 0 2px 8px color-mix(in srgb,var(--tap-ink) 7%,transparent);
  --tap-shadow-md: 0 8px 24px color-mix(in srgb,var(--tap-ink) 10%,transparent);
  --tap-shadow-lg: 0 18px 52px color-mix(in srgb,var(--tap-ink) 16%,transparent);

  /* Canonical frontend layer stack. No component owns arbitrary 9999 values. */
  --tap-layer-sticky: 40;
  --tap-layer-header: 60;
  --tap-layer-bottomnav: 70;
  --tap-layer-fab: 80;
  --tap-layer-backdrop: 100;
  --tap-layer-dialog: 110;
  --tap-layer-fullscreen: 120;
  --tap-layer-celebration: 130;
  /* Phase 10: feedback must remain visible above every modal/fullscreen layer. */
  --tap-layer-toast: 140;

  /* Phase 7 — one fixed-surface geometry contract. Measured values are
     published by tap-chrome.js; safe-area variables stay CSS-native. */
  --tap-safe-top: env(safe-area-inset-top, 0px);
  --tap-safe-right: env(safe-area-inset-right, 0px);
  --tap-safe-bottom: env(safe-area-inset-bottom, 0px);
  --tap-safe-left: env(safe-area-inset-left, 0px);
  --tap-header-h: 0px;
  --tap-bottom-nav-h: 0px;
  --tap-sticky-cta-h: 0px;
  --tap-pwa-h: 0px;
  --tap-fixed-gap: 10px;
  --tap-fixed-stack-h: 0px;
  --tap-page-bottom-clearance: 0px;
  --tap-shadow: var(--tap-shadow-md);
  --tap-shadow-xl: var(--tap-shadow-lg);
  --tap-shadow-gold: 0 8px 26px color-mix(in srgb,var(--tap-marigold) 28%,transparent);
  --tap-glow: 0 0 0 3px var(--tap-focus);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
  --ease-out: cubic-bezier(.4,0,.2,1);
  --dur-fast: 150ms;
  --dur-std: 250ms;
  --dur-slow: 400ms;

  /* Visual Studio scoped contract (Phase 3).
   * --tap-vs-card-*, --tap-vs-button-*, --tap-vs-icon-* and --tap-vs-image-*
   * are intentionally NOT defined on :root. The editor emits them only on the
   * selected DIVSA section/card so an untouched component keeps its authored
   * design and host-site embeds cannot inherit accidental editor paint. */

  /* Component defaults. */
  --tap-btn-radius: var(--tap-radius-full);
  --tap-btn-pad-y: 12px;
  --tap-btn-pad-x: 22px;
  --tap-btn-weight: 700;
  --tap-card-shadow: var(--tap-shadow);

  /* Shared UI aliases. These derive only from tenant/admin semantic tokens. */
  --tap-ui-soft: color-mix(in srgb, var(--tap-surface) 94%, var(--tap-primary));
  --tap-ui-warm: color-mix(in srgb, var(--tap-surface) 92%, var(--tap-accent));
  --tap-ui-line: color-mix(in srgb, var(--tap-surface) 87%, var(--tap-primary));
  --tap-ui-shadow: var(--tap-shadow-md);
  --tap-ui-shadow-sm: var(--tap-shadow-sm);
  --tap-ui-radius: clamp(16px, 2.4vw, 22px);

  /* Layer contract. */
}