/* ==========================================================================
   Reveal the Dream. Design tokens
   ==========================================================================
   Source of truth: design/icon/icon_ios_1024.png (the app icon: a sage->teal
   petal rosette with a soft white rim, a glowing amber core, on a warm cream
   ground). Every colour below either IS a value measured from that icon by
   site/assets/tokens/extract_palette.py, or is derived from a measured value
   (same hue/saturation family, lightness adjusted for a real use. Text
   contrast, elevation, hover/active state). Derivations are noted inline.

   This file is additive groundwork. It is not yet linked from index.html. See site/_tokens.html for the visual spec sheet, and
   site/assets/tokens/check_contrast.py for the AA contrast proof.

   No build step: plain CSS custom properties, light default + dark via
   prefers-color-scheme, same pattern already used by site/styles.css.
   ========================================================================== */

:root {
  /* ---- Colour: surfaces (light) -----------------------------------------
     ground: measured directly. Mean of the four corner patches of the icon
       (pure background, outside the rosette). extract_palette.py -> "ground".
     surface / surface-raised: derived. Same warm-cream family, lightened
       toward white for elevation. Not measured (the icon has no "card" on
       top of its ground); this is an interface decision made in the icon's
       palette family. */
  /* The icon's measured cream is #f9eacd. Across a full page it reads distinctly yellow and
     drifts toward wellness-brand, so the page ground is a near-neutral off-white and the
     measured cream becomes ground-warm. A band colour for alternating sections. The warmth
     then reads as deliberate rhythm rather than a wash, and the teal cover (which is the
     actual product) stays the only real colour on the page. Chosen 2026-07-28 by rendering
     both against identical type, cover ramp and accent. */
  --color-ground: #EFE8DB;
  --color-ground-warm: #E5DCC9;
  --color-surface: #FFFDF9;
  --color-surface-raised: #FFFFFF;

  /* ---- Colour: text (light) -----------------------------------------
     text-primary: derived. A warm near-black with a faint cool-teal cast
       (not a flat neutral #000), so body copy still reads as "this brand's
       ink" rather than generic grey. Contrast vs ground: 13.34:1.
     text-muted / text-faint: both derived from the interpetal-shadow
       measurement (~#4d786f), desaturated and darkened.
       These were originally #5c6864 and #626a66. Each tuned to sit just
       over AA, which landed them 0.2 of a contrast step apart and made them
       the same colour on screen. Three named tiers have to LOOK like three
       tiers, so muted moved darker (6.77:1 on ground) to open daylight
       between them, and faint sits near the AA floor (4.90:1). Do not
       lighten faint further. It is already the palest text colour that
       clears 4.5:1 on every surface it is used on. Dark mode never had this
       problem and keeps its original values. See check_contrast.py. */
  --color-text-primary: #14180F;
  --color-text-muted: #55504A;
  --color-text-faint: #6B655C;

  /* ---- Colour: border (light) -----------------------------------------
     Derived from ground, darkened slightly. This is a decorative hairline
     divider, not a UI-component boundary that conveys required meaning on
     its own (always paired with spacing/position), so it is intentionally
     subtle and is not held to the 3:1 non-text contrast criterion. */
  --color-border: #DFD6C4;

  /* ---- Colour: sage-teal cover ramp -----------------------------------
     The four steps of the "cover". Measured directly from the petals,
     light to dark. This is the same ramp the app's reveal cover renders
     with; the marketing site uses it for illustrative UI (progress bars,
     the cover-diagram graphic, badges) so the site visually rhymes with
     the product itself.
     cover-1: extract_palette.py "petal-sage-light" (measured, mean).
     cover-2: extract_palette.py "petal-teal-mid" (measured, mean).
     cover-3: extract_palette.py "petal-teal-dark" (measured, mean).
     cover-4: derived. Cover-3 darkened further, for a 4th ramp step /
       deep shadow fill where the design needs one (the icon itself only
       has 3 clearly distinct sage->teal stops). */
  --color-cover-1: #b0cbc0;
  --color-cover-2: #86aba4;
  --color-cover-3: #407d7c;
  --color-cover-4: #2c4744;

  /* ---- Colour: amber accent (light) -----------------------------------
     accent: #4F7866, the app's own sage. Not derived, COPIED: it is the
       exact colour iOS puts on "I Did It" and the desktop puts on its
       primary action (DesktopTheme.kt), so the site's front door and the
       product's now agree. It replaced an amber taken from the icon's mid
       glow, defensible on its own terms but it made the two look like
       different brands.
     accent-hover / accent-active: same hue and saturation, progressively
       darker. accent-active is the step to reach for when the accent must
       be TEXT: it is the only one that clears 4.5:1 on the warm band as
       well as on ground. The app's sage itself does NOT (4.20:1 on
       ground-warm), so base accent is a fill colour, never a link colour.
     on-accent / on-accent-active: BOTH LIGHT, the flip from the amber this
       replaced. Sage is dark enough at every step that a dark label fails
       on it (3.18:1 on base), so all three fills take a near-white label.
       Measured 4.71 / 5.97 / 7.41. See check_contrast.py. */
  --color-accent: #0A482A;
  --color-accent-hover: #0D5A35;
  --color-accent-active: #083D24;
  --color-on-accent: #FDFDFC;
  --color-on-accent-active: #FDFDFC;

  /* ---- Colour: focus ring (light) -----------------------------------
     Same family as accent-active, pushed darker again so a 2px ring stays
     visible against both ground and surface-raised. */
  --color-focus-ring: #083D24;

  /* ---- Type scale ----------------------------------------------------
     Fluid modular scale via clamp(min, preferred, max). Ratio grows from
     ~1.12 at the small end to ~1.3+ at the top, so headings gain more
     presence than body copy as the scale climbs (a flat ratio makes big
     type feel timid). Display is sized to have real weight at 80px+ on
     a normal desktop viewport (clamps to 88px / 5.5rem at >=1280px). */
  --font-size-caption: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem); /* 12 -> 13px */
  --font-size-small: clamp(0.8125rem, 0.78rem + 0.2vw, 0.875rem); /* 13 -> 14px */
  --font-size-body: clamp(1rem, 0.965rem + 0.2vw, 1.0625rem); /* 16 -> 17px */
  --font-size-body-lg: clamp(1.125rem, 1.07rem + 0.3vw, 1.25rem); /* 18 -> 20px */
  --font-size-h3: clamp(1.375rem, 1.28rem + 0.55vw, 1.625rem); /* 22 -> 26px */
  --font-size-h2: clamp(1.75rem, 1.55rem + 1.1vw, 2.25rem); /* 28 -> 36px */
  --font-size-h1: clamp(2.25rem, 1.85rem + 2.2vw, 3.25rem); /* 36 -> 52px */
  --font-size-display: clamp(3rem, 1.9rem + 6vw, 5.5rem); /* 48 -> 88px */

  --line-height-tight: 1.1;
  --line-height-heading: 1.2;
  --line-height-body: 1.6;

  /* Display face: system serif fallback for now. See the report / README
     for the self-hosted display-serif recommendation. Nothing is vendored
     yet, per the "no external requests" rule; when a woff2 is added, the
     custom-named face goes first in this stack and everything below stays
     as fallback. */
  --font-display: ui-serif, "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Georgia, serif;
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* ---- Spacing scale (4px base) --------------------------------------- */
  --space-0: 0;
  --space-1: 0.25rem; /* 4 */
  --space-2: 0.5rem; /* 8 */
  --space-3: 0.75rem; /* 12 */
  --space-4: 1rem; /* 16 */
  --space-5: 1.25rem; /* 20 */
  --space-6: 1.5rem; /* 24 */
  --space-8: 2rem; /* 32 */
  --space-10: 2.5rem; /* 40 */
  --space-12: 3rem; /* 48 */
  --space-16: 4rem; /* 64 */
  --space-20: 5rem; /* 80 */
  --space-24: 6rem; /* 96 */
  --space-32: 8rem; /* 128 */

  /* ---- Radii ----------------------------------------------------------
     Generous and soft, echoing the petals' rounded silhouettes. Never a
     hard right angle on an interactive surface. */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-full: 999px;

  /* ---- Shadows (light) -------------------------------------------------
     Warm-tinted, low-opacity, large blur radius. Soft and diffuse like
     the icon's matte-ceramic falloff, never a hard dark edge. Two layers
     each: a tight contact shadow + a broad ambient one. */
  --shadow-sm: 0 1px 2px rgba(40, 32, 20, 0.05), 0 2px 6px rgba(40, 32, 20, 0.04);
  --shadow-md: 0 4px 12px rgba(40, 32, 20, 0.06), 0 14px 32px rgba(40, 32, 20, 0.07);
  --shadow-lg: 0 10px 24px rgba(40, 32, 20, 0.08), 0 28px 64px rgba(40, 32, 20, 0.1);

  /* ---- Motion -----------------------------------------------------------
     Durations and easings tuned calm rather than snappy: longer settle
     times, gentle deceleration, nothing that feels like a UI "ping". */
  --duration-fast: 150ms;
  --duration-base: 260ms;
  --duration-slow: 440ms;
  --duration-slower: 680ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* gentle, unhurried settle */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
}

