/* ChatNab — design tokens
   Role names follow montra's token keys (the base DNA); values are the approved
   Phase 3 foundation in translation.md. Brand greens are sampled from the real
   logo artwork, not guessed. */

:root {
  /* ---- surfaces ---- */
  --page:          #FBFAF7;   /* warm, never cool white */
  --surface:       #F3F1EC;   /* one pale surface everywhere */
  --surface-2:     #E8E4DB;   /* borders inside cards */
  --surface-tint:  #EDF7E0;   /* wash tinted toward the accent */

  /* ---- ink ---- */
  --ink:           #1C1A16;   /* every heading */
  --ink-body:      #5B554B;   /* body copy, tinted toward the imagery */
  --ink-faint:     #B5AEA1;   /* inactive, disabled */
  --ink-inverse:   #FBFAF7;

  /* ---- night (the approved KEEP break) ---- */
  --night:         #14120E;
  --night-surface: #1F1B15;
  --ink-night:     #EDE9E0;

  /* ---- accent: one saturated colour means "do this" ---- */
  --accent:        #348008;   /* primary action, 4.8:1 with white */
  --accent-bright: #4BA30C;
  --accent-light:  #D2FA04;   /* the lime — 14.4:1 on ink, 1.2:1 on white.
                                 NEVER behind white text. */
  --accent-mid:    #86F802;   /* the mark's ribbon */
  --accent-deep:   #039302;   /* the mark's tail */
  --accent-glow:   #4BA30C80;

  /* ---- semantic: facts only, never decoration ---- */
  --danger:        #C4331B;
  --danger-wash:   #C4331B0D;
  --warning:       #C97A13;
  --success:       #348008;   /* reuse the brand green, add no hue */
  --scrim:         #1C1A161A;

  /* ---- type ---- */
  --font-display: "Instrument Sans", system-ui, -apple-system, sans-serif;
  --font-body:    "Instrument Sans", system-ui, -apple-system, sans-serif;

  /* ---- radii: montra's meaning per step, compressed to the brief's range ---- */
  --r-pill: 100px;    /* montra 100 — "press me" */
  --r-card: 1.25rem;  /* montra 20  — a held object */
  --r-tile: 0.875rem; /* montra 14  — a surface */
  --r-chip: 0.625rem; /* montra 10  — a label */

  /* ---- motion, from the DNAs ---- */
  --ease-out:  cubic-bezier(.16, 1, .3, 1);    /* verteal entrances */
  --ease-swap: cubic-bezier(.76, 0, .24, 1);   /* verteal button arrows */
  --ease-flip: cubic-bezier(.4, 0, .2, 1);     /* verteal page inversion */
}

/* The night field. Scoped, not a media query — §02 and §03 are dark by
   argument, not by user preference. */
[data-field="night"] {
  --page:       var(--night);
  --surface:    var(--night-surface);
  --surface-2:  #2A251D;
  --surface-tint: #23301A;
  --ink:        var(--ink-night);
  --ink-body:   #B9B2A5;
  --ink-faint:  #8E8677;   /* 5.3:1 on #14120E — #6A6458 measured 3.19 and failed */
  --scrim:      #EDE9E01A;

  /* Redefining the variables is not enough. `color` was already resolved on
     <body> and inherits down as a computed value, so the subtree keeps the day
     ink unless something consumes the new variable again — which is how §02's
     headings ended up near-black on near-black. */
  color: var(--ink);
  background-color: var(--page);
}
/* and anything that names an ink role explicitly has to re-resolve too */
[data-field="night"] .lede,
[data-field="night"] .eyebrow { color: var(--ink-body); }
[data-field="night"] h2, [data-field="night"] .h2,
[data-field="night"] h3, [data-field="night"] .h3,
[data-field="night"] h4, [data-field="night"] .h4 { color: var(--ink); }