/* ─────────────────────────────────────────────────────────────
   ORIGAMI — BRAND TOKENS
   GENERATED FILE. Do not edit by hand; your change will be
   overwritten. Edit styles.css and re-run:

       node brand/build-tokens.mjs

   Plain CSS: no Tailwind, no build step, no framework. Link it
   from anything — a report, a prototype, another app — and that
   surface is on the brand by construction.

   Fonts are NOT bound here. Pair with brand/fonts.css for a
   standalone page; inside the Next app next/font already supplies
   the --face-* variables and this file defers to them.

   See brand/BRAND.md for what these mean and when to use them.
   ───────────────────────────────────────────────────────────── */

:root {
  /* ==== from styles.css @theme static ==== */

  /* ---- surfaces --------------------------------------------------
     THE SHEET. These are the press sheet's own values (see the brand
     artifact, Job 000): the paper is the riso shader's paper, so the page
     and the print can never disagree, and the ink is warm — cocoa-black,
     never blue-black. The cool near-black the site used to carry survives
     only inside the why-panel's night sky, as --color-night-ink below.
     The 2026-08-19 redesign made this swap deliberately: the earlier
     neutral #FAFAF8 base read as any tech site's white. */
  /* The supplied brand scale, sampled from the palette artwork. Keeping
     the named swatches as first-class tokens means a component can ask for
     the actual colour instead of reverse-engineering it from a surface. */
  /* The lightest sheet in the scale, added for /about: the new pages set
     their content on this and reserve the deeper steps for bands. */
  --color-off-white-40: #fcf9f5;
  /* A step of tan, not of off-white — cooler and greyer than the paper
     scale, which is the point: it has to read as a rule drawn on the sheet,
     not as another paper tone sitting next to it. */
  --color-tan-60: #dfd4cb;
  --color-off-white-90: #F6EFE7;
  --color-off-white-80: #F8F1EB;
  --color-off-white-70: #f8f1ed;
  --color-off-white-60: #faf3f0;
  --color-brown: #59534E;
  --color-brown-90: #6A645F;
  --color-brown-80: #7B7570;
  --color-brown-70: #8B8882;

  /* ---- THE FULL BRAND SCALE ------------------------------------
     Sampled from the palette artwork (Downloads/Origami (1).png),
     nine families at seven tints. Everything above this block was
     sampled from the same artwork earlier but only ever covered the
     part the site needed; these are the steps that were never lifted,
     plus the three families — orange, pink and olive — that had no
     token at all.

     ADDITIVE ONLY. Where a token already existed it is NOT redeclared
     here, even where the artwork disagrees with it by a unit or two,
     because redeclaring would change what the site renders. The six
     that disagree are listed in brand/BRAND.md under "Drift against
     the artwork" and are Nikos's call, not a silent fix.

     These are the palette, not the page. Adding a token does not make
     it usable anywhere — the site's restraint (warm sheet, two-ink
     press, vermilion that never fills) is a rule about which of these
     get used, and it still holds. Orange and pink in particular have
     no home on the sheet yet.
     ---------------------------------------------------------------- */
  /* off white — primary */
  --color-off-white: #F6EDE5;
  --color-off-white-50: #FAF7F1;
  --color-off-white-30: #FCFAF6;
  /* orange — primary */
  --color-orange: #FFB584;
  --color-orange-90: #FFBD92;
  --color-orange-80: #FFC59C;
  --color-orange-70: #FFCCA9;
  --color-orange-60: #FED3B5;
  --color-orange-50: #FFDBC1;
  --color-orange-40: #FEE2CC;
  --color-orange-30: #FFE9DA;
  /* navy — primary */
  --color-navy-90: #39415D;
  --color-navy-80: #4E5672;
  --color-navy-70: #646982;
  --color-navy-60: #7B8194;
  --color-navy-50: #9395A7;
  --color-navy-40: #A8ABB8;
  --color-navy-30: #BDC0C9;
  /* light blue */
  --color-light-blue: #A1B7EC;
  --color-light-blue-90: #ADBEEE;
  --color-light-blue-80: #B7C5F0;
  --color-light-blue-70: #BFCDF2;
  --color-light-blue-60: #C7D5F4;
  --color-light-blue-50: #D2DBF7;
  --color-light-blue-40: #DAE2F6;
  --color-light-blue-30: #E3E9FA;
  /* pink */
  --color-pink: #FFA3A4;
  --color-pink-90: #FFAEAC;
  --color-pink-80: #FFB7B7;
  --color-pink-70: #FFBFC0;
  --color-pink-60: #FFC8C9;
  --color-pink-50: #FFD2D3;
  --color-pink-40: #FFDBDC;
  --color-pink-30: #FFE3E5;
  /* teal */
  --color-teal: #12AAB1;
  --color-teal-90: #2CB3B8;
  --color-teal-80: #42BCC0;
  --color-teal-70: #5AC4C8;
  --color-teal-60: #70CCCF;
  --color-teal-50: #89D5D8;
  --color-teal-40: #A1DCE1;
  --color-teal-30: #B9E6EA;
  /* olive */
  --color-olive: #425654;
  --color-olive-90: #556765;
  --color-olive-80: #677874;
  --color-olive-70: #7C8A87;
  --color-olive-60: #8E9A97;
  --color-olive-50: #A1ABAB;
  --color-olive-40: #B4BCBC;
  --color-olive-30: #C6CCCD;
  /* tan */
  --color-tan: #C4B8A6;
  --color-tan-90: #CABDAE;
  --color-tan-80: #CFC6B6;
  --color-tan-70: #D6CBC0;
  --color-tan-50: #E3DCD2;
  --color-tan-40: #E6E3DA;
  --color-tan-30: #EDEAE4;
  /* brown */
  --color-brown-60: #9C9895;
  --color-brown-50: #ADA9A8;
  --color-brown-40: #BEBAB9;
  --color-brown-30: #CECCCA;

  /* Off White 70 is the page sheet; 80 and 90 provide the two deeper
     paper steps. Brown is the key plate for every primary text surface. */
  --color-paper: var(--color-off-white-70);
  --color-paper-warm: var(--color-off-white-80);
  --color-paper-deep: var(--color-off-white-90);
  --color-ink: var(--color-brown);
  --color-ink-2: var(--color-brown-90);
  --color-on-ink: var(--color-off-white-70);
  /* the pre-redesign cool black, kept for the night panel's internals */
  --color-night-ink: #15161B;

  /* the dark bands the new sections sit on — cool, so they read as
     night sky rather than as printer's black */
  --color-navy: #212E4A;      /* the hero CTA's own navy */
  --color-navy-deep: #16203A;
  --color-slate: #59534E;     /* body copy uses the same brown key plate */

  /* ---- the sky ---------------------------------------------------
     Sampled straight out of cloud-sky.js, so the page below the hero
     is coloured by the same light that is moving above it. */
  --color-sky-lilac: #F2DFFA;
  --color-sky-haze: #C7DCE6;
  --color-sky-sand: #F6D9B6;
  --color-sky-rose: #DE8D8D;
  --color-sky-deep: #244D68;
  --color-sky-peri: #CCCFF7;

  /* ================================================================
     THE MATERIAL — one substance, many forms

     Not a gradient asset. A set of hues and a set of compositions
     over them, so the same material can be cut different ways in
     different places and still be recognisably the same material.
     Nothing on the page uses the whole range at once; each surface
     takes one ramp, which is what keeps it from reading as rainbow.

     The compositions themselves are gradients, not colours, so they
     live in the :root block below rather than here.
     ================================================================ */
  --color-iris-mineral: #A2C8B2;
  --color-iris-blue:    #9FC0EA;
  --color-iris-lilac:   #C3B0EE;
  --color-iris-peach:   #F6CDB4;
  --color-iris-coral:   #F2A084;
  --color-iris-saffron: #F0C266;
  --color-iris-plum:    #6B4E8F;
  --color-iris-deep:    #2C3A5C;

  /* The same material cut as a value scale, light to dark, travelling
     warm to cool. Ordered dithering indexes by luminance, and the iris
     hues above are all pastels sitting within a few points of each
     other — a ramp built from them collapses into its lightest two or
     three inks. These are the same colours pushed to distinct values so
     a dither can actually separate them, which is why the crane reads
     as lit rather than as a warm smear. */
  /* Re-inked 2026-08-19 for the press system: cornflower into plum into
     night, the same journey the why-section sky makes. The old warm half
     (peach/saffron/coral) was the last surface fighting the two-ink
     discipline — it showed up most on the CTA panel's ascii crane, which
     reads these tokens off the stylesheet at mount. */
  --color-dither-1: #F2EEE2;
  --color-dither-2: #C3D2F5;
  --color-dither-3: #8DADF1;
  --color-dither-4: #8B72B8;
  --color-dither-5: #6B4E8F;
  --color-dither-6: #3A3060;
  --color-dither-7: #16203A;

  --color-red: #E5401F;
  --color-cocoa: #59534E;

  /* ---- the ink drawer --------------------------------------------
     The four printing inks, named the way a riso drawer names them.
     Aliases over existing hues where they already existed — one value,
     two vocabularies, zero drift. Vermilion ticks and stamps; it never
     fills a field. */
  --ink-cornflower: #8DADF1;
  --ink-plum: #6B4E8F;
  --ink-vermilion: #E5401F;
  --ink-sunflower: #F0C266;
  /* the palette's Secondary teal — the drawer's fifth chip, used only in
     the mark's offcuts so far */
  --ink-teal: #1FA8A0;

  /* Brown 90 remains AA-readable at caption sizes on Off White 70. The
     lighter Brown 70 is reserved for large secondary copy below. */
  --color-muted: var(--color-brown-90);
  --color-muted-ink: var(--color-brown-90);
  --color-muted-cool: rgba(248, 242, 237, 0.58);

  /* ---- rules -----------------------------------------------------
     The rule width itself is a length, not a colour, and sits in
     :root below. These are the inks it is drawn in. */
  --color-line: rgba(89, 83, 78, 0.18);
  --color-line-soft: rgba(89, 83, 78, 0.09);
  --color-section-line: rgba(89, 83, 78, 0.10);
  --color-line-ink: rgba(248, 242, 237, 0.16);
  --color-line-ink-soft: rgba(248, 242, 237, 0.08);

  /* The faces come from next/font/local, which hashes the family names;
     --face-* are the variables it generates. */
  --font-serif: var(--face-newsreader, 'Newsreader'), 'Iowan Old Style', Georgia, serif;
  --font-grot: var(--face-archivo, 'Archivo'), system-ui, -apple-system, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, monospace;
  --font-geist: var(--face-geist, 'Geist'), system-ui, -apple-system, sans-serif;
  --font-pixel: var(--face-pixelify, 'Pixelify Sans'), ui-monospace, monospace;

  /* ---- type scale ------------------------------------------------
     Optical tracking: positive on small sizes so captions stay open,
     negative on display so headlines close up. */
  --text-eyebrow: 0.8125rem;
  --text-caption: 0.75rem;
  --text-body-sm: 0.9375rem;
  --text-body: 1.0625rem;
  --text-body-lg: clamp(1rem, 0.95rem + 0.35vw, 1.3125rem);
  --text-lede: clamp(1.1rem, 0.95rem + 0.9vw, 1.75rem);
  /* Fluid, not stepped: each size interpolates from a rem base plus a
     vw term, so it grows continuously between the floor and the cap.
     A bare `clamp(3rem, 6.6vw, …)` looks fluid but is not — below
     ~727px the vw term falls under the floor and every headline
     silently snaps to 48px, which is how display type ends up running
     off the side of a phone. The rem term is what carries small
     screens; the vw term is what carries large ones. */
  --text-h5: clamp(1.05rem, 0.9rem + 0.7vw, 1.35rem);
  --text-h4: clamp(1.25rem, 0.85rem + 1.7vw, 2rem);
  --text-h3: clamp(1.5rem, 0.9rem + 2.3vw, 2.9rem);
  --text-h2: clamp(1.75rem, 0.9rem + 3.6vw, 4.4rem);
  --text-h1: clamp(2rem, 1rem + 4.8vw, 6.2rem);
  --text-display: clamp(2.6rem, 1rem + 8vw, 10.5rem);

  /* The hero's final state clips to inset(28px 36px 0 round 28px);
     --radius-card is the corner of that clip, so every section edge below
     lands on the hero card's edge and the page reads as one sheet the hero
     was cut from. Its partner --inset is a length and sits in :root. */
  --radius-card: 28px;

  /* Exits undercut entrances: leaving should never take as long as
     arriving. The durations that pair with these are in :root. */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-inout: cubic-bezier(0.77, 0, 0.175, 1);
  /* the stamp: a mild overshoot for things a press would stamp */
  --ease-snap: cubic-bezier(0.34, 1.2, 0.64, 1);

  /* ==== from styles.css :root ==== */

  /* Compositions of the material above. Each emphasises a different part
     of the range, so two surfaces carrying "the material" never look like
     copies. Gradients, not colours — so they stay out of @theme. */
  --ramp-dawn:  linear-gradient(104deg, var(--color-iris-peach) 0%, var(--color-iris-coral) 46%, var(--color-iris-saffron) 100%);
  --ramp-dusk:  linear-gradient(104deg, var(--color-iris-blue) 0%, var(--color-iris-lilac) 52%, var(--color-iris-plum) 100%);
  --ramp-field: linear-gradient(104deg, var(--color-iris-mineral) 0%, var(--color-iris-blue) 50%, var(--color-iris-lilac) 100%);
  --ramp-full:  linear-gradient(104deg,
                  var(--color-iris-mineral) 0%, var(--color-iris-blue) 20%, var(--color-iris-lilac) 40%,
                  var(--color-iris-peach) 62%, var(--color-iris-coral) 82%, var(--color-iris-saffron) 100%);
  /* The same travel at ink weight. The pastel ramps are built for large
     fields and for dark grounds; against near-white at headline size
     they read as faded rather than as coloured, and a knock-out screen
     over them takes what little weight they had. This is what type on
     the page uses. */
  /* Two inks, not five: the press system runs cornflower into plum, with a
     deep-plum tail so the dither has a dark value to bite into. The old
     five-hue ramp (green->blue->violet->rust->ochre) read as rainbow on the
     warm sheet. */
  --ramp-ink:   linear-gradient(104deg,
                  #6B8FD8 0%, #7A63B8 46%, #6B4E8F 74%, #4A3568 100%);

  /* Advanced by scroll — main.js writes this onto <html>. Every surface
     carrying the material reads it, so the material is never quite the
     same twice on one visit — which is the argument the studio's name is
     making. Runtime state, so it is not a theme token. */
  --iris-shift: 0deg;

  /* 0.5px: a scored crease rather than a drawn border. Used for the
     structural edges the site already had — NOT as a general divider.
     Dividing a layout with thin rules at every level is the default
     "editorial" look and is not this brand; new surfaces divide with
     space, tint blocks and short printer's marks instead. See
     brand/BRAND.md § Division. */
  --hair: 0.5px;

  /* ---- grid ------------------------------------------------------
     The hero's final state clips to inset(28px 36px 0 round 28px).
     --inset and --radius-card are those two numbers, so every section edge
     below lands on the hero card's edge and the page reads as one sheet
     the hero was cut from.
     --gutter is deliberately left alone: the hero content, the nav and
     the trusted-by row are measured against it and are not in scope.
     These are redeclared at narrow widths, which @theme cannot express. */
  /* The /about frame, as CSS. components/page-frame.ts builds its Tailwind
     classes out of these two, so the sheet, the nav and the closing cannot
     drift apart — the closing's footer has to land on the same measure the
     sections above it use, and it is not a Tailwind element. */
  /* 80px is the desktop gutter measured off the reference, but as a flat
     value it ate 160 of a 375px phone and left the sheet 215 wide. The
     clamp keeps 80 from about 1340 up (6vw passes 5rem there) and falls to
     ~22px on a phone, which is the gutter the reference actually uses at
     that width. */
  --page-gutter: clamp(1rem, 6vw, 5rem);
  --page-measure: 85rem;
  /* The sheet's own inner padding, on the same principle: 40px inside the
     card on desktop, ~20px on a phone. */
  --sheet-pad: clamp(1.25rem, 3vw, 2.5rem);

  --gutter: clamp(1.25rem, 5vw, 4.5rem);
  --inset: 36px;
  --bay: clamp(1.6rem, 2.8vw, 2.5rem);

  /* ---- motion ----------------------------------------------------
     One set of durations, reused everywhere. Their easings are theme
     tokens above; Tailwind has no duration namespace these would fit. */
  --d-micro: 160ms;
  --d-ui: 240ms;
  --d-enter: 620ms;
  --d-hero: 900ms;
}

@media (max-width: 48rem) {
  :root { --inset: 20px; --radius-card: 20px;
  }
}

@media (max-width: 47.99rem) {
  :root { --page-gutter: 1rem; --sheet-pad: 0.5rem;
  }
}