/* The palette. Every colour in the product is defined here once, and nothing
   outside this file knows which theme is active.

   Two modes, one language. Light is warm paper - not white - with ink that is
   nearly black; dark is a deep neutral - not blue-black - with ink that is
   nearly white. Both keep to greys and let one warm mark (the clay signal)
   say "this is the model" and "this is the action that matters". Status
   colours mean something and appear nowhere else. Depth comes from a
   hairline and a soft shadow, never from a heavier grey.

   Two ways in, because the application has a Light/Dark/System control:
   prefers-color-scheme answers for "System" and is guarded so an explicit
   Light is honoured on a dark machine; [data-theme] answers for a choice. */

:root {
  --paper: #f7f7f5;
  /* what a drag selects, plainly seen (the owner, 2026-10-04: "not able to copy by selecting" - the soft grey it used
     was the bubble's own grey): the selection blue a person knows from their editor */
  --selection: #add6ff;
  --surface: #ffffff;
  --surface-muted: #f0f0ed;
  --raised: #ffffff;              /* a card on a canvas */
  --ink: #171717;
  --ink-invert: #ffffff;
  --muted: #4a4a47;
  --faint: #6b6b66;               /* 4.99:1 on paper - a time or a count is still readable */
  --dim: var(--faint);
  --hairline: #e6e6e2;
  --hairline-strong: #d5d5d0;
  --press: #ebebe8;

  /* the accent is the page's own ink: a running dot, a bar, a focus ring, a tag. Radium, the purple-pink, is for the
     two places the owner asked for it - a switch that is on and the chosen model (2026-10-02) - and nowhere else
     (2026-10-03: "i dont [want] that radium purple in everywhere"). Never orange: that is the bots' own. */
  --signal: #171717;
  --signal-soft: #ececea;
  --signal-ink: #171717;
  --radium: linear-gradient(135deg, #7c3aed 0%, #c026d3 52%, #e8399a 100%);
  --radium-solid: #b03ad6;        /* radium as one colour: the chosen model's tick */
  --radium-glow: rgba(192, 38, 211, .42);

  --send: #171717;                /* the one filled control in the composer */
  --send-ink: #ffffff;

  /* A state has two colours: the fill (a dot, a lamp, a bar) and the ink
     (the word). On paper the fills are too light to read as words - 3.2:1
     for green, 3.4:1 for amber - so every word in a state colour uses its ink. */
  --success: #1e9e5a;  --success-soft: #e6f5ec;  --success-ink: #137240;
  --warning: #b7791f;  --warning-soft: #f8efdc;  --warning-ink: #7d5310;
  --danger:  #d24b3f;  --danger-soft:  #f9e7e4;  --danger-ink:  #b0362d;

  /* Flow: a paper canvas with a faint dot grid, lanes as a breath of tint. */
  --canvas: #fbfbfa;
  --canvas-dot: #d8d8d3;
  --lane: rgba(23, 23, 23, .035);
  --lane-line: #e2e2dd;
  --wire: #b9b9b3;
  --wire-hot: #3a3a37;

  /* The kinds, as tiles on their cards. The same hues in both modes. */
  --tile-service: #c96442;  --tile-endpoint: #6b7280;  --tile-screen: #2f6fed;  --tile-state: #7c5cff;
  --tile-database: #0f9d8f; --tile-model: #5b6b7a;     --tile-logic: #d98a0b;   --tile-package: #8a63d2;
  --tile-tests: #1e9e5a;    --tile-stage: #e0641c;     --tile-queue: #c2410c;   --tile-worker: #4f46e5;
  --tile-training: #d946ef; --tile-dataset: #0891b2;   --tile-checkpoint: #ca8a04; --tile-notebook: #f97316;
  --tile-config: #64748b;   --tile-command: #0ea5e9;   --tile-module: #475569;  --tile-infra: #7c3aed;

  /* Try: a studio backdrop and a silver device on it. */
  --stage: radial-gradient(120% 90% at 50% 0%, #ffffff 0%, #eeeef0 55%, #e2e2e6 100%);
  --stage-floor: rgba(20, 20, 24, .28);
  --silver-a: #f4f4f6;
  --silver-b: #c7c7cd;
  --silver-c: #e6e6ea;
  --silver-edge: #9a9aa2;

  --shadow-sm: 0 1px 2px rgb(20 20 20 / .06);
  --shadow-md: 0 8px 28px rgb(20 20 20 / .10), 0 1px 3px rgb(20 20 20 / .06);
  --shadow-lg: 0 24px 60px rgb(20 20 20 / .16), 0 4px 12px rgb(20 20 20 / .08);

  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 22px;

  /* Geist for the interface: drawn for screens, with a wider aperture than
     Inter and enough character to be recognisable rather than default.
     Newsreader for the headline and the model's prose: an editorial serif
     drawn for screens, whose optical-size axis thickens the strokes as the
     type gets smaller. Geist Mono keeps code in the same family. */
  --sans:  "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: "Newsreader", ui-serif, "Iowan Old Style", Georgia, serif;
  --mono:  "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --pad: clamp(18px, 5vw, 24px);
  color-scheme: light;
}

/* Dark is Codex's black and white (the owner, 2026-10-04: "their black and white vs us ... so much of difference"):
   near-black paper (#0a0a0a; theirs #090909), crisp white ink, neutral greys - no warm cast. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="obsidian"]) {
    --paper: #0a0a0a;
    --selection: #264f78;
    --surface: #141414;
    --surface-muted: #1a1a1a;
    --raised: #161616;
    --ink: #fafafa;
    --ink-invert: #0a0a0a;
    --muted: #9a9a9a;             /* 7:1 on #0a0a0a - secondary, neutral, clearly not the primary ink */
    --faint: #7a7a7a;             /* 4.6:1 - a time or a count still reads */
    --dim: var(--faint);
    --hairline: #1f1f1f;
    --hairline-strong: #2e2e2e;
    --press: #1c1c1c;

    --signal: #fafafa;
    --signal-soft: #1f1f1f;
    --signal-ink: #fafafa;
    --radium: linear-gradient(135deg, #8b5cf6 0%, #d946ef 52%, #f0529c 100%);
    --radium-solid: #d27af5;
    --radium-glow: rgba(217, 70, 239, .5);

    --send: #fafafa;
    --send-ink: #0a0a0a;

    --success: #3fcf7f;  --success-soft: #12291d;  --success-ink: #3fcf7f;
    --warning: #f2c46d;  --warning-soft: #2e2612;  --warning-ink: #f2c46d;
    --danger:  #ff7b7b;  --danger-soft:  #331c1c;  --danger-ink:  #ff7b7b;

    --canvas: #0d0d0d;
    --canvas-dot: #262626;
    --lane: rgba(255, 255, 255, .035);
    --lane-line: #262626;
    --wire: #4a4a4a;
    --wire-hot: #e5e5e5;

    --stage: radial-gradient(120% 90% at 50% 0%, #232325 0%, #131314 55%, #0a0a0a 100%);
    --stage-floor: rgba(0, 0, 0, .7);

    --shadow-sm: 0 1px 2px rgb(0 0 0 / .45);
    --shadow-md: 0 10px 30px rgb(0 0 0 / .5), 0 1px 3px rgb(0 0 0 / .4);
    --shadow-lg: 0 30px 70px rgb(0 0 0 / .65), 0 4px 12px rgb(0 0 0 / .4);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --paper: #0a0a0a;
    --selection: #264f78;
  --surface: #141414;
  --surface-muted: #1a1a1a;
  --raised: #161616;
  --ink: #fafafa;
  --ink-invert: #0a0a0a;
  --muted: #9a9a9a;
  --faint: #7a7a7a;
  --dim: var(--faint);
  --hairline: #1f1f1f;
  --hairline-strong: #2e2e2e;
  --press: #1c1c1c;

  --signal: #fafafa;
  --signal-soft: #1f1f1f;
  --signal-ink: #fafafa;
  --radium: linear-gradient(135deg, #8b5cf6 0%, #d946ef 52%, #f0529c 100%);
  --radium-solid: #d27af5;
  --radium-glow: rgba(217, 70, 239, .5);

  --send: #fafafa;
  --send-ink: #0a0a0a;

  --success: #3fcf7f;  --success-soft: #12291d;  --success-ink: #3fcf7f;
  --warning: #f2c46d;  --warning-soft: #2e2612;  --warning-ink: #f2c46d;
  --danger:  #ff7b7b;  --danger-soft:  #331c1c;  --danger-ink:  #ff7b7b;

  --canvas: #0d0d0d;
  --canvas-dot: #262626;
  --lane: rgba(255, 255, 255, .035);
  --lane-line: #262626;
  --wire: #4a4a4a;
  --wire-hot: #e5e5e5;

  --stage: radial-gradient(120% 90% at 50% 0%, #232325 0%, #131314 55%, #0a0a0a 100%);
  --stage-floor: rgba(0, 0, 0, .7);

  --shadow-sm: 0 1px 2px rgb(0 0 0 / .45);
  --shadow-md: 0 10px 30px rgb(0 0 0 / .5), 0 1px 3px rgb(0 0 0 / .4);
  --shadow-lg: 0 30px 70px rgb(0 0 0 / .65), 0 4px 12px rgb(0 0 0 / .4);
  color-scheme: dark;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  /* Type that is set once and read for an hour deserves the sharper
     rasteriser and the kerning pairs the face was drawn with. */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  font-variant-numeric: tabular-nums;
}

:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 3px;
  border-radius: 6px;
}

/* A hairline should be one device pixel on a retina panel, not two. */
@media (min-resolution: 2dppx) {
  :root { --hairline-width: 0.5px; }
}


/* Obsidian: the older look, kept for whoever chose it. Near-black with a
   cool cast, one violet signal, an aurora for the one action that matters. */
:root[data-theme="obsidian"] {
  --paper: #0b0c11;
  --selection: #3a3f7a;
  --surface: #10121a;
  --surface-muted: #171a24;
  --raised: #12141c;
  --ink: #eef0f6;
  --ink-invert: #0b0c11;
  --muted: #b7bccb;
  --faint: #7f8699;
  --dim: var(--faint);
  --hairline: #1f2330;
  --hairline-strong: #2a2f40;
  --press: #1a1e2a;

  --signal: #8b7cff;
  --signal-soft: #1b1a33;
  --signal-ink: #a99dff;
  --aurora: linear-gradient(135deg, #8b7cff 0%, #5fd0f0 100%);
  --aurora-glow: radial-gradient(60% 50% at 50% 0%, rgba(139, 124, 255, .22) 0%, rgba(95, 208, 240, .08) 45%, transparent 75%);

  --send: #eef0f6;
  --send-ink: #0b0c11;

  --success: #5fd39a;  --success-soft: #0f2a1f;  --success-ink: #5fd39a;
  --warning: #f2c46d;  --warning-soft: #2c2412;  --warning-ink: #f2c46d;
  --danger:  #ff7b7b;  --danger-soft:  #33191b;  --danger-ink:  #ff7b7b;

  --canvas: #0a0b0f;
  --canvas-dot: #23273a;
  --lane: rgba(255, 255, 255, .03);
  --lane-line: #1f2330;
  --wire: #3a3f52;
  --wire-hot: #c9cdda;

  --stage: radial-gradient(120% 90% at 50% 0%, #1c1f2c 0%, #10121a 55%, #08090d 100%);
  --stage-floor: rgba(0, 0, 0, .7);

  --shadow-sm: 0 1px 2px rgb(0 0 0 / .5);
  --shadow-md: 0 14px 40px rgb(0 0 0 / .55), 0 0 0 1px rgb(139 124 255 / .06);
  --shadow-lg: 0 30px 70px rgb(0 0 0 / .7);
  color-scheme: dark;
}