/* =============================================================
   Area 246 — Design Tokens
   The source of truth. Every component reads from these vars.
   ============================================================= */

/* ---------- Self-hosted fonts ----------
   Both families ship as variable fonts — one file each covers every weight.
   Manrope: 200–800. Inter: 100–900 + italic. */
@font-face {
  font-family: 'Manrope';
  src: url('../fonts/Manrope-VariableFont.ttf') format('truetype-variations');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-VariableFont.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-Italic-VariableFont.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ---------- Typography ---------- */
  --font-display: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --fs-12: 0.75rem;   /* 12px — fine print */
  --fs-13: 0.8125rem; /* 13px — label */
  --fs-14: 0.875rem;  /* 14px — caption */
  --fs-15: 0.9375rem; /* 15px — small body */
  --fs-16: 1rem;      /* 16px — body */
  --fs-18: 1.125rem;  /* 18px — subhead / lede */
  --fs-20: 1.25rem;   /* 20px — h3 / large body */
  --fs-22: 1.375rem;  /* 22px — card display min */
  --fs-24: 1.5rem;    /* 24px — h3 large */
  --fs-28: 1.75rem;   /* 28px — display min */
  --fs-32: 2rem;      /* 32px — h2 */
  --fs-40: 2.5rem;    /* 40px — h2 hero */
  --fs-48: 3rem;      /* 48px — h1 */
  --fs-56: 3.5rem;    /* 56px — h1 hero */

  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --lh-tight: 1.15;
  --lh-snug: 1.25;
  --lh-normal: 1.5;
  --lh-relaxed: 1.6;

  --tracking-tight: -0.02em;
  --tracking-snug: -0.01em;
  --tracking-normal: 0em;
  --tracking-wide: 0.08em;

  /* ---------- Spacing (4pt base) ---------- */
  --sp-0: 0;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-15: 60px;
  --sp-20: 80px;
  --sp-24: 96px;
  --sp-30: 120px;

  /* ---------- Radii ---------- */
  --r-xs: 4px;    /* pills inside dense UI */
  --r-sm: 8px;    /* buttons, inputs, small cards */
  --r-md: 12px;   /* cards */
  --r-lg: 16px;   /* feature / product cards */
  --r-xl: 20px;   /* pills, badges */
  --r-2xl: 24px;  /* large surfaces */
  --r-full: 9999px;
  --r-speech-tail: 12px 12px 12px 2px; /* chat-bubble asymmetric corner */

  /* ---------- Container / layout ---------- */
  --container-max: 1120px;
  --container-pad: var(--sp-6);
  --section-y: var(--sp-20);
  --grid-gap: var(--sp-8);

  /* ---------- Breakpoints (documentation only; CSS uses literal mq) ---------- */
  --bp-sm: 480px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 150ms;
  --dur-base: 200ms;
  --dur-slow: 350ms;
  --dur-reveal: 600ms;

  /* ---------- Z-index scale ---------- */
  --z-base: 0;
  --z-raised: 10;
  --z-sticky: 100;
  --z-dropdown: 200;
  --z-overlay: 900;
  --z-modal: 1000;
  --z-toast: 1100;

  /* ---------- Brand primitives (hue-only, theme-agnostic) ---------- */
  --hue-orange: #f77f00;
  --hue-pink: #ED45BE;
  --hue-purple: #823ABC;
  --hue-purple-light: #c98aff;
  --hue-purple-tint: #e0c0ff;

  --hue-wa-green: #25D366;
  --hue-wa-blue: #40a0e6;

  --hue-success: #25D366;
  --hue-warning: #f0b429;
  --hue-danger: #dc3c3c;
  --hue-info: #40a0e6;

  --hue-amber: #e8a000;    /* warm amber — pairs with orange for the label-warm gradient */

  /* ---------- Brand gradients ---------- */
  --grad-core: linear-gradient(135deg, #f77f00 0%, #ED45BE 50%, #823ABC 100%);
  --grad-core-label: linear-gradient(90deg, #f77f00, #ED45BE, #823ABC);
  --grad-label-warm: linear-gradient(90deg, var(--hue-orange), var(--hue-amber)); /* amber eyebrow — used by .label.label-warm */

  /* ---------- Product theme contract ----------
     The default product theme. Pages with no `data-product` attribute
     (or with `data-product="core"`) inherit these values. Other products
     live in the consuming repo and override this contract via
     [data-product="..."] blocks.

     Components read --product-* / --section-* and re-skin automatically. */
  --product-start: var(--hue-orange);
  --product-mid: var(--hue-pink);
  --product-end: var(--hue-purple);
  --product-accent: var(--hue-purple-light);
  --product-grad: var(--grad-core);
  --product-grad-label: var(--grad-core-label);
  --product-glow: rgba(237, 69, 190, 0.4);
  --product-halo: rgba(130, 58, 188, 0.4);
  --product-tint: rgba(237, 69, 190, 0.12);
  --product-border: rgba(237, 69, 190, 0.25);

  /* Section rhythm: a/b stops alternate between .section and .section-alt.
     accent-a defaults to --product-accent; tints and borders derive from
     the accent stops via color-mix. Themes typically only need to override
     --section-accent-b (and accent-a if it differs from --product-accent). */
  --section-accent-a: var(--product-accent);
  --section-accent-b: #ED45BE;
  --section-accent: var(--section-accent-a);
  --section-tint-a: color-mix(in oklab, var(--section-accent-a) 12%, transparent);
  --section-tint-b: color-mix(in oklab, var(--section-accent-b) 12%, transparent);
  --section-tint: var(--section-tint-a);
  --section-border-a: color-mix(in oklab, var(--section-accent-a) 25%, transparent);
  --section-border-b: color-mix(in oklab, var(--section-accent-b) 25%, transparent);
  --section-border: var(--section-border-a);
}

/* =============================================================
   DARK THEME (default)
   ============================================================= */
:root,
[data-theme="dark"] {
  color-scheme: dark;

  /* Surfaces (layered, deep navy base) */
  --bg-canvas: #0f0e2a;
  --bg-surface-1: #13122e;  /* CTA bg */
  --bg-surface-2: #16143a;  /* section-alt */
  --bg-surface-3: #1a1940;  /* card interior */
  --bg-surface-glass: rgba(15, 14, 42, 0.92);
  --bg-nav-border: rgba(255, 255, 255, 0.06);

  /* Text */
  --fg-primary: #ffffff;
  --fg-body: #d0d0e0;
  --fg-muted: #a0a0c0;
  --fg-subtle: #8888a8;
  --fg-quiet: #6a6a8a;
  --fg-on-brand: #ffffff;

  /* Borders / hairlines */
  --border-subtle: rgba(255, 255, 255, 0.04);
  --border-default: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.15);

  /* Surface tints on white (translucent fills over bg) */
  --tint-03: rgba(255, 255, 255, 0.03);
  --tint-06: rgba(255, 255, 255, 0.06);
  --tint-10: rgba(255, 255, 255, 0.10);

  /* Shadows — colored glow is brand-standard */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.25);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.4);
  --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.5);
  --shadow-glow: 0 4px 20px var(--product-glow), 0 0 40px var(--product-halo);

  /* Ambient background glows used in section / hero */
  --aura-core:
    radial-gradient(ellipse 50% 60% at 50% 40%, rgba(130, 58, 188, 0.12) 0%, transparent 70%),
    radial-gradient(ellipse 40% 50% at 30% 70%, rgba(247, 127, 0, 0.06) 0%, transparent 70%);
  --aura-alt: radial-gradient(ellipse 70% 60% at 50% 50%, rgba(130, 58, 188, 0.10) 0%, transparent 70%);

  /* Semantic (status) colors — dark-mode tuned */
  --semantic-success-fg: #7ee2a8;
  --semantic-success-bg: rgba(37, 211, 102, 0.12);
  --semantic-success-border: rgba(37, 211, 102, 0.3);
  --semantic-warning-fg: #f5c969;
  --semantic-warning-bg: rgba(240, 180, 41, 0.12);
  --semantic-warning-border: rgba(240, 180, 41, 0.3);
  --semantic-danger-fg: #ef7a7a;
  --semantic-danger-bg: rgba(220, 60, 60, 0.12);
  --semantic-danger-border: rgba(220, 60, 60, 0.3);
  --semantic-info-fg: #7dc0ee;
  --semantic-info-bg: rgba(64, 160, 230, 0.12);
  --semantic-info-border: rgba(64, 160, 230, 0.3);

  /* Focus ring */
  --focus-ring: 0 0 0 3px rgba(237, 69, 190, 0.45);
}

