/* ════════════════════════════════════════════════════════════════════
   VALORY  ·  Design Tokens
   Source of truth for all visual decisions.
   Edit values here; never override these tokens in component CSS.
   ════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400..700&family=IBM+Plex+Mono:wght@400;500&family=Sora:wght@400..700&display=swap');

/* Breakpoints (CSS variables cannot appear in @media query lists; these
   are documentation values only, write the pixel sizes directly):

     tablet   :   640px
     desktop  :  1024px
     wide     :  1440px

   Mobile is anything below 640px (default).
*/


:root,
[data-theme="dark"] {

  /* ── 1. Surfaces ─────────────────────────────────────────────────
     Warm near-black scales up in luminosity through the elevation
     steps, so panels lift via tonal shift rather than shadow.
     Sunken sits below surface-0 for inset inputs and pressed states.
     ──────────────────────────────────────────────────────────────── */
  --surface-0:       #0A0805;
  --surface-1:       #14110B;
  --surface-2:       #1E1A12;
  --surface-sunken:  #060503;

  /* ── 2. Foreground ───────────────────────────────────────────────
     Off-white tinted toward warm cream, never pure white, so body
     copy reads like candlelit print. fg-on-accent inverts to deep
     warm near-black because the dark-mode --accent is bright amber.
     ──────────────────────────────────────────────────────────────── */
  --fg-primary:      #FAF5E8;
  --fg-secondary:    #BDB59F;
  --fg-muted:        #7A745F;
  --fg-on-accent:    #1A1408;

  /* ── 3. Borders ──────────────────────────────────────────────────
     Warm-dark borders, never gray. border-strong doubles as the
     visible focus ring; border-accent is a soft amber wash for
     "in amber state" without filling the surface.
     ──────────────────────────────────────────────────────────────── */
  --border:          #2A2317;
  --border-strong:   #463E2C;
  --border-accent:   rgba(251, 191, 36, 0.45);

  /* ── 4. Accent (amber) ───────────────────────────────────────────
     The single carrying color. #FBBF24 reads on warm near-black
     without ever becoming the dominant color of a page.
     accent-hover is the one place amber drifts toward yellow, by
     design (Tailwind amber-300 territory). accent-deep mirrors the
     light-mode primary so deep states feel consistent across themes.
     accent-soft and accent-glow are alpha forms of the same hue,
     used as atmosphere (tinted backgrounds, halos), never as fills.
     ──────────────────────────────────────────────────────────────── */
  --accent:          #FBBF24;
  --accent-hover:    #FCD34D;
  --accent-deep:     #D97706;
  --accent-soft:     rgba(251, 191, 36, 0.08);
  --accent-glow:     rgba(251, 191, 36, 0.35);

  /* ── 5. Semantic ─────────────────────────────────────────────────
     Tuned to coexist with amber without competing. Success leans
     olive-lime so it shares warmth with the palette; danger is a
     restrained brick red, not a fire-alarm red; info is the one
     cool color in the system, used as foreground only (icons,
     badges, link emphasis), never as a surface.
     ──────────────────────────────────────────────────────────────── */
  --success:         #84CC16;
  --danger:          #DC2626;
  --info:            #38BDF8;

  /* Graded semantic scale for the goal countdown badge (and reusable
     elsewhere). dark theme. soft → strong as urgency rises; critical = red. */
  --color-success:        #84CC16;
  --color-warning-soft:   #D89C3C;
  --color-warning-strong: #E07B39;
  --color-critical:       #EF4444;

  /* ── 6. Typography ───────────────────────────────────────────────
     Display: Fraunces (variable serif with optical sizing; warmth
     and character without slipping into "Edwardian"). Body: Sora
     (warm geometric sans, neutral but never generic). Mono: IBM
     Plex Mono (characterful, tabular).

     Sizes climb a 1.25 modular scale at the heading end. The
     xs/sm/base step is intentionally gentler because UI labels
     live in that range and need fine differentiation.

     Three weights only. If a design wants more contrast, scale
     the size, not the weight.
     ──────────────────────────────────────────────────────────────── */
  --font-display:    'Fraunces', Georgia, serif;
  --font-body:       'Sora', system-ui, -apple-system, sans-serif;
  --font-mono:       'IBM Plex Mono', ui-monospace, monospace;

  --text-xs:         0.75rem;
  --text-sm:         0.875rem;
  --text-base:       1rem;
  --text-lg:         1.25rem;
  --text-xl:         1.625rem;
  --text-2xl:        2.125rem;

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-bold:     700;

  --leading-tight:   1.2;
  --leading-normal:  1.55;

  /* ── 7. Spacing ──────────────────────────────────────────────────
     Base 4px scale; components must snap to these values. The
     non-linear top end (16, 24, 32, 48) gives layout breathing
     room without inventing intermediate tokens.
     ──────────────────────────────────────────────────────────────── */
  --space-1:         0.25rem;
  --space-2:         0.5rem;
  --space-3:         0.75rem;
  --space-4:         1rem;
  --space-5:         1.5rem;
  --space-6:         2rem;
  --space-7:         3rem;

  /* ── 8. Radius ───────────────────────────────────────────────────
     Three step radii plus the pill. Tight (chips, inputs), default
     (cards, buttons), large (modals, hero surfaces). radius-full is
     reserved for true pills and avatars.
     ──────────────────────────────────────────────────────────────── */
  --radius-sm:       6px;
  --radius-md:       10px;
  --radius-lg:       16px;
  --radius-full:     9999px;

  /* ── 9. Elevation ────────────────────────────────────────────────
     Dark-mode shadows barely register; elevation is mostly read
     from the surface-1 vs surface-2 lightness shift. Shadows still
     exist for definitive lift (popovers, modals), colored warm
     near-black with restrained alpha so they fall toward amber, not
     gray. glow-accent is the soft amber halo on active controls,
     focus rings, and live status indicators.
     ──────────────────────────────────────────────────────────────── */
  --shadow-sm:       0 1px 2px 0 rgba(10, 7, 0, 0.40);
  --shadow-md:       0 8px 24px -4px rgba(10, 7, 0, 0.50);
  --shadow-lg:       0 24px 64px -12px rgba(10, 7, 0, 0.65);
  --glow-accent:     0 0 24px rgba(251, 191, 36, 0.18);

  /* ── 10. Motion ──────────────────────────────────────────────────
     Exponential ease-out for entrances (things decelerate into
     place, no bounce). Smoother ease-in-out for state changes.
     Three durations only, applied to opacity, color, transform
     (never layout properties).
     ──────────────────────────────────────────────────────────────── */
  --ease-out:        cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:     cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast:   150ms;
  --duration-base:   220ms;
  --duration-slow:   320ms;

  /* ── 11. Layout ──────────────────────────────────────────────────
     Content max, sidebar width, navbar height. Used as raw anchors
     by layout shells; never composed at the component level.
     ──────────────────────────────────────────────────────────────── */
  --container-max:   1200px;
  --sidebar-width:   264px;
  --navbar-height:   64px;

  /* ── 12. Z-index ─────────────────────────────────────────────────
     Named scale; never write raw z-index numbers in components.
     Generous gaps leave room for occasional intermediate layers
     (e.g. an inline menu sitting between dropdown and sticky).
     ──────────────────────────────────────────────────────────────── */
  --z-base:          0;
  --z-raised:        10;
  --z-dropdown:      100;
  --z-sticky:        200;
  --z-modal:         1000;
  --z-toast:         2000;
}


