/* ============================================================================
   Sobbr Life — Design Tokens
   "One butterfly, one dawn, two temperaments."
   The tribute is the sky (expressive). The dashboard is the room the next
   morning (calm). The public site is the doorway between them.
   Source of truth: Module Build Specs Part 4 §4.4 + Part 5 §5.1–5.4.
   ---------------------------------------------------------------------------
   Layers:
     1. Brand core  — shared by all surfaces (the Dawn gradient, Brand Rose)
     2. Dashboard   — "dawn light on paper" (calm, flat, light)
     3. Public      — the "Everlight" world (night→dawn, the --dawn control token)
     4. Type / space / radius / elevation
     5. Motion + haptic (ease-out only) + reduced-motion overrides
   All values are contrast-checked; where ink sits on imagery a scrim is required.
   ============================================================================ */

:root {
  /* -- 1. BRAND CORE (shared) ------------------------------------------------ */

  /* The Dawn — one gradient, three doses (tribute sky / site wash / dashboard chip) */
  --dawn-night:  #07070f;
  --dawn-indigo: #141a44;
  --dawn-plum:   #241041;
  --dawn-violet: #43205a;
  --dawn-rose:   #c2497f;   /* Brand Rose, expressive value */
  --dawn-magenta:#7c2f6b;
  --dawn-ember:  #ff8f63;
  --dawn-coral:  #e79d86;
  --dawn-gold:   #ffd291;
  --dawn-amber:  #ffb877;
  --dawn-peach:  #ffe9c6;
  --dawn-cream:  #fbf3e7;

  /* Brand Rose — the one accent that ties both surfaces together.
     Expressive surfaces use --dawn-rose; the calm dashboard uses --rose (below). */
  --rose:         #a6376a;  /* calm/dashboard primary action */
  --rose-pressed: #8e2e58;
  --rose-wash:    #fbeef3;

  /* Semantic — muted, never gaudy, never color-alone (always icon + word too) */
  --ok-ink:     #3f7a5e;  --ok-wash:     #e7f0ea;  /* sage — on-track / good */
  --attn-ink:   #b5701a;  --attn-wash:   #f6ead6;  /* amber — needs-you */
  --urgent-ink: #b23a2e;  --urgent-wash: #f7e4e0;  /* warm brick — used RARELY */

  /* -- 2. DASHBOARD SKIN — "dawn light on paper" ---------------------------- */
  --db-canvas:    #faf7f3;  /* warm oat — never clinical white, never cold gray */
  --db-surface:   #fffdfb;  /* cards lift a hair off the oat */
  --db-hairline:  #eae2d8;  /* warm sand borders */
  --db-ink:       #2a2320;  /* warm espresso, ~13:1 on oat */
  --db-ink-soft:  #6b615a;  /* taupe, ~5:1 (body-safe) */
  --db-ink-hint:  #8a8079;  /* on white only */
  --db-accent:        var(--rose);
  --db-accent-press:  var(--rose-pressed);
  --db-accent-wash:   var(--rose-wash);
  --db-sober-chip:    #fbefe2;  /* the days-sober number sits on this dawn-amber wash */

  /* -- 3. PUBLIC SKIN — the "Everlight" -------------------------------------
     --dawn is the single control token (0 = night, 1 = full morning). A page
     or a scroll position sets it; ink/accent/butterfly tint follow. Reduced
     motion + low-end freeze it at each section's assigned value (a still sky). */
  --dawn: 0;

  --pub-ink-on-night:      #f5eee4;
  --pub-ink-on-night-soft: #d6ccc0;
  --pub-ink-on-dawn:       #39163f;  /* deep plum, ~13:1 on cream */
  --pub-ink-on-dawn-soft:  #5c3a55;
  --pub-accent:      var(--dawn-rose);   /* accent on dark grounds */
  --pub-accent-warm: var(--dawn-amber);  /* decorative highlight only — NEVER text */
  /* Required scrim wherever dark ink sits over dawn imagery (guarantees 4.5:1) */
  --pub-scrim: linear-gradient(180deg, rgba(10,6,20,0) 62%, rgba(10,6,20,.28) 100%);

  /* -- 4. TYPE --------------------------------------------------------------
     Fraunces (OFL, variable) for headings + the days-sober number ONLY.
     Atkinson Hyperlegible Next (OFL) for ALL body/data — the accessibility
     mandate made visible. Mono = system stack (0 web-font bytes) for labels. */
  --font-display: "Fraunces", "Fraunces-fallback", Georgia, "Times New Roman", serif;
  --font-body:    "Atkinson Hyperlegible Next", "Atkinson-fallback", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:    ui-monospace, "SF Mono", "Cascadia Code", "Roboto Mono", Menlo, Consolas, monospace;

  /* type scale — body floor 16px, default 18px; never below 14 */
  --fs-display-xl: clamp(3.5rem, 12vw, 9rem);
  --fs-display-l:  clamp(2.5rem, 7vw, 5rem);
  --fs-h1:         clamp(1.6rem, 5vw, 2.6rem);
  --fs-h2:         clamp(1.35rem, 4vw, 1.9rem);
  --fs-lead:       clamp(1.25rem, 3.5vw, 1.6rem);
  --fs-sober:      clamp(3rem, 9vw, 4rem);   /* the days-sober number */
  --fs-body:       1.125rem;   /* 18px */
  --fs-body-sm:    1rem;       /* 16px floor */
  --fs-meta:       0.9375rem;  /* 15px */
  --fs-label:      0.72rem;    /* mono eyebrows */
  --lh-tight: 0.98;
  --lh-body:  1.55;
  --tracking-label: 0.28em;

  /* Fraunces variable-axis presets (display = airy, high optical size) */
  --fraunces-display: "opsz" 144, "wght" 320, "SOFT" 0, "WONK" 0;
  --fraunces-title:   "opsz" 72,  "wght" 500, "SOFT" 40, "WONK" 0;
  --fraunces-italic:  "opsz" 72,  "wght" 300, "SOFT" 45, "WONK" 0;

  /* -- 4b. SPACE / RADIUS / ELEVATION --------------------------------------- */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-12: 48px;
  --radius-card: 16px;
  --radius-btn:  12px;
  --radius-pill: 999px;
  --radius-input:12px;
  --tap-min: 48px;   /* exceeds WCAG 2.5.8 (24px) + matches Material 48dp */
  /* one soft, warm-tinted shadow — "paper, not glass". Selected = a rose border, not a bigger shadow. */
  --shadow-card: 0 1px 2px rgba(42,35,32,.06), 0 2px 8px rgba(42,35,32,.05);
  --border-selected: 1.5px solid var(--rose);

  /* -- 5. MOTION — ease-out only, NO overshoot/spring/bounce anywhere -------- */
  --dur-press: 120ms;   /* press / toggle / micro */
  --dur-state: 180ms;   /* color / opacity state change */
  --dur-move:  260ms;   /* drill-in / sheets / drawers */
  --dur-toast-in: 200ms;
  --dur-toast-out: 150ms;
  --ease-standard: cubic-bezier(.4, 0, .2, 1);
  --ease-out-soft: cubic-bezier(.32, .72, 0, 1);
  /* public-site expressive easings (entrances only) */
  --ease-expo:  cubic-bezier(.19, 1, .22, 1);
  --ease-quart: cubic-bezier(.165, .84, .44, 1);
}

/* Reduced motion: remove MOVEMENT (translate/scale/rotate) and looping/canvas,
   but keep short opacity fades — a hard cut can itself feel broken.
   Every animated moment must have a static, meaning-preserving equivalent. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-press: 1ms;
    --dur-move:  1ms;
    --dur-state: 100ms;   /* keep fades <=100ms */
  }
}

/* Metric-matched fallback faces so the webfont swap causes no layout shift (CLS).
   Real @font-face src declarations live in each app; these only fix metrics. */
@font-face {
  font-family: "Fraunces-fallback";
  src: local("Georgia");
  size-adjust: 96%;
  ascent-override: 92%;
  descent-override: 24%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Atkinson-fallback";
  src: local("Arial");
  size-adjust: 100%;
  ascent-override: 94%;
  descent-override: 24%;
  line-gap-override: 0%;
}