/* Plenty — design tokens
   Palette sampled directly from the figure render, not chosen alongside it.
   Every neutral below is a real pixel value from that image, or a wash mixed
   from one. */

:root {
  /* ---- Colour ---------------------------------------------------------- */

  /* The three grounds. The page is the palest wash, panels are the render's
     own background, and the tint is the block that separates a section from
     the run of the page.

     `--paper` is unchanged and still the render's background exactly, which is
     what lets the figure sit on a panel with no seam where the image ends.
     What moved is the page: it is a wash now, so that a white panel on it is
     visible as a panel. Both washes are --taupe-100 over --paper and nothing
     else — there is no fourth hue in the system. */
  --ground:       #F7F4F0;  /* the page */
  --paper:        #FEFEFE;  /* panels, cards, the figure's own background */
  --tint:         #EFEAE3;  /* the warm block, and card headers */
  --paper-2:      #FAF8F5;  /* paper carrying a third of the tint. The one step
                               between the two, for a surface that has to read as
                               *nearly* paper — the tab rail, a row under a pointer.
                               Never for anything with an edge of its own. */
  --tint-deep:    #E7DFD4;  /* hover on a tinted thing, and the deeper header */

  /* The taupe ramp, light to dark, from the figure's own lighting. */
  --taupe-100:    #B8A694;  /* hat, lit surface */
  --taupe-200:    #968573;  /* coat — the base tone, most of the render */
  --taupe-300:    #5B4F3F;  /* face, mid shadow */
  --ink:          #1C170F;  /* brim underside and collar. Warm near-black.
                               All body text. Never use #000. */

  /* The only colour in the system. The eyes. */
  --signal:       #0017FE;

  /* Derived surfaces */
  --rule:         rgba(28, 23, 15, 0.10);
  --rule-strong:  rgba(28, 23, 15, 0.20);
  --wash:         rgba(150, 133, 115, 0.06);

  /* Shadow is a lift, not a drop. Two stops, both warm, both barely there —
     the card language needs cards to sit above the page, and 40% black under
     a warm palette reads as dirt. */
  --lift:      0 1px 2px rgba(28, 23, 15, .04), 0 8px 24px rgba(28, 23, 15, .05);
  --lift-high: 0 2px 4px rgba(28, 23, 15, .05), 0 18px 44px rgba(28, 23, 15, .09);

  /* ---- Type ------------------------------------------------------------ */
  /* Two faces, settled 6 September 2026. Gebuk is the logo's own typeface —
     the wordmark is the string "PLENTY.ai" set in it, nothing redrawn — so a
     Gebuk heading and the logo are the same object at different sizes.
     Faces are declared in assets/fonts/fonts.css. */

  --font-display: "Gebuk", "Futura", "Avenir Next", sans-serif;
  --font-text:    "Plus Jakarta Sans", -apple-system, system-ui, sans-serif;

  /* Numbers — deadlines, ceilings, days remaining — are the content of this
     product, so they are set to line up in a column. Plus Jakarta Sans ships
     tabular figures; apply with `font-variant-numeric: var(--figures-data)`. */
  --figures-data: tabular-nums;

  --size-88: 5.5rem;   --size-64: 4rem;    --size-44: 2.75rem;
  --size-32: 2rem;     --size-24: 1.5rem;  --size-20: 1.25rem;
  --size-18: 1.125rem; --size-16: 1rem;    --size-14: 0.875rem;
  --size-12: 0.75rem;

  /* The two display steps the page actually uses, as clamps, because every
     section heading is one of them. Ratios are the reference's: line-height
     1.1, tracking near -0.03em, which is as tight as Plus Jakarta's counters
     will take before they close. */
  --display-1: clamp(2.35rem, 4.9vw, 4.25rem);  /* hero, closing CTA */
  --display-2: clamp(1.95rem, 3.5vw, 3rem);     /* every section heading */

  --leading-tight: 1.05;   /* display only */
  --leading-snug:  1.3;
  --leading-body:  1.6;

  /* Gebuk is already wide and open. It does not want the negative tracking a
     grotesque display face wants — set at 0 and let the size do the work. */
  --track-display:  0;
  --track-body:     0;
  --track-caps:     0.08em;

  /* Gebuk has one weight and no italic. Without this, browsers invent both.
     Inherited, so declaring it once here covers the document. */
  font-synthesis: none;

  /* ---- Space ----------------------------------------------------------- */
  --s1: 4px;   --s2: 8px;   --s3: 12px;  --s4: 16px;  --s5: 24px;
  --s6: 32px;  --s7: 48px;  --s8: 64px;  --s9: 96px;  --s10: 128px;

  /* The gap between one section and the next, and the inset the whole shell
     stands in. One number each, so the page has one rhythm. */
  --section-gap: clamp(72px, 11vw, 148px);
  --shell-inset: clamp(8px, 0.9vw, 13px);

  /* ---- Measure & layout ------------------------------------------------ */
  --measure: 66ch;        /* body copy never exceeds this */
  --measure-tight: 46ch;  /* display headings */
  --page-max: 1120px;     /* the content column inside the shell */
  --gutter: clamp(20px, 3.4vw, 48px);

  /* ---- Form ------------------------------------------------------------ */
  /* The radius scale is the reference's, and it supersedes the single 2px
     --radius the earlier one-column page was built on. See design.md, "The
     card language" — this is a deliberate override, made once, in the open. */
  --r-xs:   8px;
  --r-sm:  12px;
  --r-md:  16px;
  --r-lg:  24px;
  --r-xl:  40px;
  --r-pill: 999px;

  --radius: var(--r-sm);  /* the default, for anything not naming a step */
  --border: 1px;

  /* ---- The wave field --------------------------------------------------- */
  /* What replaced the hero photograph on 7 September 2026. A rank of vertical
     hairlines across the frame, their heights a wave; the pointer thickens the
     ones nearest it. Every number below is read by hero.js at paint time, so
     a media query can reshape the field without touching the script.

     Pitch is the rank. Under about 9px it stops reading as separate lines and
     turns into a grey wash; over about 18px it reads as a chart. */
  --wave-pitch:  10px;
  --wave-weight: 1px;      /* at rest — one hairline, the same everywhere */

  /* One full swell. Fixed in pixels, not in screens: a narrow window shows
     less of the wave rather than the same wave compressed, which is what keeps
     a phone from turning it into a bar chart. */
  --wave-length: 1500px;

  /* Which part of the swell is on screen, in turns. Composition, not physics:
     the copy is heavy in the top left, so the crest is put under the empty
     right — the two together are the diagonal the page is balanced on. */
  --wave-phase: -0.15;

  /* Reach is how far from the cursor a line still gains weight. Wants to be
     roughly fifteen lines across: narrower reads as a cursor ornament, wider
     stops reading as a response to the pointer at all. */
  --wave-reach:      190px;
  --wave-weight-lit: 3.4px;

  /* Ink, as channels, because the canvas and rgb() both need it that way.
     Alpha does half the work of weight — a wider line that stayed this faint
     would read as blur rather than as pressure. */
  --wave-ink:       28 23 15;
  --wave-alpha:     0.34;
  --wave-alpha-lit: 0.88;

  /* The envelope, as a fraction of the hero's height. The field climbs from
     floor at the left edge to ceiling at the right, which is the shape of the
     page: the copy is heavy in the top left, so the rank is short underneath
     it and stands up into the empty right. */
  --wave-floor: 0.07;
  --wave-ceil:  0.74;

  /* How far the wave carries a line off the climb, as a share of that line's
     own height. Past about 0.4 the crests start crossing each other and the
     climb stops being legible; at 0 it is a ramp with no weather in it. */
  --wave-swell: 0.26;

  /* ---- Motion ---------------------------------------------------------- */
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --dur-fast: 120ms;
  --dur: 240ms;
  --dur-slow: 620ms;   /* entry only — the reveal on scroll */
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur: 0ms; --dur-slow: 0ms; }
}