/* ==========================================================================
   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: #fbf9f4;
  --color-ground-warm: #f9eacd;
  --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: #1c2422;
  --color-text-muted: #46534f;
  --color-text-faint: #5f6763;

  /* ---- 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: #e6dcc4;

  /* ---- 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: derived from extract_palette.py "amber-core-mid-glow"
       (measured ~#f1b053), deepened so it has real presence as an
       interactive colour rather than reading as a pale highlight.
     accent-hover / accent-active: same hue+saturation, progressively
       darker. accent-active additionally clears 4.5:1 as TEXT on ground
       (4.69:1). It is the variant to reach for when amber needs to be a
       run-in text colour (e.g. a link), because base --color-accent does
       NOT clear text contrast on light surfaces (2.13:1) and is meant for
       icons, large decorative elements and button fills only.
     on-accent / on-accent-active: the two label colours these fills need.
       Base accent and accent-hover are light enough that dark text reads
       best on them (6.25:1 / 4.57:1); accent-active is dark enough that
       it flips. Dark text on it fails (2.85:1) so its label must be
       light (5.57:1 with white/near-white). See check_contrast.py. */
  --color-accent: #e0913a;
  --color-accent-hover: #c6771f;
  --color-accent-active: #965a18;
  --color-on-accent: #1c2422;
  --color-on-accent-active: #fdf8ef;

  /* ---- Colour: focus ring (light) -----------------------------------
     Same family as accent-active (dark, saturated amber) so it reads as
     "the brand's glow", but pushed slightly darker/more saturated again
     so a 2px ring stays visible against both ground and surface-raised. */
  --color-focus-ring: #7a4a14;

  /* ---- 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: #1b1712;
    /* 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: #261e13;
    --color-surface: #241e17;
    --color-surface-raised: #2c2519;

    /* 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: #f3ead9;
    --color-text-muted: #b9ac96;
    --color-text-faint: #9d9281;

    --color-border: #3a3125;

    /* 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;

    /* Amber accent: brighter than light-mode (measured mid-glow sits right
       in this range), so the core still reads as glowing against charcoal
       rather than dulled. Because every dark-mode accent step is much
       lighter than the near-black surfaces, ONE on-accent (dark) label
       colour now works for all three background steps. Unlike light
       mode, no separate light-label variant is needed here. */
    --color-accent: #f2a94e;
    --color-accent-hover: #f6bd72;
    --color-accent-active: #d98f34;
    --color-on-accent: #1c2422;
    --color-on-accent-active: #1c2422;

    --color-focus-ring: #ffce85;

    /* 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);
  }
}