/* =============================================================
   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-cari: linear-gradient(135deg, #823ABC 0%, #ED45BE 100%);
  --grad-bb: linear-gradient(135deg, #FFE633 0%, #88BBFF 50%, #4488FF 100%);
  --grad-bb-extended: linear-gradient(135deg, #FFE633 0%, #88BBFF 50%, #4488FF 100%);
  --grad-label-warm: linear-gradient(90deg, var(--hue-orange), var(--hue-amber)); /* amber eyebrow — used by .label.label-warm */

  /* ---------- Product theme contract ----------
     Every product declares these four vars. Components
     read from --product-* 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);
}

/* =============================================================
   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 THEMES (sub-themes)
   Apply via data-product on any ancestor. Example:
     <section data-product="cari"> ... </section>
   Every componenet that reads --product-* re-skins automatically.
   ============================================================= */

[data-product="core"] {
  --product-start: #f77f00;
  --product-mid: #ED45BE;
  --product-end: #823ABC;
  --product-accent: #c98aff;
  --product-grad: linear-gradient(135deg, #f77f00 0%, #ED45BE 50%, #823ABC 100%);
  --product-grad-label: linear-gradient(90deg, #f77f00, #ED45BE, #823ABC);
  --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);
}

[data-product="cari"] {
  --product-start: #823ABC;
  --product-mid: #ED45BE;
  --product-end: #ED45BE;
  --product-accent: #c98aff;
  --product-grad: linear-gradient(135deg, #823ABC 0%, #ED45BE 100%);
  --product-grad-label: linear-gradient(90deg, #823ABC, #ED45BE);
  --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);
}

[data-product="bajanbuddy"] {
  /* Neon yellow → blue gradient (Barbados flag inspired) */
  --product-start: #FFE633;
  --product-mid: #88BBFF;
  --product-end: #4488FF;
  --product-accent: #FFE633;
  --product-grad: linear-gradient(135deg, #FFE633 0%, #88BBFF 50%, #4488FF 100%);
  --product-grad-label: linear-gradient(90deg, #FFE633, #88BBFF, #4488FF);
  --product-glow: rgba(255, 230, 51, 0.30);
  --product-halo: rgba(68, 136, 255, 0.25);
  --product-tint: rgba(255, 230, 51, 0.10);
  --product-border: rgba(136, 187, 255, 0.25);

  /* Ultramarine surfaces */
  --bg-canvas: #001242;
  --bg-surface-1: #001a54;
  --bg-surface-2: #002068;
  --bg-surface-3: #00267F;
  --bg-surface-glass: rgba(0, 18, 66, 0.92);
  --aura-alt: radial-gradient(ellipse 70% 60% at 50% 50%, rgba(255, 199, 38, 0.08) 0%, transparent 70%);

  /* Dark text on buttons (readable on yellow end of gradient) */
  --fg-on-brand: #001242;

  --shadow-glow: 0 4px 20px rgba(255, 230, 51, 0.30), 0 0 40px rgba(68, 136, 255, 0.25);
  --focus-ring: 0 0 0 3px rgba(255, 230, 51, 0.45);
}

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