/* ════════════════════════════════════════════════════════════════════
   OWO PLANNER — BRAND PRIMITIVES
   ════════════════════════════════════════════════════════════════════
   The single source of truth for colour and type across BOTH surfaces:
   the marketing site (lagos.css) and the product (shared.css + dash.css).

   Before this file existed the two had drifted onto four separate axes —
   Geist vs Inter, #FAFAF7 warm vs #FAFAFA cool ground, #0E1B3A navy vs
   #0A0A0A neutral ink, #F2A93B amber vs #FDE047 lemon accent — so clicking
   "Open Owo Planner" landed you in what looked like different software.

   Nothing here is consumed by components directly. lagos.css and
   shared.css map these onto their own semantic layers; components only
   ever read the semantic names.

   Load order everywhere:  brand.css → (lagos.css | shared.css → dash.css)
   ════════════════════════════════════════════════════════════════════ */

:root {

  /* ── TYPE ─────────────────────────────────────────────────────────
     Geist carries the interface. Instrument Serif appears in italic
     only, as the accent voice in display lines ("see it.", "For real
     this time."). Geist Mono holds every figure so Naira amounts stay
     on the same rhythm whether they sit in a hero or a table cell.
     Four weights, and no more — 400 reads, 500 labels, 700 asserts,
     800 is reserved for display sizes. A fifth weight has never once
     been the reason a layout worked. */
  --font-ui:      'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --font-mono:    'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --w-body:    400;
  --w-label:   500;
  --w-strong:  700;
  --w-display: 800;

  /* ── INK ──────────────────────────────────────────────────────────
     Deep navy, never neutral black. #0E1B3A against the warm ground
     reads softer than #000 while measuring 15.8:1 — well past AA. */
  --c-ink:        #0E1B3A;
  --c-ink-78:     rgba(14, 27, 58, 0.78);
  --c-ink-55:     rgba(14, 27, 58, 0.55);
  --c-ink-25:     rgba(14, 27, 58, 0.25);
  --c-ink-10:     rgba(14, 27, 58, 0.10);
  --c-ink-06:     rgba(14, 27, 58, 0.06);

  /* ── GROUND (light) ───────────────────────────────────────────────
     Warm off-white throughout. Pure #FFFFFF is gone: paper is #FFFDF9,
     a half-degree warmer than the ground it sits on, which is what
     makes a card read as paper rather than as a hole in the page. */
  --c-ground:       #FAFAF7;
  --c-ground-deep:  #F1EFE6;
  --c-paper:        #FFFDF9;
  --c-sunken:       #F6F4EE;   /* recessed wells inside cards */

  /* ── GROUND (dark) ────────────────────────────────────────────────
     The same navy family as the ink, not a neutral black. Both
     surfaces share these now, so dark mode is one product too. */
  --c-ground-dk:      #0E1B3A;
  --c-ground-deep-dk: #0A1430;
  --c-paper-dk:       #14213E;
  --c-sunken-dk:      #1B2C55;
  --c-ink-dk:         #FAFAF7;

  /* ── ACCENT ───────────────────────────────────────────────────────
     One constrained accent, in two jobs that must not be confused:
       amber  — anything interactive or emphasised (links, active nav,
                focus rings, chart ink, the accent voice in headlines)
       yellow — fill only, never text: the marker highlight behind
                "see it.", a badge ground, the danfo in the hero.
     The product previously used the yellow as its primary button,
     which is why it read as a template. The primary action is ink. */
  --c-amber:       #F2A93B;
  --c-amber-deep:  #D89730;
  --c-amber-ink:   #8A5D00;   /* amber legible as TEXT on warm ground — 4.8:1 */
  --c-yellow:      #FDE047;
  /* Dark grounds need the accent lifted or it muddies into the navy. */
  --c-amber-dk:    #F4B554;
  --c-amber-dk-hi: #F8C57A;
  --c-amber-warn:  #92600C;   /* amber dark enough to carry warning TEXT on warm ground */

  /* ── STATE ────────────────────────────────────────────────────────
     Palm green for growth, amber for caution, clay for loss. Semantic
     colour is kept clear of the accent so "this is interactive" and
     "this went wrong" never look like the same signal. */
  --c-palm:        #0E4A38;
  --c-palm-lt:     #4ADE80;
  --c-clay:        #A3341F;
  --c-clay-lt:     #F0846B;

  /* ── ELEVATION ────────────────────────────────────────────────────
     Two layers, both tinted with the ink rather than neutral black:
     a 1px contact shadow that sits the object on the page, and a long
     soft cast that gives it height. Generic 0 4px 6px rgba(0,0,0,.1)
     does neither and announces itself as a default. */
  --shadow-1:    0 1px 2px rgba(14, 27, 58, 0.04), 0 14px 30px -20px rgba(14, 27, 58, 0.30);
  --shadow-2:    0 1px 2px rgba(14, 27, 58, 0.06), 0 24px 60px -20px rgba(14, 27, 58, 0.18);
  --shadow-3:    0 2px 4px rgba(14, 27, 58, 0.06), 0 40px 80px -30px rgba(14, 27, 58, 0.45);
  --shadow-1-dk: 0 1px 2px rgba(0, 0, 0, 0.40), 0 14px 30px -20px rgba(0, 0, 0, 0.70);
  --shadow-2-dk: 0 1px 2px rgba(0, 0, 0, 0.30), 0 24px 60px -20px rgba(0, 0, 0, 0.55);
  --shadow-3-dk: 0 2px 4px rgba(0, 0, 0, 0.40), 0 40px 80px -30px rgba(0, 0, 0, 0.75);

  /* ── MOTION ───────────────────────────────────────────────────────
     Shared easings so a hover on the site and a hover in the app
     decelerate the same way. */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}