/* ==========================================================================
   Echo — brand tokens
   echo.thebraincompany.co · shared by every page on this subdomain

   Every value here is lifted from the Echo iOS app, not invented:
   colours from Echo/Theme.swift, the type scale and tracking from
   docs/brand-reference.md, the radii and spacing steps from the values the
   app's own views actually use (22 is the workhorse radius, 20 the workhorse
   gutter). If you need a value that is not here, take it from the app rather
   than adding a new one.

   The one thing to understand: Echo is a one-colour brand. One green, plus
   true neutrals. The green is a signal, not a mood — it marks moments that
   matter and never washes a screen. Its single ambient exception is the
   atmosphere glow (see base.css), which is the brand's living signature and
   not a licence to derive further tints.
   ========================================================================== */

:root {
  color-scheme: light dark;

  /* --- Signal Green -------------------------------------------------------
     The only brand colour. Saturated and yellow-leaning so it reads alive,
     not calm. Identical in both appearances: the signal does not dim at
     night.

     CONTRAST, MEASURED — do not use green for text on the light paper:
       #4BB126 on #F8F8F6 .... 2.59:1  FAIL (fails even AA-large)
       #4BB126 on #FFFFFF .... 2.76:1  FAIL
       #4BB126 on #0F1113 .... 6.86:1  AA
       #16181A on #4BB126 .... 6.46:1  AA   <- the sanctioned label pairing
       #FFFFFF on #4BB126 .... 2.76:1  FAIL (why labels on green are ink)
     Green is therefore a *fill*, a small non-load-bearing mark, or the glow.
     Body text is --ink in both modes, never green; emphasis is weight. */
  --green: #4bb126;
  --green-pressed: #39871d;
  /* Selected-row background or subtle highlight ONLY — never an ambient
     wash, in either appearance. (Color.echoGreenTint.) Body ink reads
     16.23:1 on it in light and 13.72:1 in dark, so text on it is safe. */
  --green-tint: #ecf8e7;

  /* --- Neutrals (light: off-white paper) ---------------------------------
     A true neutral base — never warm cream, never sage. That drift is the
     generic-wellness trap Echo exists to avoid. */
  --paper: #f8f8f6;          /* app background */
  --surface: #ffffff;        /* cards, sheets, elevated content */
  --surface-raised: #ffffff; /* light mode: same white, the shadow carries depth */
  --ink: #16181a;            /* near-black, not pure — "clear", not "harsh" */
  --ink-secondary: #6b6f73;  /* captions, metadata (4.76:1 on paper, AA) */
  --hairline: #e5e5e3;       /* dividers, decorative rules */
  --ink-on-green: #16181a;   /* fixed in both modes; never white */

  /* --- Error state --------------------------------------------------------
     The brand has no red of its own, on purpose: green is Echo's yes, and it
     cannot double as its no. The rule for system states is to use standard
     iOS system colours rather than invent a brand variant — so this is
     Apple's own high-contrast systemRed (#D70015 light / #FF6961 dark), not
     plain systemRed, which is only 3.34:1 on this paper and fails as text.
     Measured: 5.06:1 on paper light, 6.71:1 on paper dark.

     The ground and edge are mixed from that ink rather than picked, so they
     stay in step with it and with the surface underneath in both themes.
     Measured on --surface: error ink reads 4.74:1 light / 5.50:1 dark on its
     own ground, body ink 15.68:1 / 13.97:1. */
  --danger: #d70015;
  --danger-surface: color-mix(in srgb, var(--danger) 7%, var(--surface));
  --danger-hairline: color-mix(in srgb, var(--danger) 28%, var(--hairline));

  /* --- Type ---------------------------------------------------------------
     Söhne in exactly two weights, ever: Buch (400) for reading text,
     Halbfett (600) for hierarchy and action. No italics, no other cuts.

     'Echo Sans' is the family name both weights are served under, so the
     face can be swapped in one place (base.css) without touching a single
     rule here or on any page. See the licence note in base.css for why the
     shipped face is currently Inter and not Söhne. */
  --font-sans: "Echo Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;
  --weight-body: 400;
  --weight-strong: 600;

  /* Sizes. The app's pt values, read as px: Display 34–40, Headline 22–28,
     Subhead 17–19, Body 15–17, Caption 12–13, Button 15–17. */
  --text-display: 2.125rem; /* 34 */
  --text-headline: 1.5625rem; /* 25 */
  --text-subhead: 1.125rem; /* 18 */
  --text-body: 1.0625rem; /* 17 */
  --text-caption: 0.8125rem; /* 13 */

  /* The brand's slightly negative tracking on display and headline sizes —
     "precise", not loose. Never applied to body or caption. */
  --tracking-tight: -0.015em;

  --leading-tight: 1.24;
  --leading-body: 1.62;

  /* --- Spacing -----------------------------------------------------------
     The steps the app's views actually use. 20 is the workhorse gutter. */
  --sp-1: 0.25rem; /* 4 */
  --sp-2: 0.5rem; /* 8 */
  --sp-3: 0.75rem; /* 12 */
  --sp-4: 1rem; /* 16 */
  --sp-5: 1.25rem; /* 20 <- gutter */
  --sp-6: 1.75rem; /* 28 */
  --sp-7: 2.5rem; /* 40 */
  --sp-8: 3.5rem; /* 56 */
  --sp-9: 5rem; /* 80 */
  --sp-10: 7rem; /* 112 */
  --gutter: var(--sp-5);

  /* --- Radii -------------------------------------------------------------
     22 is the app's standard panel radius, 26 its large card, and controls
     are capsules. */
  --radius-sm: 0.1875rem; /* 3 */
  --radius: 1.375rem; /* 22 */
  --radius-lg: 1.625rem; /* 26 */
  --radius-pill: 999px;

  /* --- Elevation ---------------------------------------------------------
     Light mode: a shadow soft enough to read as the sheet's thickness
     rather than as height. Dark mode overrides these to `none` — there,
     elevation reads from surface lightness plus hairlines, never shadows. */
  --shadow-card: 0 6px 14px rgba(0, 0, 0, 0.04);
  --shadow-cta: 0 6px 14px rgba(75, 177, 38, 0.28);
  --shadow-raised: 0 18px 48px rgba(0, 0, 0, 0.1),
    0 2px 8px rgba(0, 0, 0, 0.05);

  /* --- Measure ------------------------------------------------------------ */
  --measure: 34rem; /* reading column: ~62–68 characters at --text-body */
  --page-max: 68rem;

  /* --- Atmosphere --------------------------------------------------------
     The glow's opacities, kept as tokens so the light can be tuned in one
     place. Light and dark carry slightly different inks (see base.css). */
  --glow-wash: 0.075;
  --glow-heart: 0.06;
  --glow-shoulder: 0.042;
  --glow-well: 0; /* dark mode only */
}

/* --------------------------------------------------------------------------
   Dark — the app's night face. Cool, blue-leaning near-blacks: alert and
   clear, not cozy. Never warm charcoal, never pure black, never green-cast;
   if a dark neutral reads green, it is wrong.
   -------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #0f1113;
    --surface: #1a1d1f;
    --surface-raised: #24282b; /* the step up exists only in the dark */
    --ink: #f2f3f4; /* 17.03:1 on paper, AAA */
    --ink-secondary: #9ca0a5; /* 7.19:1 on paper, AAA */
    --hairline: #2a2d30;
    --green-tint: #182a11;
    --danger: #ff6961; /* Apple's high-contrast systemRed, dark */

    /* Elevation is carried by surface lightness and hairlines here. */
    --shadow-card: none;
    --shadow-raised: none;

    --glow-wash: 0.07;
    --glow-heart: 0.058;
    --glow-shoulder: 0.038;
    /* In the dark the paper itself deepens toward the bottom edge — a still
       well for the light to sit in, so the glow reads as coming from depth
       rather than being painted on. */
    --glow-well: 0.22;
  }
}