/* codyuhh.com final direction: the one token file.
   The container is the personal-brand parent look (C: 1-bit heraldic, black ink on paper, Bayer dither the only tone)
   with the Royal Archive paper voice (D). Every project world overrides only the --w-* set inside the rail.
   Faces ship locally. Alagard is swapped for the Archive face (Libre Caslon Display) everywhere (round 5, P4: B).
   Young Serif, Hanken Grotesk and JetBrains Mono are the SUN family and the app's own faces; they are bundled here (OFL). */
/* every face ships from static/fonts, subset to Latin as WOFF by tools/fonts.mjs; the licence files sit beside them */
@font-face { font-family: 'Archive'; src: url(/static/fonts/LibreCaslonDisplay-Regular.woff) format('woff'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'ArchivePixel'; src: url(/static/fonts/RoyalArchiveBitmap-Regular.woff) format('woff'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Press Start 2P'; src: url(/static/fonts/PressStart2P-Regular.woff) format('woff'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Space Grotesk'; src: url(/static/fonts/SpaceGrotesk-Body.woff) format('woff'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Space Grotesk'; src: url(/static/fonts/SpaceGrotesk-Strong.woff) format('woff'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Young Serif'; src: url(/static/fonts/YoungSerif-Regular.woff) format('woff'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Hanken Grotesk'; src: url(/static/fonts/HankenGrotesk-Regular.woff) format('woff'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Hanken Grotesk'; src: url(/static/fonts/HankenGrotesk-Medium.woff) format('woff'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Hanken Grotesk'; src: url(/static/fonts/HankenGrotesk-SemiBold.woff) format('woff'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url(/static/fonts/JetBrainsMono-Regular.woff) format('woff'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url(/static/fonts/JetBrainsMono-Bold.woff) format('woff'); font-weight: 700; font-display: swap; }

:root {
  color-scheme: light;

  /* ---- ink and paper: the whole container palette ---- */
  --ink: #000;
  --paper: #fff;
  --ground: #f4f4f1;          /* the page behind the panels */
  --hair: #bbb;               /* panel and card hairline */
  --hair-strong: #aaa;        /* header frame */
  --ink-2: #444;              /* secondary text, 9.7:1 on paper */
  --ink-3: #6a6a6a;           /* meta, 4.9:1 on the ground */

  /* ---- type ---- */
  --display: 'Archive', Georgia, serif;                 /* titles, section heads, register names (was Alagard) */
  --bitmap: 'ArchivePixel', 'Archive', serif;           /* one bitmap headline per screen, 32px and above, never smaller */
  --pixel: 'Press Start 2P', 'ArchivePixel', monospace; /* the pixel register: numbers, the rail label, pennants */
  --serif: 'Archive', Georgia, serif;
  --archive: 'Archive', Georgia, serif;                 /* the paper voice inside a world (build notes, the Library) */
  --body: 'Space Grotesk', Arial, sans-serif;
  --meta: 'JetBrains Mono', ui-monospace, Menlo, monospace;   /* labels, folios, chips, the status bar */

  /* ---- the type scale (desktop / phone) ---- */
  --fs-h1: clamp(34px, 5vw, 56px);
  --fs-h2: clamp(26px, 3.2vw, 36px);
  --fs-h3: 22px;
  --fs-row: clamp(38px, 4.4vw, 64px);   /* a register row's name */
  --fs-body: 15px;
  --fs-meta: 11px;
  --fs-pixel: 10px;

  /* ---- rules, shadows, depth (the hard offset shadow is the only depth cue) ---- */
  --rule: 1px solid var(--ink);
  --dots: 1px dotted var(--ink);
  --shadow-hard: 5px 5px 0 var(--ink);
  --shadow-card: 3px 3px 0 var(--ink);
  --radius: 0;

  /* ---- the chrome ---- */
  --rail-w: 56px;             /* the constant rail, desktop (left) */
  --bar-h: 32px;              /* the status bar, bottom */
  --top-h: 48px;              /* the top bar on a phone */
  --nav-h: 44px;              /* the top bar (navigation) on desktop; on a phone it takes --top-h */
  --space: 8px;               /* the space unit */
  --wrap: 1240px;

  /* ---- motion ---- */
  --t-fast: 100ms ease;
  --t: 200ms ease;
  --t-normal: var(--t);
  --t-world: 500ms ease;      /* the page changing colour on the jar and vape switch */
  --ease-settle: cubic-bezier(.2, .8, .2, 1);

  /* ---- dither tone (Bayer 4 x 4 cells at fixed densities; the only tone in the world) ---- */
  --dither: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' shape-rendering='crispEdges'%3E%3Crect width='1' height='1' x='0' y='0' fill='%23000'/%3E%3Crect width='1' height='1' x='2' y='2' fill='%23000'/%3E%3C/svg%3E");
  --dither-50: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2' height='2' shape-rendering='crispEdges'%3E%3Crect width='1' height='1' x='0' y='0' fill='%23000'/%3E%3Crect width='1' height='1' x='1' y='1' fill='%23000'/%3E%3C/svg%3E");
  --d25: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' shape-rendering='crispEdges'%3E%3Crect x='0' y='0' width='1' height='1'/%3E%3Crect x='2' y='2' width='1' height='1'/%3E%3Crect x='2' y='0' width='1' height='1'/%3E%3Crect x='0' y='2' width='1' height='1'/%3E%3C/svg%3E");

  /* ---- the world set: what a project page may override inside the rail (the rail and the status bar stay ink on paper) ---- */
  --w-bg: var(--paper);
  --w-ink: var(--ink);
  --w-muted: var(--ink-2);
  --w-line: rgba(0,0,0,.3);
  --w-panel: rgba(0,0,0,.05);
  --w-accent: var(--ink);
  --w-accent-ink: var(--paper);
  --w-media: var(--ground);
  --world: var(--paper);
  --world-ink: var(--ink);
}

/* ---- the project worlds (object colours are fixed facts; the page wears them) ---- */
/* MEGA: the vape world is the print's yellow, the jar world is paper white with the cap's orange. SUN-family bold type. */
body.world-vape { --w-bg: #F2B21A; --w-ink: #141311; --w-muted: #4a3d10; --w-accent: #141311; --w-accent-ink: #F2B21A; --w-line: rgba(20,19,17,.35); --w-panel: rgba(20,19,17,.06); --w-media: #141311; }
body.world-jar  { --w-bg: #F7F5EF; --w-ink: #141311; --w-muted: #5a5650; --w-accent: #D9532F; --w-accent-ink: #fff; --w-line: rgba(20,19,17,.28); --w-panel: rgba(20,19,17,.045); --w-media: #141311; }
/* Tipper: a fabric world; the embroidery is the expressive type, so the page type stays plain */
body.tipper { --w-bg: #E9E6DF; --w-ink: #1B1B1B; --w-muted: #4f4c46; --w-line: rgba(27,27,27,.28); --w-panel: rgba(27,27,27,.05); --w-media: #DED9CE; --w-accent: #1B1B1B; --w-accent-ink: #E9E6DF; }
/* Stickers: the backing sheet, paper, with a black pack for the bonus door */
body.stickers { --w-bg: #F4F4F1; --w-ink: #000; --w-muted: #4a4a4a; --w-line: rgba(0,0,0,.25); --w-panel: rgba(0,0,0,.04); --w-media: #fff; }
/* SUN: the site's own verified tokens (DESIGN.md, 2026-09-28): ground, panel, amber, cream */
body.sun { --w-bg: #0A0A09; --w-panel: #141310; --w-ink: #FFF7E6; --w-muted: rgba(242,234,218,.66); --w-line: rgba(245,166,35,.22); --w-accent: #F5A623; --w-accent-ink: #0A0A09; --w-media: #050504; --w-cream: #FBF4E4; }
/* LabOS: the app's studio-dark theme (read 2026-09-28) */
body.labos { --w-bg: hsl(240 6% 6%); --w-panel: hsl(240 5% 9%); --w-ink: #ececec; --w-muted: #9a9a9e; --w-line: rgba(236,236,236,.16); --w-accent: hsl(17 66% 55%); --w-accent-ink: #0e0e10; --w-media: #050506; }
/* the paper world: codyuhh's own pages inside the rail (the register, the rooms, the other work, the gallery, notes, about, the colophon) */
body.paperworld { --w-bg: var(--paper); --w-panel: var(--ground); --w-ink: var(--ink); --w-muted: var(--ink-2); --w-line: rgba(0,0,0,.28); --w-accent: var(--ink); --w-accent-ink: var(--paper); --w-media: var(--ground); }