/* ============================================================================
   Veya — Design Tokens
   The single source of truth for the website's visual system.
   Palette, type, spacing, motion and elevation are lifted verbatim from the
   app's design system (lib/theme/lux.dart) so web ↔ app read as one product.

   Theming: dark-first (the signature "obsidian" look). [data-theme="light"]
   flips the SEMANTIC tokens only — brand hues, macros and motion are invariant,
   exactly as Lux resolves them at runtime.
   ============================================================================ */

:root {
  /* ---- Brand primitives (theme-invariant) ------------------------------- */
  --veya-emerald:      #34D399;   /* Lux.accentSeed */
  --veya-emerald-hi:   #5FD9AC;   /* gradient top   */
  --veya-emerald-lo:   #239E74;   /* gradient bottom*/
  --veya-on-emerald:   #06140D;   /* ink on emerald */

  --veya-blue:         #2E7AF0;   /* light-theme accent */
  --veya-blue-hi:      #5C9BF7;
  --veya-blue-lo:      #1C58CC;
  --veya-on-blue:      #FFFFFF;

  /* Macro triad — calm, low-chroma so the accent stays the hero. */
  --veya-protein:      #DB6F7E;
  --veya-carbs:        #D7A24F;
  --veya-fat:          #6E92D4;

  --veya-over:         #E08B5F;   /* over-budget, calm terracotta */
  --veya-dawn:         #C9885A;   /* warm rest-state glow */
  --veya-water:        #49B6E8;

  /* Meal-identity arc (sunrise → night) */
  --veya-meal-breakfast: #FF8E72;
  --veya-meal-lunch:     #45CFA0;
  --veya-meal-dinner:    #7488D6;
  --veya-meal-snack:     #BA92E6;

  /* ---- Obsidian scale (dark surfaces) ----------------------------------- */
  --obsidian:          #06070A;   /* Lux._bgD  — true background */
  --obsidian-fade:     #0F1115;   /* Lux._fadeD */
  --obsidian-card-top: #1B1E27;   /* Lux._cardTopD */
  --obsidian-card-bot: #12141B;   /* Lux._cardBottomD */
  --obsidian-icon-top: #13151B;   /* app-icon field top */
  --obsidian-icon-bot: #08090E;   /* app-icon field bottom */

  /* ---- Type ------------------------------------------------------------- */
  --font-sans: "IBM Plex Sans", "IBM Plex Sans Arabic", "IBM Plex Sans Hebrew",
               -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-arabic: "IBM Plex Sans Arabic", var(--font-sans);
  --font-hebrew: "IBM Plex Sans Hebrew", var(--font-sans);

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

  /* Fluid type scale — trims to phone, breathes on desktop. */
  --fs-display: clamp(2.75rem, 1.6rem + 5.6vw, 5.5rem);   /* hero headline */
  --fs-h1:      clamp(2.25rem, 1.5rem + 3.4vw, 3.75rem);
  --fs-h2:      clamp(1.75rem, 1.25rem + 2.2vw, 2.75rem);
  --fs-h3:      clamp(1.3rem, 1.05rem + 1.1vw, 1.75rem);
  --fs-lead:    clamp(1.1rem, 1rem + 0.5vw, 1.375rem);    /* section intros */
  --fs-body:    1.0625rem;
  --fs-small:   0.9375rem;
  --fs-caption: 0.8125rem;
  --fs-eyebrow: 0.8125rem;

  --lh-tight:   1.05;
  --lh-snug:    1.2;
  --lh-normal:  1.6;
  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-eyebrow: 0.14em;

  /* ---- Spacing (8pt rhythm) --------------------------------------------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;
  --space-40: 160px;

  /* Section vertical rhythm — generous, Apple-calm. */
  --section-y: clamp(5rem, 3rem + 9vw, 9rem);

  /* ---- Radii (mirror Lux) ----------------------------------------------- */
  --radius-sm:  12px;
  --radius:     18px;   /* tiles  */
  --radius-lg:  24px;   /* cards  */
  --radius-xl:  28px;   /* hero   */
  --radius-2xl: 36px;
  --radius-pill: 999px;

  /* ---- Motion (mirror Lux) ---------------------------------------------- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);   /* settled ease-out */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-quick: 180ms;
  --dur:       300ms;
  --dur-slow:  600ms;

  /* ---- Layout ----------------------------------------------------------- */
  --container:        1160px;
  --container-wide:   1320px;
  --container-narrow: 720px;
  --gutter: clamp(1.25rem, 0.5rem + 3vw, 2.5rem);

  /* ---- Z-index ---------------------------------------------------------- */
  --z-base: 1;
  --z-raised: 10;
  --z-sticky: 100;
  --z-header: 200;
  --z-overlay: 900;
  --z-modal: 1000;
}

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

  --bg:            var(--obsidian);
  --bg-elev:       var(--obsidian-fade);
  --surface:       rgba(255, 255, 255, 0.035);   /* Lux.tile dark veil */
  --surface-2:     rgba(255, 255, 255, 0.05);
  --card-top:      var(--obsidian-card-top);
  --card-bot:      var(--obsidian-card-bot);

  --text:          #F4F6F7;                       /* Lux._textD */
  --text-muted:    rgba(232, 238, 240, 0.64);     /* Lux._text2D */
  --text-faint:    rgba(232, 238, 240, 0.50);     /* Lux._text3D */

  --border:        rgba(255, 255, 255, 0.08);
  --hairline:      rgba(255, 255, 255, 0.06);     /* Lux._hairlineD */
  --border-strong: rgba(255, 255, 255, 0.14);

  --accent:        var(--veya-emerald);
  --accent-hi:     var(--veya-emerald-hi);
  --accent-lo:     var(--veya-emerald-lo);
  --on-accent:     var(--veya-on-emerald);
  --accent-grad:   linear-gradient(150deg, var(--veya-emerald-hi) 0%, var(--veya-emerald) 55%, var(--veya-emerald-lo) 100%);
  --accent-soft:   rgba(52, 211, 153, 0.13);
  --accent-glow:   rgba(52, 211, 153, 0.30);

  --card-grad:     linear-gradient(180deg, var(--card-top) 0%, var(--card-bot) 100%);
  --shadow-card:   0 18px 40px rgba(0, 0, 0, 0.50);
  --shadow-hero:   0 26px 44px rgba(0, 0, 0, 0.55), 0 4px 10px rgba(0, 0, 0, 0.30);
  --shadow-soft:   0 12px 26px rgba(0, 0, 0, 0.40);
  --shadow-float:  0 30px 80px rgba(0, 0, 0, 0.6);

  /* Ambient atmosphere behind the hero — a low emerald dawn, never a loud wash. */
  --ambient-emerald: radial-gradient(60% 50% at 50% 0%, rgba(52, 211, 153, 0.10) 0%, transparent 70%);
  --ambient-dawn:    radial-gradient(50% 40% at 50% 100%, rgba(201, 136, 90, 0.08) 0%, transparent 70%);
  --grid-line:       rgba(255, 255, 255, 0.04);
}

