/* Design tokens — the web app's entire visual identity.
 *
 * Restyling the platform means editing this file and nothing else:
 * `app.css` and the templates refer to these custom properties and never
 * to a literal colour, size, radius or duration. See
 * ../../../docs/components/webapp.md ("Styling").
 */

:root {
  /* Dark is the default; the light block below is a straight override of
     the palette tokens. `color-scheme` is what makes the browser's own
     widgets (scrollbars, form controls) match. */
  color-scheme: dark;

  /* --- Palette: surfaces --- */
  --color-bg: #0b0e14;
  --color-surface: #141926;
  --color-surface-raised: #1c2231;
  --color-border: #262d3d;
  --color-border-strong: #39425a;
  --color-stream-bg: #000000;

  /* --- Palette: text --- */
  --color-text: #e7ecf5;
  --color-text-muted: #98a2b8;

  /* --- Palette: brand ---
     `accent` is a fill (white text sits on it, hence the darker violet);
     `accent-text` is the same brand colour made legible *as* text on the
     page background. They are separate because no single violet does
     both at an accessible contrast. */
  --color-accent: #6c47ff;
  --color-accent-hover: #7d5cff;
  --color-accent-text: #a996ff;
  --color-on-accent: #ffffff;
  --color-accent-soft: rgba(108, 71, 255, 0.16);
  --color-focus: #8b6cff;

  /* --- Palette: state --- */
  --color-success: #46c05a;
  --color-warning: #e3b341;
  --color-danger: #ff6b5e;

  /* Ambient glow behind the page. Set to `none` for a flat look. */
  --bg-glow: radial-gradient(
    60rem 32rem at 50% -14rem,
    var(--color-accent-soft),
    transparent 70%
  );

  /* --- Typography --- */
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --text-sm: 0.875rem;
  --text-md: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.5rem;
  --text-2xl: 2rem;
  --text-3xl: 2.75rem;
  --leading: 1.6;

  /* --- Spacing scale --- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;

  /* --- Shape and depth --- */
  --radius-sm: 0.375rem;
  --radius-md: 0.625rem;
  --radius-lg: 1rem;
  --radius-pill: 999px;
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4), 0 12px 32px rgba(0, 0, 0, 0.28);

  /* --- Layout --- */
  --layout-width: 44rem;
  --layout-width-wide: 78rem;

  /* --- Motion --- */
  --transition: 120ms ease;
}

@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;

    --color-bg: #f5f6fb;
    --color-surface: #ffffff;
    --color-surface-raised: #eef0f7;
    --color-border: #dde1ec;
    --color-border-strong: #c2c8d8;

    --color-text: #131720;
    --color-text-muted: #5a6479;

    --color-accent-text: #5732d8;
    --color-accent-soft: rgba(108, 71, 255, 0.12);

    --color-success: #1a7f37;
    --color-warning: #9a6700;
    --color-danger: #cf222e;

    --shadow-card: 0 1px 2px rgba(19, 23, 32, 0.06),
      0 12px 32px rgba(19, 23, 32, 0.08);
  }
}