/* Sheer — the factory's default creator site (packages/brand/sheer/tokens.css). Copied from the settled prototype,
   First pass (2 October 2026): white, the leaf palette, the drifting wash with white writing on it, a translucent grey menu.
   Second pass (6 October 2026): corelab's rhythm. One left edge for everything; generous air between sections; small, quiet
   detail text under modest headings; hairline rows; frosted glass on the panels; the page closes on a deep green.
   Tokens first; everything below reads only tokens, so a creator's skin changes the look without touching a page. */
:root {
  /* The washes stand where her photographs will go: three quiet tints (mist, sage, alabaster), on white.
     (The names are kept from the first palette, so no page changes.) */
  --sky: #e7e3dc;  --sky-deep: #d4cec4;   /* warm mist */
  --leaf: #d9d2c6; --leaf-deep: #c1bab0;   /* stone, from her reference */
  --honey: #f1ede6; --honey-deep: #e5dfd4; /* bone */
  /* The shade: a muted sage-grey where the white writing sits. */
  --leaf-shade: #6b645b; --sky-shade: #6b645b; --honey-shade: #6b645b; /* a warm taupe: her reference's charcoal (#282420) lifted a lot lighter at her request (8 October 2026), still 7:1 under white writing; the placeholders' foot and the footer */
  --night: #6b645b;  /* the footer: the colour scheme's own soft grey, the same as the shade in the hero (7 October 2026) */
  --leaf-mid: #8f877c; --sky-mid: #8b857b; --wash-mid: var(--leaf-mid); /* the middle of a wash's deepening keeps its tint */
  --grain: none; /* the film grain was removed from the colour (Drucilla, 8 October 2026); the token stays so every surface still reads one layer list */
  --shell: #f4f1ec;  /* quiet panels: a warm neutral */
  --stone: #e5e1da;  /* hairlines that only divide, warmed to the placeholders */
  --ground: #ffffff;
  --sheet: #ffffff;
  --fog: var(--shell);
  --ink: #1f1e1c;    /* a warm near-black */
  --muted: #6b6a66;  /* the grey writing stays the cool-neutral grey: the warmed one "almost looks brown" (Drucilla, 8 October 2026) */
  --line: var(--stone);
  --control: #918a81; /* edges that mean "you can use this": 3:1 on every ground */
  --button: var(--ink);
  --button-ink: #ffffff;
  --focus: var(--ink);

  /* The wash: soft light. Three pools of neutral tint that drift slowly over white. */
  --wash-a: var(--leaf); --wash-b: var(--sky); --wash-c: var(--honey); --wash-shade: var(--leaf-shade);
  --wash-base: linear-gradient(180deg, #ffffff 0%, var(--shell) 100%);

  /* Writing laid over the wash and the night, and the glass */
  --on-wash: #ffffff;
  --on-wash-soft: rgb(255 255 255 / 0.92);
  --on-night-soft: rgb(255 255 255 / 0.9);
  --night-line: rgb(255 255 255 / 0.14);
  --glass: rgb(38 37 35 / 0.64);          /* the menu: a translucent warm grey; white writing */
  --glass-edge: rgb(255 255 255 / 0.18);
  --frost: rgb(28 24 20 / 0.26);          /* captions on the panels: a dark frost, so white writing holds over any photograph */
  --frost-edge: rgb(255 255 255 / 0.2);
  --glass-blur: 18px;
  --card: rgb(255 255 255 / 0.9);
  --field: #efebe5;                       /* a soft pill field on white */
  --frosted: rgb(255 255 255 / 0.56);     /* the login card */

  /* Type: one family, used quietly. Small detail under modest headings; sizes step, they do not shout. */
  --font: "Inter Tight", "Inter Tight Fallback", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --weight: 400; --weight-strong: 500;
  --label: 0.6875rem;                                            /* 11px: small capitals */
  --detail: 0.875rem;                                           /* 14px: descriptions, answers (one step up, 8 October 2026) */
  --small: 0.9375rem;                                             /* 15px (one step up, 8 October 2026) */
  --body: 0.9375rem;                                             /* 15px */
  --term: clamp(1rem, 0.94rem + 0.25vw, 1.1875rem);              /* 16 to 19px: the thing a row names */
  --statement: clamp(1.0625rem, 0.98rem + 0.35vw, 1.3125rem);    /* 17 to 21px: a section's one line */
  --heading: clamp(1.375rem, 1.1rem + 1.1vw, 1.875rem);          /* 22 to 30px: the intro and a section's heading */
  --title: clamp(2.125rem, 1.55rem + 2.3vw, 3rem);               /* 34 to 48px: a page's title */
  --track: -0.012em; --track-heading: -0.022em; --track-title: -0.032em;
  --measure: 30rem;                                              /* small running text: about 68 characters a line at 14px (8 October 2026) */

  /* Space and shape */
  --frame: 8px;                                       /* the thin border of white left around the hero */
  --pad: clamp(1.25rem, 0.55rem + 2.6vw, 2.5rem);     /* the page's one left edge */
  --section: clamp(4.5rem, 3rem + 5vw, 7.5rem);       /* between sections */
  --head-gap: clamp(1.75rem, 1.3rem + 1.4vw, 2.75rem);/* from a section's head to its content */
  --gap: 0.625rem;                                    /* between panels */
  --radius: 22px; --radius-sm: 12px; --radius-xs: 6px; --radius-button: 1.6rem; --pill: 999px;
  --bar-h: 3rem;            /* the menu's height; measured by the page's script, so the hero can make room for it */
  --bar-gap: 0.75rem;
  --hero-height: clamp(32rem, 80svh, 46rem);
  --hero-pad-b: clamp(1.75rem, 1rem + 3vw, 3.5rem);
  --media-ratio: 16 / 9;
}

/* The same design after dark: it follows the phone, since the evenings are done in a dim room. The tints deepen. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --sky: #252827; --sky-deep: #1c1f1e; --leaf: #252923; --leaf-deep: #1c201b; --honey: #2a2a25; --honey-deep: #20201c;
    --shell: #1c1c1a; --stone: #2c2b29; --ground: #131312; --sheet: #131312; --ink: #efeeea; --muted: #a8a6a1; --control: #75736e;
    --night: #1d1c1a; --button-ink: #131312; --wash-base: linear-gradient(180deg, #191917 0%, #131312 100%); --leaf-mid: var(--leaf-shade); --sky-mid: var(--sky-shade);
    --glass: rgb(19 19 18 / 0.55); --glass-edge: rgb(255 255 255 / 0.1); --card: rgb(19 19 18 / 0.88);
    --field: #201f1d; --frosted: rgb(19 19 18 / 0.6);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --sky: #252827; --sky-deep: #1c1f1e; --leaf: #252923; --leaf-deep: #1c201b; --honey: #2a2a25; --honey-deep: #20201c;
  --shell: #1c1c1a; --stone: #2c2b29; --ground: #131312; --sheet: #131312; --ink: #efeeea; --muted: #a8a6a1; --control: #75736e;
  --night: #1d1c1a; --button-ink: #131312; --wash-base: linear-gradient(180deg, #191917 0%, #131312 100%); --leaf-mid: var(--leaf-shade); --sky-mid: var(--sky-shade);
  --glass: rgb(19 19 18 / 0.55); --glass-edge: rgb(255 255 255 / 0.1); --card: rgb(19 19 18 / 0.88);
  --field: #201f1d; --frosted: rgb(19 19 18 / 0.6);
}