/* ══════════════════════════════════════════════════════════════════════
   The system, and nothing that uses it.

   Every page on the site loads this sheet first and takes its colour,
   type, space, radius, state, motion and layers from here. It was cut
   out of lab.css the day a second page needed the same values: two
   copies of a scale is not a scale, it is a pair of scales that agree
   for a while. system.html reads this file at runtime, so what the spec
   page shows is what the pages actually use.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Scheme ─────────────────────────────────────────────────────────────
   One theme, but not one flat black. Three surface steps so the cards
   sit above the ground instead of being drawn on it: the page is the
   darkest thing on screen, the card is a step up, and a plate inside a
   card is a step up again. Every card also carries a one-pixel light
   line along its top edge, which is what actually makes a dark surface
   read as raised rather than as a hole.

   Colour is kept out of the chrome. The frame stays neutral and the hue
   arrives through the work: the faces, the strokes, the globe, the
   project media. Blue leads, ember and teal answer it. */
:root {
  color-scheme: dark;
  --bg:    #000000;   /* the ground, and it is actually black */
  --panel: #060607;   /* a card, barely above it */
  --card:  #0d0d10;   /* a plate inside a card */
  --panel-up: #0a0a0c;
  --fg:    #eeeeec;
  --muted: #8e8e94;   /* 6.6:1 on the card */
  --faint: #787881;   /* 4.5:1, because the tags under the work are
                         information now, not decoration */
  --line:  rgba(238,238,236,.075);
  --hair:  rgba(238,238,236,.045);
  --lift:  rgba(255,255,255,.028);  /* the top-edge highlight */
  --accent:#5286ff;   /* lifted from #3d72f5 to clear 4.5:1 */
  /* The watch faces, and only them. Colour is the studio's subject, so
     the one card that shows what the studio makes is allowed more than
     one hue — on hover, and never at rest. These were literals in
     lab.js standing in for tokens that did not exist, which meant the
     spec page could not see them. */
  --accent-warm: #ff6a2b;
  --accent-cool: #19c8c0;
  --edge:  rgba(238,238,236,.13);
  --sans: "Geist", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  /* ── Type ─────────────────────────────────────────────────────────
     Six steps, and nothing between them. The page had grown twelve
     sizes between 8px and 82px, most of them a point or two apart,
     which is not a scale, it is a drift. */
  --t-2xs: 10px;      /* the film sheet's stamps, and only those */
  --t-xs:  11px;      /* mono meta: years, tags, coordinates */
  --t-sm:  12.5px;    /* labels, captions, buttons, socials */
  --t-md:  14px;      /* body copy, the name in the bar, case bullets */
  --t-lg:  20px;      /* every card title, the statement, the figures */
  --t-xl:  30px;      /* the avatar's initials, when the photograph fails */

  /* Two weights. A third is a decision nobody can defend twice. */
  --w-reg: 400;
  --w-med: 500;

  /* Leading and tracking travel with the size: type set at 34px and type
     set at 11px cannot share either one. */
  --lh-tight: 1.2;    /* titles */
  --lh-body:  1.45;   /* paragraphs */
  --lh-flat:  1;      /* numerals, labels, anything on a single line */
  --ls-tight: -0.022em;
  --ls-caps:  .075em;

  /* ── State ────────────────────────────────────────────────────────
     One ladder, four rungs, used by every interactive surface. A
     control differs from another control by shape, not by how much
     lighter it gets when you point at it. */
  --s-rest:   rgba(238, 238, 236, .025);
  --s-hover:  rgba(238, 238, 236, .07);
  --s-press:  rgba(238, 238, 236, .10);
  --e-rest:   rgba(238, 238, 236, .11);
  --e-hover:  rgba(238, 238, 236, .20);
  --e-press:  rgba(238, 238, 236, .24);
  --s-inset:  inset 0 1px 0 rgba(255, 255, 255, .05);
  --s-inset-hi: inset 0 1px 0 rgba(255, 255, 255, .11);  /* the same edge, catching light */
  --s-sunk:   inset 0 2px 5px rgba(0, 0, 0, .5);
  --s-blur:   blur(12px);
  --s-blur-hi: blur(20px);   /* glass answers by clearing, not by moving */
  --s-ring:   1px solid var(--edge);

  /* ── Motion ───────────────────────────────────────────────────────
     Four durations and two curves. Everything that responds to a
     pointer uses fast or base; anything that moves on its own uses
     slow or reveal. */
  --d-fast:   .12s;
  --d-base:   .18s;
  --d-slow:   .32s;
  --d-reveal: .6s;
  --ease:     cubic-bezier(.2, .7, .2, 1);      /* out: things arriving */
  --ease-io:  cubic-bezier(.76, 0, .24, 1);     /* in and out: things travelling */

  /* ── Space ────────────────────────────────────────────────────────
     A two pixel grid to 24, four beyond it. Every margin, padding and
     gap in the sheet is one of these fifteen; there is no sixteenth,
     and a value that is not on the grid is a value nobody chose. */
  --sp-2:   2px;    /* optical nudges: type against its own frame */
  --sp-4:   4px;
  --sp-6:   6px;
  --sp-8:   8px;
  --sp-10: 10px;
  --sp-12: 12px;
  --sp-14: 14px;
  --sp-16: 16px;
  --sp-18: 18px;
  --sp-20: 20px;
  --sp-22: 22px;
  --sp-24: 24px;
  --sp-28: 28px;
  --sp-36: 36px;
  --sp-44: 44px;

  /* ── Radius ───────────────────────────────────────────────────────
     Five, and they go with size: the bigger the box, the rounder the
     corner, so a tag and a card are recognisably the same family
     without being the same shape. */
  --r-2:   2px;     /* a photograph, which wants almost none */
  --r-4:   4px;     /* a tag */
  --r-8:   8px;     /* a button, a nav link */
  --r-12: 12px;     /* the film square */
  --r-16: 16px;     /* a card, and the bar */
  --r-full: 999px;  /* the avatar */
  --r: var(--r-16); /* the card radius, by the name the grid calls it */

  /* ── Layers ───────────────────────────────────────────────────────
     Six, named for what is on them. A z-index written as a number at
     the point of use is a number nobody can rank against the others. */
  --z-seam:   4;    /* the redrawn outline of a carved card */
  --z-square: 5;    /* the film square sitting in its pocket */
  --z-bar:   40;    /* the bar, stuck to the top of a scrolling page */
  --z-grain: 60;    /* the grain, over everything it tints */
  --z-slats: 80;    /* the load reveal, over the page it uncovers */
  --z-view:  90;    /* the film viewer, over all of it */

  /* ── The ground ───────────────────────────────────────────────────
     Two washes, far enough down that they read as unevenness in the
     black rather than as colour. They are a token because the page is
     not the only thing that paints them: anything standing in for the
     page — a veil over a floating bar, a sheet behind a viewer — has to
     paint exactly the same thing or the join shows. */
  --wash:
    radial-gradient(90rem 52rem at 12% -12%, rgba(61, 114, 245, .038), transparent 60%),
    radial-gradient(70rem 44rem at 108% 118%, rgba(255, 106, 43, .020), transparent 62%);

  --gap: var(--sp-10);       /* a real gap: these are cards, not a ruled plane */
  --scroll-clear: 104px;   /* the sticky bar's height, plus its own gap */
}