/* ============================================================================
   base.css  ::  Bespoke Creatives
   Rules that were byte-identical on all six pages.
   Loaded BEFORE the page stylesheet, so a page can still override anything here.
   ============================================================================ */

/* ----------------------------------------------------------------------------
   THE BRAND TOKEN LAYER  (light/warm rebrand, 2026-07-29)

   This block is the single re-skin entry point for the whole site. Change a
   colour HERE, never inside a component rule.

   Why it lives in base.css and not kokonut.css: the plan named kokonut.css as
   the entry point, but that is not true of this codebase. kokonut.css is only
   loaded by index.html and consult.html, and it owns a separate --k-* namespace.
   calculator, demo, confirmed and privacy never load it at all. base.css is the
   only stylesheet every page loads, and it loads first, so it is the real single
   point of control. Each page stylesheet now aliases its legacy token names onto
   the canonical tokens below instead of hardcoding hexes.

   HARD RULE: only two things may ever sit behind content, off white or black.
   Beige and teal are barred from surface duty. Cards lift by getting LIGHTER,
   never darker. This inverts the old black theme, where a card lifted by going
   teal.

   Ink over teal: Bahush ruled on 2026-07-29 that --teal is used a lot LESS than
   the plan's table implied, and --ink a lot more. So ink carries the buttons,
   rules and icons the plan had assigned to teal, and teal is demoted to a
   sparing secondary accent. Do not promote teal back to surface or button duty.

   Provenance: --ink and --teal were read by eye off screenshots, not sampled.
   Everything else derives from them. If exact values ever arrive, changing the
   two lines below re-skins the entire site.
   ---------------------------------------------------------------------------- */
