/* kb-tokens.css — Kuribaby's design tokens, and the only file of this theme that writes them.

   The shared part shells (the pinned release in snippets/kb-shells.liquid) draw nothing in a
   colour, size or shape of their own: every value they use is one of the tokens below, so this
   file is where Kuribaby's brand reaches them. It holds the 47 names the shells' changelog lists
   (its "token seam") in a light set and a night set, Kuribaby's two faces, and the type stack.
   It draws nothing.

   Values: the colours are Kuribaby's own library (owner, 2026-10-07): five ladders taken from two
   photos - the bay's sea teal (the brand colour), the shore's eucalyptus green, the open sea's
   blue, the sunrise red, and the star greys running to the night sky's black. Every colour role
   names one step of a ladder; no part writes a colour of its own. The steps (space, corners, control
   heights, type sizes) are the one scale every platform shares, so a part has the same geometry
   wherever it is drawn. A length that comes from a box is a formula on these, never a new number.

   Load order: after the platform stylesheets that still carry their own copies of some of these
   names (kb-base.css), so Kuribaby's values are the ones that hold; before kuribaby-styles.css
   and every page stylesheet. Night is .dark-mode-active on <html>, set before the first paint.

   Gate: workers/worker/scripts/brand-page.test.mjs (every seam name defined here, in both sets;
   the brand page and the live page read the same values). */

/* Jost (400/500) under the family name "Kuribaby": the platform UI names this family
   throughout, so declaring it here fonts the whole app. The files sit in this assets folder.
   Its vertical metrics are overridden to 1100 / -345 (the files say 1070 / -375): the same 1445 of
   line, so no line's height moves, but in a 20px line at 16px the baseline falls at 16.04 rather
   than 15.56, where a pixel snap put the words up to a pixel above a field's midline. These are
   flair.design's own face's metrics (Flair Sans, 2026-09-21). Gate: scripts/field-centre.test.mjs. */
