/* ==========================================================================
   All You Can AI, tokens
   --------------------------------------------------------------------------
   Compiled 2026-08-11. Every value is read off the 6 client facing surfaces
   (index, quiz, gate, book, brief, booked). Nothing is invented; the 4
   additions are marked NEW and each says what it is replacing.

   WHY THIS FILE EXISTS. The palette is currently declared 6 times, once in
   each page's own <style> block. --cream, --coral, --ink, --muted and --rule
   each appear 6 times. Changing the coral is 6 edits in 6 files, and the only
   thing keeping them in agreement is that they were written in the same
   fortnight. Linking this from all 6 makes that number 1.

   HOW TO ADOPT, without touching how anything looks:
     1. Link this file first, above each page's own <style>.
     2. Delete the :root block from each page. Everything else stays.
     3. Nothing changes on screen. The values are identical.

   ASTRO: drop at src/styles/tokens.css and import once in the layout.

   It records; it decides nothing. If a page and this file disagree, the page
   is right and this needs updating.
   ========================================================================== */

:root {

  /* ----- Colour --------------------------------------------------------
     1 accent, 3 neutrals, 2 belt colours. No status palette, because
     nothing on a client facing surface reports status. The restraint is
     the point: Attio gets its calm from 19 greys and an accent that never
     fills a large area; this gets its calm from having almost nothing to
     choose from. */

  --cream:  #F2EDE3;   /* the ground, on every surface                    */
  --coral:  #E8785A;   /* the brand. 53 var() calls, the most used token  */
  --ink:    #33383F;   /* type, the burger                                */
  --muted:  #666B73;   /* secondary type. Was #6B7078 (4.27 to 1 on cream, under
                          AA); 4.6 on cream, 5.27 on paper (2026-08-30)         */
  --rule:   #DCD3C4;   /* hairlines and dividers. Separation lives here,
                          not in shadow                                    */
  --bar:    #343A42;   /* the conveyor bar. Belt only                     */
  --plate:  #E0D5C3;   /* plates and the poof cloud. Belt only            */

  /* NEW. Currently written as the raw hex #FFFDF6 on 4 of the 6 surfaces
     (quiz 2, brief 2, gate 1, book 1) with no name at all. A colour used 6
     times with no token is how a palette starts to drift. Naming it changes
     nothing on screen. */
  --paper:  #FFFDF6;   /* the warm white that sits above the cream        */

  /* NEW. The coral has 2 darker variants in the CSS as one off raw hex,
     #DC6748 and #9A3B2E, almost certainly a hover and a pressed state
     that were never named. Recorded so the accent has a defined ladder
     rather than 2 anonymous cousins. */
  --coral-hover: #DC6748;
  /* Coral as TYPE below headline size. Full coral is 2.84 to 1 on paper and
     2.48 on cream, so the hours figures, the sticky total and the "How:"
     label all failed AA (mobile plate run 2026-08-30, D5). This one is 4.42
     on cream, 5.06 on paper. Button fills keep --coral. */
  --coral-ink: #B44E32;
  --coral-press: #9A3B2E;

  /* NEW. The only green on any surface, currently one raw hex. */
  --green:  #3E7C4F;

  /* WARNING, and it is the one colour rule with teeth.
     TPDC's coral is #FF6B35. It is a DIFFERENT brand and the 2 must never
     be mixed. It currently appears once in the folder, in
     site/what-it-costs-brief.html, which is a source document rather than
     a page, so no visitor sees it. Do not copy a block out of that file. */


  /* ----- Type ----------------------------------------------------------
     Figtree is self hosted on purpose: same render everywhere, no Google
     CDN, no GDPR wrinkle. Si picked it from a 6 block contact sheet on
     5 August, replacing Avenir Next, which only exists on Apple devices. */

  --display: "Figtree","Avenir Next",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --body:    -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,sans-serif;
  --mono:    ui-monospace,SFMono-Regular,Menlo,monospace;

  /* NOTE, drift rather than design: --fig is a second token pointing at the
     same Figtree stack, used 20 times against --display's 12. One face,
     2 names, no rule about which to reach for. Kept here so nothing breaks
     while they are collapsed; --fig should eventually go. */
  --fig: var(--display);

  /* Display ladder, measured off the rendered pages. 3 steps, and the
     funnel agrees with itself on all 4 of its pages. The homepage shouts,
     the lead tool speaks, the funnel talks. */
  --h1-home:   clamp(30px, 4.6vw, 64px);
  --h1-quiz:   clamp(26px, 3.4vw, 48px);
  --h1-funnel: clamp(24px, 3.0vw, 44px);

  /* Weights actually in use. 4 of them, which is 2 more than Attio ships
     across its whole product and 1 fewer than Paper puts on one page. */
  --w-light:    300;
  --w-regular:  400;   /* body default                                    */
  --w-display:  600;   /* headlines, price, menu                          */
  --w-mark:     800;   /* the wordmark only                               */

  /* Tracking. Tightens as size grows, opens up for small caps. Optical
     correction rather than taste, and it is done right. */
  --track-h1:    -.032em;
  --track-price: -.030em;
  --track-menu:  -.025em;
  --track-mark:   .160em;


  /* ----- Space ---------------------------------------------------------
     NEW, and the only genuinely new thinking in this file.

     There is no scale today: 181 spacing values across 40 distinct steps,
     including 3, 5, 7, 9, 11, 13, 15, 18, 22, 34, 42, 52, 110, 142 and
     170px. No single value carries more than 8.8%. Paper's 8, 16 and 24
     carry 48.8% between them; Attio's 4px carries 24.1% on its own.

     The ladder below is built from the values ALREADY most used (8, 12,
     14, 16, 20, 26, 30) rounded to a 4px grid, so adopting it moves
     almost nothing. Convert as files are touched, not in one sweep. */

  --sp-1:   4px;
  --sp-2:   8px;    /* most used value today, 8.8%                        */
  --sp-3:  12px;    /* second most used, 8.3%                             */
  --sp-4:  16px;
  --sp-5:  20px;    /* fourth most used, 7.2%                             */
  --sp-6:  24px;
  --sp-7:  32px;
  --sp-8:  40px;
  --sp-9:  56px;
  --sp-10: 72px;
  --sp-11: 96px;


  /* ----- Radius --------------------------------------------------------
     Pills and circles, and almost nothing in between. A coherent position
     for a brand about plates and belts. */
  --r-pill:   999px;   /* 9 uses. The CTA and every button                */
  --r-circle: 50%;     /* 7 uses. Dots, the poof ring                     */
  --r-panel:  12px;    /* 3 uses                                          */


  /* ----- Elevation -----------------------------------------------------
     There is exactly ONE box-shadow on the whole site. Everything else is
     separated by a hairline and by ground colour. That is a real position
     and it should stay deliberate rather than drift into an oversight. */
  --shadow: 0 10px 30px rgba(51, 56, 63, .14);

  /* NEW, for if elevation is ever wanted. On a matte cream ground a black
     shadow goes muddy. A warm shadow with a negative spread larger than
     the offset reads as a softening underneath and never a grey edge
     around. From the 11 August polish pass. */
  --shadow-warm:  0 10px 30px -18px rgba(94, 74, 58, .28);
  --shadow-coral: 0 10px 40px -18px rgba(232, 120, 90, .45);


  /* ----- Motion --------------------------------------------------------
     Durations in use run .15s to .35s. `ease` appears 10 times, which is
     the browser default and means most transitions were never given a
     curve. The 5 `linear` are the belt and the wordmark ticker, and those
     are correct: a conveyor that eases looks broken. */
  --dur-fast:  .15s;
  --dur-base:  .22s;   /* most used                                       */
  --dur-slow:  .34s;
  --ease:      cubic-bezier(.4, 0, .2, 1);
  --ease-out:  cubic-bezier(.2, .7, .3, 1);

  /* NEW. There is no :active rule anywhere on the site, and .cta already
     declares a transform transition that nothing ever fires. Attio's most
     used variant across its entire product is active:, and its rule is
     that press answers 3 times faster than hover settles. */
  --dur-press:  50ms;
  --press-scale: .97;

  /* The belt. Tuning constants live in the page, not here, but the rules
     are absolute and are recorded in brand-belt/README.md:
       - the strip is rendered TWICE and translated by exactly one set
         length, so the loop seam is mathematically identical
       - every shape is a FLAT FILL. A gradient reintroduces the seam
       - raise DUR when dishes are added so travel speed never changes
       - WAAPI scale/rotate on SVG needs transform-box:fill-box and
         transform-origin:center, or it animates about the viewBox corner */
  --belt-dur: 116s;


  /* ----- Layering ------------------------------------------------------
     Values in use are 0, 2, 5, 6. Small, readable, nothing to fix. */
  --z-base:    0;
  --z-raised:  2;
  --z-belt:    5;
  --z-top:     6;


  /* ----- Breakpoints ---------------------------------------------------
     NEW as tokens. Today there are 3 different widths across 4 media
     queries (720, 820, 900) with no stated reason for any of them.
     These 2 are proposed, not ruled. Note also that brand-belt/README.md
     records the belt as UNTESTED ON MOBILE, and that 24 items on a phone
     will need the belt scaling down or the labels dropping. */
  --bp-mobile: 720px;
  --bp-tablet: 900px;
}


/* ==========================================================================
   The 4 line fixes, all optional, none of them changes a layout.
   ========================================================================== */

/* Press. The CTA already has the transition; it has never had a trigger. */
.cta:active { transform: scale(var(--press-scale)); transition-duration: var(--dur-press); }

/* Selection. Highlight anything today and you get browser default blue,
   the one colour that is not in the palette. */
::selection      { background: var(--coral); color: #fff; }
::-moz-selection { background: var(--coral); color: #fff; }

/* Reduced motion is already honoured on all 6 surfaces, which is more than
   Paper manages. This only tidies the 2 spellings into 1. */
@media (prefers-reduced-motion: reduce) {
  .cta:active { transform: none; transition-duration: 0s; }
}