/* ==========================================================================
   Dark theme
   ==========================================================================
   Not an inversion of light. The same petals, on a deep warm charcoal
   (never a cold neutral or pure black), with the amber core if anything
   MORE luminous by comparison. Cover ramp and accent are re-picked (not
   just re-used) so they still look like the icon rather than a washed-out
   light-mode leftover.
   ========================================================================== */
@media (prefers-color-scheme: dark) {
  :root {
    /* Surfaces: derived. A warm charcoal-brown family (never desaturated
       to grey/black), each step slightly lighter for elevation. */
    --color-ground: #0D1311;
    /* Warm band for alternating sections. The dark-theme counterpart to ground-warm.
       Warmer and a touch lighter than the ground so the rhythm still reads, without
       ever becoming a light surface. */
    --color-ground-warm: #141C18;
    --color-surface: #171E1A;
    --color-surface-raised: #1E2621;

    /* Text: text-primary is a warm cream echoing the LIGHT theme's ground
       hue (#f9eacd family). The two themes are colour-relatives of each
       other by design. text-muted/faint are desaturated warm tans,
       lightened until they clear body AA against the lightest surface
       token they pair with (surface-raised). */
    --color-text-primary: #E8EFEA;
    --color-text-muted: #9AA69E;
    --color-text-faint: #85918A;

    --color-border: #25302B;

    /* Cover ramp: same measured petal hues, values 1-3 nudged brighter so
       they still separate from the now-dark ground; cover-4 (deepest
       shadow step) is intentionally left as-is. It still reads as a
       shadow on a dark surface. */
    --color-cover-1: #c9e0d6;
    --color-cover-2: #8fb3ab;
    --color-cover-3: #4f938f;
    --color-cover-4: #2c4744;

    /* Sage accent, lifted well above the light-mode value: #4F7866 against
       a near-black ground is close to invisible, so dark mode takes the
       same hue at a much higher lightness. Every step here is far lighter
       than the surfaces, so ONE dark label works for all three, which is
       the opposite of light mode where all three take a light label. */
    --color-accent: #4FBE90;
    --color-accent-hover: #6BD0A5;
    --color-accent-active: #3FA97C;
    --color-on-accent: #0D1311;
    --color-on-accent-active: #0D1311;

    --color-focus-ring: #8FD9B8;

    /* Shadows: dark surfaces need darker, more opaque shadow to register
       at all, but stay soft/diffuse. Large blur, no hard edge. */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.32), 0 2px 8px rgba(0, 0, 0, 0.26);
    --shadow-md: 0 6px 16px rgba(0, 0, 0, 0.36), 0 18px 40px rgba(0, 0, 0, 0.32);
    --shadow-lg: 0 14px 32px rgba(0, 0, 0, 0.42), 0 32px 76px rgba(0, 0, 0, 0.38);
  }
}