@font-face {
  font-family: "Kuribaby";
  src: url("jost-regular.woff2") format("woff2"), url("jost-regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  ascent-override: 110%;
  descent-override: 34.5%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Kuribaby";
  src: url("jost-medium.woff2") format("woff2"), url("jost-medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  ascent-override: 110%;
  descent-override: 34.5%;
  line-gap-override: 0%;
}

/* EB Garamond (400): the serif for headings and the brand mark. */
@font-face {
  font-family: "EB Garamond";
  src: url("ebgaramond-medium.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

/* Metric-compatible Arial fallbacks (calibrated to Jost's metrics as declared above, 1100 / -345):
   no layout shift when the webfont swaps in. */
@font-face {
  font-family: "Jost Fallback";
  src: local("Arial"), local("ArialMT");
  size-adjust: 96.007%;
  ascent-override: 114.5750%;
  descent-override: 35.9349%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Jost Medium Fallback";
  src: local("Arial"), local("ArialMT");
  size-adjust: 100.0447%;
  ascent-override: 109.9509%;
  descent-override: 34.4846%;
  line-gap-override: 0%;
}

:root {
  /* The type stack the platform UI is styled in. */
  --flairui-font: "Kuribaby", "Jost Fallback", "PingFang SC", "Microsoft YaHei", sans-serif;

  /* The colour library. Every colour below this block is one of these, never a blend or a new value.
     Each family is a ladder from light (50) to dark (950); the step marked is the colour taken from the photo. */
  /* sea teal, the brand colour (from the cover's bay); 600 is the photo's */
  --kb-teal-50: #f0f9fa;
  --kb-teal-100: #ddeff1;
  --kb-teal-200: #bddfe3;
  --kb-teal-300: #90c9d0;
  --kb-teal-400: #61b0b9;
  --kb-teal-500: #38959f;
  --kb-teal-600: #00747e;
  --kb-teal-700: #06626b;
  --kb-teal-800: #014a51;
  --kb-teal-900: #013338;
  --kb-teal-950: #011e21;
  /* eucalyptus green (the shore's trees); 700 is the photo's */
  --kb-green-50: #f5f8f6;
  --kb-green-100: #e7ede9;
  --kb-green-200: #cfdbd4;
  --kb-green-300: #b0c3b8;
  --kb-green-400: #90a89a;
  --kb-green-500: #738e7e;
  --kb-green-600: #5a7466;
  --kb-green-700: #435a4d;
  --kb-green-800: #33463b;
  --kb-green-900: #223028;
  --kb-green-950: #121c16;
  /* far-sea blue (the open water); 600 is the photo's */
  --kb-blue-50: #f2f8fb;
  --kb-blue-100: #e0eef5;
  --kb-blue-200: #c3dcea;
  --kb-blue-300: #9bc5da;
  --kb-blue-400: #73aac6;
  --kb-blue-500: #518fad;
  --kb-blue-600: #2b6a87;
  --kb-blue-700: #255e78;
  --kb-blue-800: #16475c;
  --kb-blue-900: #0c3141;
  --kb-blue-950: #031c28;
  /* sunrise red (the sun on the bay); 500 is the photo's */
  --kb-sunrise-50: #fff4f2;
  --kb-sunrise-100: #fee5df;
  --kb-sunrise-200: #fec9be;
  --kb-sunrise-300: #fea28f;
  --kb-sunrise-400: #ff6d53;
  --kb-sunrise-500: #e8462a;
  --kb-sunrise-600: #c72300;
  --kb-sunrise-700: #a01b00;
  --kb-sunrise-800: #7a1201;
  --kb-sunrise-900: #570a01;
  --kb-sunrise-950: #360300;
  /* star grey: white to the night sky's black (1000, from the star photo) */
  --kb-star-0: #ffffff;
  --kb-star-50: #f9fafe;
  --kb-star-100: #eef0f6;
  --kb-star-200: #dfe1e8;
  --kb-star-300: #c8cad2;
  --kb-star-400: #a2a4ad;
  --kb-star-500: #7d8089;
  --kb-star-600: #5e6069;
  --kb-star-700: #42454e;
  --kb-star-800: #2b2d37;
  --kb-star-900: #191b25;
  --kb-star-950: #0d0f18;
  --kb-star-1000: #05060c;

  /* Colours, day: each names a step of the library above. */
  --color-text: var(--kb-star-950);
  --color-text-secondary: var(--kb-star-600);
  --color-text-tertiary: var(--kb-star-400);  /* the faintest words: a caret, a hint */
  --color-bg-card: var(--kb-star-100);
  --color-bg-hover: var(--kb-star-100);
  --color-bg-panel: var(--kb-star-0);
  --color-bg-page: var(--kb-star-50);         /* the ground the page and its sidebar stand on */
  --color-bg-dialog: var(--color-bg-panel);   /* a dialog's window: the panel by day, a step lighter than the page at night */
  --color-bg-surface: var(--kb-star-100);     /* a filled block inside a panel: a message bubble, a folder's small squares */
  --color-bg-current: var(--kb-teal-100);     /* the list row that is the current one */
  --color-border: var(--kb-star-200);
  --color-border-strong: var(--kb-star-300);  /* the line around a control that can be pressed */
  --color-accent: var(--kb-teal-600);         /* what a primary button is filled with: the brand's sea teal */
  --color-on-accent: var(--kb-star-0);
  --color-on-image: var(--kb-star-0);         /* words and marks laid on a picture, a coloured tile or the dark glass, in both themes */
  --color-danger: var(--kb-sunrise-600);
  --color-danger-text: var(--kb-sunrise-600); /* red for words */
  --color-on-danger: var(--kb-star-0);        /* words on a field of --color-danger, in both themes */
  --color-success: var(--kb-green-600);
  --color-link: var(--kb-blue-600);
  --color-highlight: var(--kb-blue-200);      /* marked words in a draft */
  --avatar-bg: var(--color-text);             /* the account's initial: the ink, reversed */
  --avatar-fg: var(--color-bg-panel);
  /* Covers: a dark glass over the page and the dimming under a dragged file. These are the only
     see-through fills, and they are not part of a part's colour. */
  --studio-drop-tint: rgba(0,0,0,.07);
  --scrim: rgba(0,0,0,.5);
  --scrim-frosted: rgba(0,0,0,0.58);        /* the frosted cover that small white words sit on (a folder, Recently deleted): deeper than --scrim so they read 4.5:1 by day */
  --scrim-frosted-blur: 28px;               /* how far that cover blurs the page beneath it */
  --menu-shadow: 0 4px 12px rgba(0,0,0,.1);
  --toast-shadow: 0 4px 12px rgba(0,0,0,.14);
  --modal-shadow: 0 8px 40px rgba(0,0,0,.16);
  --sheet-shadow: 0 -4px 24px rgba(0,0,0,.1);   /* a sheet's edge is its top, so its shadow rises */
  --drawer-shadow: 2px 0 12px rgba(0,0,0,.15);  /* a drawer from the left edge: its edge is its right, so the shadow falls right */
  --switch-shadow: 0 1px 2px rgba(0,0,0,.12);

  /* How far a thing is pushed back, darkened on hover, and pressed; and the two levels a faint thing is drawn at. */
  --dim: .4;
  --opacity-s: .3;
  --opacity-l: .7;
  --opacity-xl: .85;
  --press-hover: .93;
  --press-active: .88;

  /* The steps. Lengths are whole pixels. */
  --space-2xs: 2px;
  --space-xs: 4px;
  --space-s: 8px;
  --space-m: 12px;
  --space-l: 16px;
  --space-xl: 24px;
  --space-2xl: 32px;
  --space-3xl: 48px;
  /* The page's side margin: one figure on every page and every screen. */
  --page-gutter: 20px;
  --radius-xs: 4px;
  --radius-s: 8px;
  --radius-m: 12px;
  --radius-l: 16px;
  --radius-full: 999px;
  --radius-tile: 22%;             /* a file tile's corner, as a share of its side: the grid's thumbnails, a folder's small ones, the viewer's big icon */
  --radius-icon-btn: 10px;        /* an icon button that is a rounded square (shells v6.00 is-square), and the viewer's tools */
  --font-2xs: 11px;
  --font-xs: 12px;                /* a badge's words and figures */
  --font-s: 13px;
  --font-m: 14px;
  --font-l: 16px;                 /* a field's words, on every screen */
  --font-xl: 20px;
  --font-2xl: 24px;
  --font-3xl: 32px;
  --leading-none: 1;                    /* a line as tall as its letters: a logo, a big figure, a tag sized by its own height */
  --leading-tight: round(1.2em, 2px);   /* one line of a control, an even number of pixels */
  --leading: round(1.45em, 2px);        /* running text: what a dialog says */
  --tracking-tight: -0.01em;      /* a large title drawn a touch closer */
  --tracking-fine: 0.02em;        /* small words opened a touch: a footer, a tag */
  --tracking-caps: 0.08em;        /* words in capitals */
  --tracking-wide: 0.2em;         /* a short word set wide between rules */
  --control-s: 28px;
  --control-m: 32px;
  --control-l: 44px;
  --control-close: 36px;          /* a dialog's close on a touch screen */
  --menu-min-width: 160px;        /* the least width of every menu: short rows still read as one family */
  --sidebar-width: 250px;         /* the side panel, and the panels that open level with it */
  --gem-loader: 64px;             /* the loading gem's box: 64 draws the gem 28 across */
  --logo-mark: 13px;              /* the gem beside the wordmark */
  --logo-canvas: 29.92px;         /* the canvas that draws it, centred on the mark */
  --icon-s: 16px;
  --icon-m: 20px;
  --icon-l: 24px;
  --hairline: 1px;
  --weight-regular: 400;          /* the two weights a word is set in (the faces above carry these two) */
  --weight-medium: 500;
  --focus-ring: 2px;
  --chosen-ring: 2px;             /* the ring in the text colour round a chosen thing: a selected tile, a merge target */
  --dialog-width: 400px;
  --dialog-width-wide: 528px;   /* a dialog that holds a form: 480 for the words, a padding each side */
  --chat-width: 720px;
  --motion-fast: .12s;
  --motion: .15s;
  --motion-slow: .3s;
  --motion-spin: 1.2s;            /* one turn of the loading gem */

  /* What stands above what. */
  --z-raised: 1000;    /* a part over the page's own parts, under every scrim: an open folder, a header's menu */
  --z-scrim: 9998;
  --z-menu: 9999;
  --z-dialog: 10000;
  --z-over: 2;          /* over a lifted layer of the same part: a close or a title on a sheet's fade */
  --z-top: 3;           /* above everything else in its part */
  --z-cover: 4;         /* a wash over a whole part, its marks included: the upload cover, a drop target's tint */
  --z-viewer: 100000;   /* the full-screen viewer, and what opens over it counts up from here */
  --z-viewer-dialog: calc(var(--z-viewer) + 2);    /* a dialog opened from the viewer */
  --z-viewer-toast: calc(var(--z-viewer) + 3);     /* a message, above any dialog */
  --z-viewer-confirm: calc(var(--z-viewer) + 4);   /* a dialog that asks about another dialog */
}

/* Night: the star-sky black. Only the colours change; the steps are the same by night. The viewer
   carries a bare .dark-mode (set only at night), so it reads the same set. */
.dark-mode,
.dark-mode-active {
  --color-text: var(--kb-star-100);
  --color-text-secondary: var(--kb-star-400);
  --color-text-tertiary: var(--kb-star-600);
  --color-border: var(--kb-star-800);
  --color-border-strong: var(--kb-star-700);
  --color-bg-card: var(--kb-star-900);
  --color-bg-hover: var(--kb-star-800);
  --color-bg-panel: var(--kb-star-950);
  --color-bg-page: var(--kb-star-1000);
  --color-bg-dialog: var(--kb-star-900);
  --color-bg-surface: var(--kb-star-900);
  --color-bg-current: var(--kb-teal-900);
  --color-accent: var(--kb-teal-400);
  --color-on-accent: var(--kb-star-1000);
  --color-danger-text: var(--kb-sunrise-400);
  --color-success: var(--kb-green-300);
  --color-link: var(--kb-blue-300);
  --color-highlight: var(--kb-blue-800);
  --studio-drop-tint: rgba(255,255,255,.1);
  --menu-shadow: 0 4px 24px rgba(0,0,0,.4);
  --scrim: rgba(0,0,0,.6);
  --modal-shadow: 0 8px 40px rgba(0,0,0,.4);
  --sheet-shadow: 0 -4px 24px rgba(0,0,0,.4);
  --drawer-shadow: 2px 0 12px rgba(0,0,0,.4);
}