ottyl/webapp/src/index.css

@import "tailwindcss";

/* Author-origin display utilities (flex, grid, ...) beat the UA [hidden]
 * rule regardless of specificity, so collapsible sections that pair
 * `hidden` with a display utility never actually hide. Force it back. */
[hidden] {
  display: none !important;
}

/*
 * Theme system: every visual role the app uses (surfaces, borders, text,
 * danger banners, accent highlights) is a plain CSS custom property here,
 * bridged into real Tailwind utilities (bg-surface-0, text-text-muted,
 * border-accent, ...) via `@theme inline`. Components use those utilities
 * instead of hardcoded palette classes (bg-neutral-950, text-sky-400, ...),
 * so re-declaring the `--c-*` variables under a `html.<theme>` selector
 * re-skins the whole app with no per-component changes.
 *
 * Derivation: `dark`/`grey` share one true black-based neutral (S=0) scale,
 * `light` is its exact lightness mirror — these three stay grey throughout.
 * Each named theme (red/green/blue/yellow/pink/orange) instead tints its
 * whole surface/border/text scale in its own hue at low saturation (so the
 * chrome itself reads as "a shade of red", not grey-with-a-red-light), and
 * pulls its accent trio from two *other* hues on the wheel: --c-accent and
 * --c-accent-text share the base hue's complement (base+180°), while
 * --c-accent-soft sits at a split-complement (~base+150°/-150°) — a
 * "composite" accent distinct from the straight complement. To add a new
 * themed variant: pick a base hue H, a complement C = H+180, and a
 * composite K = H+150 (mod 360), then fill --c-surface-, --c-border-,
 * --c-text- as hsl(H, ...) at the saturation/lightness steps below, accent
 * + accent-text as hsl(C, ...), and accent-soft as hsl(K, ...).
 */
:root {
  color-scheme: light dark;

  --c-surface-0: #0a0a0a;
  --c-surface-1: #171717;
  --c-surface-2: #262626;

  --c-border: #262626;
  --c-border-soft: #404040;
  --c-border-faint: #171717;
  --c-border-strong: #a3a3a3;

  --c-text: #f5f5f5;
  --c-text-secondary: #d4d4d4;
  --c-text-muted: #a3a3a3;
  --c-text-subtle: #737373;
  --c-text-faint: #525252;
  --c-text-faintest: #404040;

  --c-danger-bg: #450a0a;
  --c-danger-border: #7f1d1d;
  --c-danger-text: #f87171;
  --c-danger-text-strong: #fca5a5;

  --c-accent: #0ea5e9;
  --c-accent-soft: #0369a1;
  --c-accent-text: #7dd3fc;
}

/* Exact lightness mirror of :root's neutral-950..50 scale (Tailwind neutral,
   steps flipped: 950<->50, 900<->100, 800<->200, 700<->300, 600<->400). */
html.light {
  --c-surface-0: #fafafa;
  --c-surface-1: #f5f5f5;
  --c-surface-2: #e5e5e5;

  --c-border: #e5e5e5;
  --c-border-soft: #d4d4d4;
  --c-border-faint: #f5f5f5;
  --c-border-strong: #525252;

  --c-text: #171717;
  --c-text-secondary: #404040;
  --c-text-muted: #525252;
  --c-text-subtle: #737373;
  --c-text-faint: #a3a3a3;
  --c-text-faintest: #d4d4d4;

  --c-danger-bg: #fee2e2;
  --c-danger-border: #fca5a5;
  --c-danger-text: #b91c1c;
  --c-danger-text-strong: #991b1b;

  --c-accent: #0284c7;
  --c-accent-soft: #7dd3fc;
  --c-accent-text: #0369a1;
}

/* Canonical greyscale theme: identical neutral scale to :root (dark), so
   every other theme's derivation above is measured against this one. */
