/* ============================================================================
   AI ASSIST BG  ·  DESIGN TOKENS
   The single source of truth. Every other stylesheet references these and
   declares no raw colour, font or duration of its own.

   Extracted from the POWR 360 calculator and the EXEO Capital pack, then
   systematised: the original files carried the same values as ad-hoc literals.
   Nothing here changes how the existing work looks.
   ============================================================================ */

:root{

  /* ---------------------------------------------------------------- colour
     Four families and nothing else. Jet is structure, gold is emphasis,
     neutrals are surface, and the three signal colours are used sparingly
     and only to mean something. */

  /* Jet, dark surfaces. Covers, section dividers, dark cards. */
  --jet:       #0A0A0A;   /* full-bleed dark surfaces */
  --jet-2:     #141414;   /* raised dark card on a dark surface */
  --jet-3:     #1c1c20;   /* overlays and drawers */

  /* Gold, the only accent. Never decorative; it marks what to read next. */
  --gold:      #B8956A;   /* accent on dark, rules, markers, eyebrows */
  --gold-soft: #D4B896;   /* accent text on dark, where gold is too heavy */
  --gold-deep: #8a6c4a;   /* accent on light, where gold fails contrast */
  --mark:      #F5E6CC;   /* tracked-change highlight, review copies of a document only */

  /* Neutrals, light surfaces. */
  --cream:     #FAFAFA;   /* page background */
  --linen:     #F2F2F0;   /* tinted panel, note background, inset column */
  --card:      #FFFFFF;   /* raised card on a light surface */
  --line:      #E5E5E5;   /* every hairline in the system */

  /* Ink, text on light surfaces. */
  --ink:       #141414;   /* primary text */
  --sub:       #5C5C5C;   /* secondary text, lead paragraphs, table body */
  --faint:     #B9B5AD;   /* labels, captions, disabled, source lines */

  /* Warm cream, text on dark surfaces. NOT the same as --cream.
     Deliberately warmer so it sits with gold instead of fighting it. */
  --on-dark:      #F3ECE0;
  --on-dark-90:   rgba(243,236,224,.90);  /* headings on dark */
  --on-dark-85:   rgba(243,236,224,.85);  /* body on dark */
  --on-dark-75:   rgba(243,236,224,.75);  /* lead on dark */
  --on-dark-60:   rgba(243,236,224,.60);  /* secondary on dark */
  --on-dark-40:   rgba(243,236,224,.40);  /* labels on dark */
  --on-dark-line: rgba(243,236,224,.14);  /* hairline on dark */
  --on-dark-fill: rgba(243,236,224,.06);  /* note background on dark */

  /* Signal, used only where the meaning is real. Never for decoration. */
  --good: #5B8A6E;   /* in scope, passed, on track */
  --warn: #C08A3E;   /* conditional, at risk, needs a decision */
  --bad:  #B5503F;   /* out of scope, failed, the failure mode */

  /* ------------------------------------------------------------ typography
     Two faces. Inter Tight sets anything large or structural; Inter sets
     anything you actually read. Mixing more than two is how a deck starts
     looking like a template. */
  --f-display:'Inter Tight',-apple-system,system-ui,sans-serif;
  --f-body:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;

  /* Screen type scale (16:9 decks). clamp() so a 1280px screen-share and a
     2560px display both read correctly without a media query. */
  --t-cover:   clamp(44px,5.6vw,74px);   /* cover title, weight 200 */
  --t-section: clamp(46px,7vw,84px);     /* section divider, weight 200 */
  --t-claim:   clamp(30px,3.8vw,50px);   /* full-slide statement, weight 200 */
  --t-xl:      clamp(40px,5.2vw,58px);   /* h1.title-xl, weight 300 */
  --t-lg:      clamp(30px,4vw,44px);     /* h1.title-lg, weight 300 */
  --t-md:      clamp(22px,2.7vw,30px);   /* h2.title-md, weight 400 */
  --t-lead:    clamp(16px,1.6vw,20px);   /* lead paragraph */
  --t-body:    clamp(15px,1.3vw,17px);   /* body */
  --t-stat:    clamp(48px,6.4vw,86px);   /* the big number, weight 200 */

  /* Letter-spacing. Large display type needs negative tracking or it reads
     loose; small uppercase labels need positive tracking or it reads cramped. */
  --ls-cover:   -2.6px;
  --ls-section: -2.8px;
  --ls-xl:      -1.6px;
  --ls-lg:      -1.2px;
  --ls-md:      -.6px;
  --ls-lead:    -.2px;
  --ls-label:   1.6px;   /* uppercase labels */
  --ls-eyebrow: 2px;     /* uppercase eyebrows */
  --ls-tag:     1px;     /* uppercase pills */

  /* ---------------------------------------------------------------- radius
     Four steps. Small for pills and chips, medium for cards, large for the
     hero cards that need to feel soft. */
  --r-sm:  8px;
  --r-md:  14px;
  --r-lg:  18px;
  --r-xl:  20px;
  --r-pill:999px;

  /* --------------------------------------------------------------- spacing
     A 4px base. Use the scale rather than inventing a number; it is what
     keeps unrelated slides feeling like one document. */
  --s-1:  4px;   --s-2:  8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 20px;   --s-6: 24px;   --s-7: 32px;  --s-8: 40px;
  --s-9: 56px;   --s-10:70px;   --s-11:80px;

  /* ---------------------------------------------------------------- motion
     One easing curve for everything. Two durations. Anything longer than
     500ms reads as a website rather than a document. */
  --ease:       cubic-bezier(.16,1,.3,1);
  --motion-fast:250ms cubic-bezier(.16,1,.3,1);
  --motion-mid: 500ms cubic-bezier(.16,1,.3,1);

  /* ------------------------------------------------------------- elevation
     Shadows appear on exactly two things: the brand mark on a dark cover,
     and a card lifting on hover. Everything else uses a hairline. */
  --shadow-mark:0 12px 36px rgba(0,0,0,.32),0 0 0 1px rgba(243,236,224,.06);
  --glow-gold:  0 0 18px rgba(184,149,106,.6);

  /* ------------------------------------------------------------------ page
     Print geometry. 13.333in x 7.5in is 16:9 at 96dpi, which is what a
     deck must be so it fills a screen-share with no letterboxing. */
  --page-deck-w:13.333in;
  --page-deck-h:7.5in;
  --page-doc-w: 210mm;
  --page-doc-h: 297mm;
  /* Content box height is set 1mm under the sheet. See PRINT-ENGINEERING.md:
     a box exactly the height of the sheet rounds past it in Chrome's print
     rasteriser and pushes the footer onto a second page. */
  --page-doc-safe:296mm;
}

/* ----------------------------------------------------------------------------
   THE DARK WASH
   Every dark surface carries this on a ::before pseudo-element. Two off-centre
   radial gradients at very low opacity, so a black slide has depth without
   announcing itself as a gradient. Copy it verbatim onto any new dark surface:

     background:
       radial-gradient(circle at 25% 30%,rgba(184,149,106,.10),transparent 50%),
       radial-gradient(circle at 80% 70%,rgba(212,184,150,.06),transparent 55%);

   A section divider uses a single centred wash instead, at .14:

     background:
       radial-gradient(circle at 50% 50%,rgba(184,149,106,.14),transparent 60%);

   The live declarations are on .slide.dark::before in deck.css and on
   .page.dark::before in document.css.
   ---------------------------------------------------------------------------- */