/* Mama – theme. Everything the appearance setting changes is a variable here (js/theme.js).
   Calm: neutral grays, a single accent color, color only for states.
   Fonts are local (variable woff2, latin subset incl. umlauts).

   Vertical centering (#226, [Decision:99]): the text fonts carry the line height of 1.5 in their own
   metrics, ascent + descent = 150% with ascent - descent = cap height, so capitals sit in the middle of
   the line box. Where the browser knows these overrides (html.font-lh, js/theme.js), text uses
   line-height: normal: no half-leading is left, which Chrome rounds down and so lifted text by up to
   1px. The mono fonts keep their own metrics (inline code would grow), see code/pre/.mono in app.css. */

@font-face { font-family: "Geist"; src: url(../fonts/geist.woff2) format("woff2"); font-weight: 100 900; font-display: swap;
  ascent-override: 110.5%; descent-override: 39.5%; line-gap-override: 0%; }   /* cap 71 */
@font-face { font-family: "Geist Mono"; src: url(../fonts/geist-mono.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Inter"; src: url(../fonts/inter.woff2) format("woff2"); font-weight: 100 900; font-display: swap;
  ascent-override: 111.38%; descent-override: 38.62%; line-gap-override: 0%; }   /* cap 72.75 */
@font-face { font-family: "Plus Jakarta Sans"; src: url(../fonts/jakarta.woff2) format("woff2"); font-weight: 200 800; font-display: swap;
  ascent-override: 112.25%; descent-override: 37.75%; line-gap-override: 0%; }   /* cap 74.5 */
@font-face { font-family: "Outfit"; src: url(../fonts/outfit.woff2) format("woff2"); font-weight: 100 900; font-display: swap;
  ascent-override: 108.8%; descent-override: 41.2%; line-gap-override: 0%; }   /* cap 67.6 */
@font-face { font-family: "Space Grotesk"; src: url(../fonts/space-grotesk.woff2) format("woff2"); font-weight: 300 700; font-display: swap;
  ascent-override: 110%; descent-override: 40%; line-gap-override: 0%; }   /* cap 70 */
@font-face { font-family: "Bricolage Grotesque"; src: url(../fonts/bricolage.woff2) format("woff2"); font-weight: 200 800; font-display: swap;
  ascent-override: 108%; descent-override: 42%; line-gap-override: 0%; }   /* cap 66 */
@font-face { font-family: "JetBrains Mono"; src: url(../fonts/jetbrains-mono.woff2) format("woff2"); font-weight: 100 800; font-display: swap; }

:root {
  /* appearance setting (defaults = signed-off values) */
  --hue: 28;                 /* accent: coral */
  --chroma: .14;
  --font-ui: "Geist", system-ui, sans-serif;
  --font-display: "Geist", system-ui, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, Consolas, monospace;
  --radius: 10px;
  --density: 1;              /* 0.8 compact · 1 normal · 1.2 airy */
  --font-size: 14px;
  --chat-w: 780px;           /* widest the chat column grows (#160) */

  /* derived */
  --r-sm: calc(var(--radius) * .7);
  --r-lg: calc(var(--radius) * 1.3);
  --sp: calc(8px * var(--density));

  --rail: 60px;
  --side: 264px;
  --detail: 420px;
  --top: 52px;
  --gap: 8px;                /* margin around the work surface */
  --ease: cubic-bezier(.2, .8, .2, 1);
  --t: .18s;
}

:root, [data-theme="dark"] {
  color-scheme: dark;
  --bg-0: #0b0b0d;           /* behind everything: rail and sidebar */
  --bg-1: #131316;           /* work surface */
  --bg-2: #19191d;           /* cards, inputs, buttons */
  --bg-3: rgb(255 255 255 / .055);   /* hover, selection */
  --bg-solid: #1a1a1e;       /* drawers, menus */
  --line: rgb(255 255 255 / .07);
  --line-2: rgb(255 255 255 / .12);
  --text: #e4e4e8;
  --text-2: #a0a0aa;
  --text-3: #6e6e79;
  --shadow: 0 16px 48px -16px rgb(0 0 0 / .7), 0 0 0 1px var(--line);

  --accent: oklch(70% var(--chroma) var(--hue));
  --accent-soft: oklch(70% var(--chroma) var(--hue) / .13);
  --accent-ring: oklch(70% var(--chroma) var(--hue) / .45);
  --on-accent: #fff;

  /* states, muted */
  --ok: oklch(74% .12 155);
  --warn: oklch(80% .11 80);
  --err: oklch(70% .14 25);

  /* agent colors (checked with the dataviz validator; for the chart and avatar tint) */
  --ag-blue: #3987e5; --ag-orange: #d95926; --ag-aqua: #199e70;
  --ag-yellow: #c98500; --ag-magenta: #d55181; --ag-violet: #9085e9;
}

[data-theme="light"] {
  color-scheme: light;
  --bg-0: #efeff1;
  --bg-1: #ffffff;
  --bg-2: #fafafa;
  --bg-3: rgb(0 0 0 / .045);
  --bg-solid: #ffffff;
  --line: rgb(0 0 0 / .08);
  --line-2: rgb(0 0 0 / .14);
  --text: #18181b;
  --text-2: #55555f;
  --text-3: #8b8b96;
  --shadow: 0 16px 40px -18px rgb(0 0 0 / .22), 0 0 0 1px var(--line);
  --accent: oklch(60% calc(var(--chroma) + .03) var(--hue));
  --accent-soft: oklch(60% calc(var(--chroma) + .03) var(--hue) / .1);
  --accent-ring: oklch(60% calc(var(--chroma) + .03) var(--hue) / .4);
  --ok: oklch(58% .13 155);
  --warn: oklch(66% .13 70);
  --err: oklch(57% .17 25);
  --ag-blue: #2a78d6; --ag-orange: #eb6834; --ag-aqua: #1baf7a;
  --ag-yellow: #eda100; --ag-magenta: #e87ba4; --ag-violet: #6250d6;
}

/* accent "Graphite": no color at all, primary buttons in text color */
[data-accent="mono"] { --accent: var(--text); --accent-soft: var(--bg-3); --accent-ring: var(--line-2); --on-accent: var(--bg-1); }