/* =============================================================
   LIGHT THEME
   Paired against the dark theme. Text stays readable on a warm
   off-white; brand gradients keep their identity; shadows go neutral.
   ============================================================= */
[data-theme="light"] {
  color-scheme: light;

  --bg-canvas: #fbfaf7;
  --bg-surface-1: #ffffff;
  --bg-surface-2: #f3f1ec;
  --bg-surface-3: #ffffff;
  --bg-surface-glass: rgba(251, 250, 247, 0.9);
  --bg-nav-border: rgba(15, 14, 42, 0.08);

  --fg-primary: #12112a;
  --fg-body: #2b2a40;
  --fg-muted: #55556e;
  --fg-subtle: #7a7a93;
  --fg-quiet: #a0a0b5;
  --fg-on-brand: #ffffff;

  --border-subtle: rgba(15, 14, 42, 0.06);
  --border-default: rgba(15, 14, 42, 0.10);
  --border-strong: rgba(15, 14, 42, 0.18);

  --tint-03: rgba(15, 14, 42, 0.03);
  --tint-06: rgba(15, 14, 42, 0.05);
  --tint-10: rgba(15, 14, 42, 0.08);

  --shadow-sm: 0 1px 2px rgba(15, 14, 42, 0.06), 0 2px 6px rgba(15, 14, 42, 0.04);
  --shadow-md: 0 4px 14px rgba(15, 14, 42, 0.08), 0 2px 6px rgba(15, 14, 42, 0.04);
  --shadow-lg: 0 12px 32px rgba(15, 14, 42, 0.12), 0 4px 12px rgba(15, 14, 42, 0.06);
  --shadow-xl: 0 20px 50px rgba(15, 14, 42, 0.15);
  --shadow-glow: 0 8px 28px var(--product-glow), 0 0 0 1px var(--product-border);

  --aura-core:
    radial-gradient(ellipse 50% 60% at 50% 40%, rgba(130, 58, 188, 0.08) 0%, transparent 70%),
    radial-gradient(ellipse 40% 50% at 30% 70%, rgba(247, 127, 0, 0.06) 0%, transparent 70%);
  --aura-alt: radial-gradient(ellipse 70% 60% at 50% 50%, rgba(130, 58, 188, 0.06) 0%, transparent 70%);

  --semantic-success-fg: #137a3e;
  --semantic-success-bg: rgba(37, 211, 102, 0.12);
  --semantic-success-border: rgba(37, 211, 102, 0.4);
  --semantic-warning-fg: #8a6313;
  --semantic-warning-bg: rgba(240, 180, 41, 0.15);
  --semantic-warning-border: rgba(240, 180, 41, 0.45);
  --semantic-danger-fg: #a82626;
  --semantic-danger-bg: rgba(220, 60, 60, 0.10);
  --semantic-danger-border: rgba(220, 60, 60, 0.35);
  --semantic-info-fg: #1a5e90;
  --semantic-info-bg: rgba(64, 160, 230, 0.10);
  --semantic-info-border: rgba(64, 160, 230, 0.4);

  --focus-ring: 0 0 0 3px rgba(130, 58, 188, 0.35);
}

/* Product sub-themes ([data-product="..."]) live in the consuming repo, not
   in the DS. Each consumer ships its own product file(s) and loads them
   alongside this tokens.css. The DS provides the contract and the default
   (core) theme via :root above; consumers populate the rest. The spec page
   (index.html) inlines its own demo themes. */

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-slow: 0ms;
    --dur-reveal: 0ms;
  }
}