html.grey {
  --c-surface-0: #0a0a0a;
  --c-surface-1: #171717;
  --c-surface-2: #262626;

  --c-border: #262626;
  --c-border-soft: #404040;
  --c-border-faint: #171717;
  --c-border-strong: #a3a3a3;

  --c-text: #f5f5f5;
  --c-text-secondary: #d4d4d4;
  --c-text-muted: #a3a3a3;
  --c-text-subtle: #737373;
  --c-text-faint: #525252;
  --c-text-faintest: #404040;

  --c-accent: #38bdf8;
  --c-accent-soft: #0369a1;
  --c-accent-text: #7dd3fc;
}

/* base hue 0 (red): surfaces/borders/text tinted red; accent complement 180
   (cyan), accent-soft composite 150 (spring green) */
html.red {
  --c-surface-0: hsl(0 32% 10%);
  --c-surface-1: hsl(0 28% 16%);
  --c-surface-2: hsl(0 26% 22%);

  --c-border: hsl(0 24% 24%);
  --c-border-soft: hsl(0 22% 33%);
  --c-border-faint: hsl(0 28% 16%);
  --c-border-strong: hsl(0 15% 62%);

  --c-text: hsl(0 15% 94%);
  --c-text-secondary: hsl(0 12% 82%);
  --c-text-muted: hsl(0 10% 65%);
  --c-text-subtle: hsl(0 8% 50%);
  --c-text-faint: hsl(0 8% 38%);
  --c-text-faintest: hsl(0 10% 28%);

  --c-accent: hsl(180 70% 62%);
  --c-accent-soft: hsl(150 55% 34%);
  --c-accent-text: hsl(180 75% 80%);
}

/* base hue 140 (green): surfaces/borders/text tinted green; accent complement
   320 (magenta), accent-soft composite 290 (purple) */
html.green {
  --c-surface-0: hsl(140 32% 10%);
  --c-surface-1: hsl(140 28% 16%);
  --c-surface-2: hsl(140 26% 22%);

  --c-border: hsl(140 24% 24%);
  --c-border-soft: hsl(140 22% 33%);
  --c-border-faint: hsl(140 28% 16%);
  --c-border-strong: hsl(140 15% 62%);

  --c-text: hsl(140 15% 94%);
  --c-text-secondary: hsl(140 12% 82%);
  --c-text-muted: hsl(140 10% 65%);
  --c-text-subtle: hsl(140 8% 50%);
  --c-text-faint: hsl(140 8% 38%);
  --c-text-faintest: hsl(140 10% 28%);

  --c-accent: hsl(320 70% 62%);
  --c-accent-soft: hsl(290 55% 34%);
  --c-accent-text: hsl(320 75% 80%);
}

/* base hue 210 (blue): surfaces/borders/text tinted blue; accent complement
   30 (orange), accent-soft composite 0 (red) */
html.blue {
  --c-surface-0: hsl(210 32% 10%);
  --c-surface-1: hsl(210 28% 16%);
  --c-surface-2: hsl(210 26% 22%);

  --c-border: hsl(210 24% 24%);
  --c-border-soft: hsl(210 22% 33%);
  --c-border-faint: hsl(210 28% 16%);
  --c-border-strong: hsl(210 15% 62%);

  --c-text: hsl(210 15% 94%);
  --c-text-secondary: hsl(210 12% 82%);
  --c-text-muted: hsl(210 10% 65%);
  --c-text-subtle: hsl(210 8% 50%);
  --c-text-faint: hsl(210 8% 38%);
  --c-text-faintest: hsl(210 10% 28%);

  --c-accent: hsl(30 70% 62%);
  --c-accent-soft: hsl(0 55% 34%);
  --c-accent-text: hsl(30 75% 80%);
}

/* base hue 50 (yellow): surfaces/borders/text tinted yellow; accent
   complement 230 (blue), accent-soft composite 200 (azure) */