/* ============================================================================
   Semantic tokens — LIGHT
   Mirrors Lux's light theme: soft off-white paper, ink text, blue accent,
   cards defined by soft lift shadows (no borders).
   ============================================================================ */
:root[data-theme="light"] {
  color-scheme: light;

  --bg:            #F4F6F8;                       /* Lux._bgL */
  --bg-elev:       #EAEDF1;
  --surface:       #FFFFFF;
  --surface-2:     #F2F4F8;
  --card-top:      #FFFFFF;
  --card-bot:      #F2F4F8;

  --text:          #10141A;                       /* Lux._textL */
  --text-muted:    rgba(16, 20, 26, 0.64);
  --text-faint:    rgba(16, 20, 26, 0.45);

  --border:        rgba(16, 20, 26, 0.08);
  --hairline:      rgba(0, 0, 0, 0.14);           /* Lux._hairlineL */
  --border-strong: rgba(0, 0, 0, 0.14);

  --accent:        var(--veya-blue);
  --accent-hi:     var(--veya-blue-hi);
  --accent-lo:     var(--veya-blue-lo);
  --on-accent:     var(--veya-on-blue);
  --accent-grad:   linear-gradient(150deg, var(--veya-blue-hi) 0%, var(--veya-blue) 55%, var(--veya-blue-lo) 100%);
  --accent-soft:   rgba(46, 122, 240, 0.10);
  --accent-glow:   rgba(46, 122, 240, 0.22);

  --card-grad:     linear-gradient(180deg, #FFFFFF 0%, #F2F4F8 100%);
  /* Lux.liftShadow — the unified soft card lift. */
  --shadow-card:   0 2px 8px rgba(0, 0, 0, 0.05), 0 8px 24px rgba(0, 0, 0, 0.08);
  --shadow-hero:   0 16px 30px rgba(0, 0, 0, 0.08), 0 3px 6px rgba(0, 0, 0, 0.04);
  --shadow-soft:   0 2px 8px rgba(0, 0, 0, 0.05), 0 8px 24px rgba(0, 0, 0, 0.08);
  --shadow-float:  0 30px 70px rgba(0, 0, 0, 0.14);

  --ambient-emerald: radial-gradient(60% 50% at 50% 0%, rgba(46, 122, 240, 0.06) 0%, transparent 70%);
  --ambient-dawn:    radial-gradient(50% 40% at 50% 100%, rgba(201, 136, 90, 0.05) 0%, transparent 70%);
  --grid-line:       rgba(0, 0, 0, 0.045);
}

/* Respect users who ask for less motion. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-quick: 1ms;
    --dur: 1ms;
    --dur-slow: 1ms;
  }
}