[data-theme="light"] {
  /* Only redeclares tokens that differ between themes. Token names
     are identical; only values change. Typography, spacing, radius,
     motion, layout, and z-index live only in :root.
     ────────────────────────────────────────────────────────────── */

  /* ── 1. Surfaces ─────────────────────────────────────────────────
     Warm cream, never pure white. surface-0 is the page itself
     (aged paper); higher elevations lift toward the lightest
     off-white we permit. Sunken drops below the page for inputs
     and pressed states.

     Luminance gaps are intentionally wide here so a card sitting on
     the page has a clearly perceptible edge without relying only on
     borders or shadows. (Cards still get a 1px border by default,
     but the surface delta carries the work.) Adjacent values are
     roughly 12 L* points apart in oklch, which is the threshold
     where most humans see two surfaces as "different paper" rather
     than "same paper, different lighting".
     ──────────────────────────────────────────────────────────────── */
  --surface-0:       #E8DEC5;
  --surface-1:       #FBF7EA;
  --surface-2:       #FEFCF6;
  --surface-sunken:  #D5C9AC;

  /* ── 2. Foreground ───────────────────────────────────────────────
     Deep warm near-black for primary; the rest scale through
     warm-tinted grays. fg-on-accent inverts to lightest cream
     because the light-mode --accent is the deeper #D97706.
     ──────────────────────────────────────────────────────────────── */
  --fg-primary:      #1A1408;
  --fg-secondary:    #5C513D;
  --fg-muted:        #8B7E62;
  --fg-on-accent:    #FBF6E7;

  /* ── 3. Borders ──────────────────────────────────────────────────
     Tinted warm tans, deep enough to read on cream without
     becoming graphical lines.
     ──────────────────────────────────────────────────────────────── */
  --border:          #E2D8BC;
  --border-strong:   #C8BB9A;
  --border-accent:   rgba(217, 119, 6, 0.40);

  /* ── 4. Accent (amber) ───────────────────────────────────────────
     #FBBF24 lacks contrast against warm cream, so light mode shifts
     the carrying amber to the deeper #D97706. Hover drifts toward
     the more saturated #F59E0B (still within the allowed range).
     Pressed pushes into burnt #92400E. soft and glow reuse the
     same rgb at restrained alpha so the amber atmosphere persists.
     ──────────────────────────────────────────────────────────────── */
  --accent:          #D97706;
  --accent-hover:    #F59E0B;
  --accent-deep:     #92400E;
  --accent-soft:     rgba(217, 119, 6, 0.10);
  --accent-glow:     rgba(217, 119, 6, 0.22);

  /* ── 5. Semantic ─────────────────────────────────────────────────
     Deeper versions of the dark-mode trio; cream surfaces need
     stronger color to register without losing the palette.
     ──────────────────────────────────────────────────────────────── */
  --success:         #4D7C0F;
  --danger:          #B91C1C;
  --info:            #0369A1;

  /* Graded semantic scale for the goal countdown badge — light theme. */
  --color-success:        #4D7C0F;
  --color-warning-soft:   #B47514;
  --color-warning-strong: #C2410C;
  --color-critical:       #B91C1C;

  /* ── 9. Elevation ────────────────────────────────────────────────
     In light mode shadows do real lift work. Colored warm dark
     brown (not gray) so the shadow falls toward the same amber
     atmosphere as the rest of the palette. Glow is dialed back
     because amber-on-cream needs less halo to register.
     ──────────────────────────────────────────────────────────────── */
  --shadow-sm:       0 1px 2px 0 rgba(56, 38, 8, 0.08);
  --shadow-md:       0 8px 24px -4px rgba(56, 38, 8, 0.12);
  --shadow-lg:       0 24px 64px -12px rgba(56, 38, 8, 0.18);
  --glow-accent:     0 0 24px rgba(217, 119, 6, 0.18);
}


/* Reduced motion: collapse all durations to zero. Easing curves stay
   defined (harmless when duration is 0) so components don't need
   conditional logic at the call site.
   ──────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-base: 0ms;
    --duration-slow: 0ms;
  }
}