html.yellow {
  --c-surface-0: hsl(50 32% 10%);
  --c-surface-1: hsl(50 28% 16%);
  --c-surface-2: hsl(50 26% 22%);

  --c-border: hsl(50 24% 24%);
  --c-border-soft: hsl(50 22% 33%);
  --c-border-faint: hsl(50 28% 16%);
  --c-border-strong: hsl(50 15% 62%);

  --c-text: hsl(50 15% 94%);
  --c-text-secondary: hsl(50 12% 82%);
  --c-text-muted: hsl(50 10% 65%);
  --c-text-subtle: hsl(50 8% 50%);
  --c-text-faint: hsl(50 8% 38%);
  --c-text-faintest: hsl(50 10% 28%);

  --c-accent: hsl(230 70% 62%);
  --c-accent-soft: hsl(200 55% 34%);
  --c-accent-text: hsl(230 75% 80%);
}

/* base hue 330 (pink): surfaces/borders/text tinted pink; accent complement
   150 (spring green), accent-soft composite 120 (green) */
html.pink {
  --c-surface-0: hsl(330 32% 10%);
  --c-surface-1: hsl(330 28% 16%);
  --c-surface-2: hsl(330 26% 22%);

  --c-border: hsl(330 24% 24%);
  --c-border-soft: hsl(330 22% 33%);
  --c-border-faint: hsl(330 28% 16%);
  --c-border-strong: hsl(330 15% 62%);

  --c-text: hsl(330 15% 94%);
  --c-text-secondary: hsl(330 12% 82%);
  --c-text-muted: hsl(330 10% 65%);
  --c-text-subtle: hsl(330 8% 50%);
  --c-text-faint: hsl(330 8% 38%);
  --c-text-faintest: hsl(330 10% 28%);

  --c-accent: hsl(150 70% 62%);
  --c-accent-soft: hsl(120 55% 34%);
  --c-accent-text: hsl(150 75% 80%);
}

/* base hue 30 (orange): surfaces/borders/text tinted orange; accent
   complement 210 (blue), accent-soft composite 180 (cyan) */
html.orange {
  --c-surface-0: hsl(30 32% 10%);
  --c-surface-1: hsl(30 28% 16%);
  --c-surface-2: hsl(30 26% 22%);

  --c-border: hsl(30 24% 24%);
  --c-border-soft: hsl(30 22% 33%);
  --c-border-faint: hsl(30 28% 16%);
  --c-border-strong: hsl(30 15% 62%);

  --c-text: hsl(30 15% 94%);
  --c-text-secondary: hsl(30 12% 82%);
  --c-text-muted: hsl(30 10% 65%);
  --c-text-subtle: hsl(30 8% 50%);
  --c-text-faint: hsl(30 8% 38%);
  --c-text-faintest: hsl(30 10% 28%);

  --c-accent: hsl(210 70% 62%);
  --c-accent-soft: hsl(180 55% 34%);
  --c-accent-text: hsl(210 75% 80%);
}

@theme inline {
  --color-surface-0: var(--c-surface-0);
  --color-surface-1: var(--c-surface-1);
  --color-surface-2: var(--c-surface-2);

  --color-border: var(--c-border);
  --color-border-soft: var(--c-border-soft);
  --color-border-faint: var(--c-border-faint);
  --color-border-strong: var(--c-border-strong);

  --color-text: var(--c-text);
  --color-text-secondary: var(--c-text-secondary);
  --color-text-muted: var(--c-text-muted);
  --color-text-subtle: var(--c-text-subtle);
  --color-text-faint: var(--c-text-faint);
  --color-text-faintest: var(--c-text-faintest);

  --color-danger-bg: var(--c-danger-bg);
  --color-danger-border: var(--c-danger-border);
  --color-danger-text: var(--c-danger-text);
  --color-danger-text-strong: var(--c-danger-text-strong);

  --color-accent: var(--c-accent);
  --color-accent-soft: var(--c-accent-soft);
  --color-accent-text: var(--c-accent-text);
}

html,
body,
#root {
  height: 100%;
  margin: 0;
}

body {
  @apply bg-surface-0 text-text;
  font: 14px/1.5 ui-monospace, Consolas, monospace;
}