:root {
  /* Surfaces. Off white, or black. Nothing else. */
  --paper:      #FBF7EF;   /* the page */
  --paper-sunk: #F5F1E7;   /* recessed bands. Pulled toward white, never toward beige */
  --card:       #FFFDF9;   /* cards lift by getting lighter */
  --black:      #0C0C0E;   /* the one dark surface. Emphasis blocks only, cream text on top */

  /* Ink ramp. Measured against --paper: 17.0:1, 6.8:1, 4.6:1. All pass WCAG AA. */
  --ink:   #0A171D;        /* headings, primary text, buttons, rules, icons */
  --ink-2: #3A5C5F;        /* body text */
  --ink-3: #587678;        /* captions, labels, meta */

  /* Teal. Secondary accent only. Never a surface, never the default button. */
  --teal:     #1B373A;
  --teal-mid: #2E5A5E;     /* links, hover */

  /* Cream. Text and accents ON BLACK only. Never a background. */
  --cream: #DACAA4;

  /* Pop. Persimmon. --pop is 3.2:1 on paper, so it is LARGE MARKS ONLY and fails
     AA for body-size text. --pop-deep is 4.9:1 and is the one to use wherever
     small text needs the pop. */
  --pop:      #E2633C;
  --pop-deep: #B84A28;
  --pop-soft: #F9DCCF;     /* highlighter fills, badge grounds */

  /* Semantic state, NOT a brand colour. The locked palette has no positive/success
     value, but two components need one: the confirmed-page status dot and the bento
     tick icons. They were hardcoded #4ade80, a bright green that washes out on off
     white. This is 4.6:1 on --paper, so it passes AA. Flagged for Bahush: he may want
     ticks in plain --ink instead, which would retire this token entirely. */
  --positive: #3F7D5A;

  /* Surface gradients (Bahush, 2026-07-29). A flat --card panel on a --paper page
     draws a hard step where the two meet, which reads as a seam rather than depth.
     These melt one into the other instead: they START at --card and END exactly on
     --paper, so the bottom edge of any panel dissolves into the page and only the
     top stays lifted. Use these anywhere a raised surface would otherwise butt
     straight up against the page.
     RADIAL, not linear (corrected 2026-07-29, second pass). The first attempt used a
     linear gradient, which only reached --paper at the BOTTOM. The top edge and both
     sides were still #FFFDF9 butted against #FBF7EF, so the panel still drew a clear
     rounded outline. Bahush flagged the same seam twice. A radial fill reaches --paper
     at EVERY edge, so there is no colour step anywhere on the perimeter and the shape
     dissolves instead of being outlined. The hard 1px borders come off the panels for
     the same reason: a border draws the exact line the gradient exists to remove.
     Depth now comes from --panel-lift, a shadow, which has no edge.
     ORIGIN MUST SIT INSIDE THE PANEL, not on an edge (third pass). Putting it at
     50% 0% or 50% 8% parks the gradient's BRIGHTEST point on the top edge, so that
     edge still steps against the page even with the border gone. That was the faint
     rounded outline still visible after pass two. Centring the origin puts every
     edge far from the bright point, so all four sides land on --paper and the last
     8% is pinned flat to --paper so the perimeter cannot drift.
     TRANSLUCENT, ending at fully transparent (fourth pass). Once the dot field became
     a page-wide canvas sitting behind everything, an OPAQUE panel fill punched a
     dot-free rectangle out of it, which is the same visible edge again, just inverted.
     So every panel is now a translucent bloom that fades to nothing: the one dot field
     shows through every panel uniformly, and the only thing that varies is how much
     light sits on top. Nothing has a perimeter. */
  --grad-card: radial-gradient(115% 130% at 50% 40%, rgba(255,253,249,.95) 0%, rgba(255,253,249,.62) 38%, rgba(255,253,249,.20) 72%, rgba(255,253,249,0) 100%);
  --grad-sunk: radial-gradient(120% 140% at 50% 50%, rgba(10,23,29,.050) 0%, rgba(10,23,29,.026) 58%, rgba(10,23,29,0) 100%);
  --grad-hero: radial-gradient(115% 125% at 50% 42%, rgba(255,253,249,.90) 0%, rgba(255,253,249,.52) 32%, rgba(255,253,249,.18) 64%, rgba(255,253,249,0) 92%, rgba(255,253,249,0) 100%);
  /* For panels that were a flat translucent ink tint (--fill-faint) with a border.
     Ends fully TRANSPARENT, so it melts into whatever sits behind it. */
  --grad-note: radial-gradient(115% 150% at 50% 50%, rgba(10,23,29,.055) 0%, rgba(10,23,29,.028) 55%, rgba(10,23,29,0) 100%);
  /* Edgeless depth. Replaces the 1px panel borders. */
  --panel-lift: 0 1px 2px rgba(10,23,29,.03), 0 10px 30px rgba(10,23,29,.045);

  /* Rules and faint fills, derived from ink rather than a grey. */
  --rule:       rgba(10,23,29,.14);
  --rule-soft:  rgba(10,23,29,.08);
  --fill-faint: rgba(10,23,29,.04);

  /* Type. Cabinet Grotesk has NO weight 600 (Fontshare ships 400/500/700/800,
     verified live 2026-07-29). Asking for 600 makes the browser synthesise it.
     Use 500 for letterspaced labels and eyebrows, 700 for buttons. */
  --f-display:   'Cormorant Garamond', Georgia, serif;
  --f-editorial: 'Bodoni Moda', Georgia, serif;
  --f-body:      'Cabinet Grotesk', system-ui, -apple-system, sans-serif;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

/* THE REAL LOGO IS BACK (Bahush, 2026-07-29). Bucket C had replaced it with a
   Cormorant wordmark because that is what the signed-off direction page shows.
   Bahush overruled that: he wants his actual mark, on every page. This supersedes
   the direction page on this one point only.

   images/logo.png is a LIGHT cream mark drawn for the old dark teal site, so on the
   warm off white base it is very nearly invisible. brightness(0) maps every colour
   to black while preserving the alpha channel, needs no markup change and no second
   asset to keep in sync, and at this size is visually indistinguishable from --ink
   (both land near 17:1 on --paper). One attribute selector catches every instance
   on every page. The PNG itself is untouched, so the printed cards already in
   owners' hands stay valid. */
img[src$="logo.png"] { filter: brightness(0); }