/* The console's design tokens: the app's placeholder palette
   (App/Weyzzer/Core/DesignSystem/AppColors.swift) as CSS custom
   properties, light and dark. A look is decided here, as a token, and
   nowhere else; main.css only names tokens. Served at /tokens.css
   (weyzzer_console::TOKENS_CSS). When Design/ settles the brand, this
   file changes with AppColors.swift. */
:root {
  color-scheme: light dark;

  /* Palette: the same raw values as AppColors.swift's `Palette`. */
  --palette-ink: #1c1c1e;
  --palette-paper: #ffffff;
  --palette-paper-dark: #000000;
  --palette-accent: #0a84ff;
  --palette-accent-dark: #409cff;
  --palette-danger: #ff3b30;
  --palette-surface: #f2f2f7;
  --palette-surface-dark: #1c1c1e;
  --palette-free: #1fa94a;
  --palette-free-dark: #30d158;
  --palette-beta: #9f3fd6;
  --palette-beta-dark: #bf5af2;

  /* Semantic colours: `Color.App`, then what a web page adds on it. */
  --colour-background: var(--palette-paper);
  --colour-text: var(--palette-ink);
  --colour-accent: var(--palette-accent);
  --colour-danger: var(--palette-danger);
  /* Text on an accent fill (`onAccent`): paper in both schemes. */
  --colour-on-accent: var(--palette-paper);
  /* Cards, input fields, table headers (`surface`). */
  --colour-surface: var(--palette-surface);
  /* Something done or positive (`free`). */
  --colour-free: var(--palette-free);
  /* The Beta badge (`beta`). */
  --colour-beta: var(--palette-beta);
  /* Secondary text (`secondaryText`: the text at Opacity.secondary). */
  --opacity-secondary: 70%;
  --opacity-tint: 16%;
  --colour-secondary: color-mix(in srgb, var(--colour-text) var(--opacity-secondary), transparent);
  /* A line between rows and around cards. */
  --colour-rule: color-mix(in srgb, var(--colour-text) 12%, var(--colour-background));
  /* A row under the pointer. */
  --colour-hover: color-mix(in srgb, var(--colour-accent) 7%, var(--colour-background));
  /* Error text: the danger colour, darkened enough to read on paper. */
  --colour-error: color-mix(in srgb, var(--colour-danger) 80%, var(--colour-text));
  /* Badge fills: the colour at Opacity.tint behind its own text. */
  --colour-accent-faint: color-mix(in srgb, var(--colour-accent) var(--opacity-tint), transparent);
  --colour-free-faint: color-mix(in srgb, var(--colour-free) var(--opacity-tint), transparent);
  --colour-beta-faint: color-mix(in srgb, var(--colour-beta) var(--opacity-tint), transparent);
  --colour-danger-faint: color-mix(in srgb, var(--colour-danger) var(--opacity-tint), transparent);
  --colour-text-faint: color-mix(in srgb, var(--colour-text) var(--opacity-tint), transparent);

  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, monospace;
  --font-size-body: 15px;
  --font-size-small: 13px;
  --font-size-title: 22px;
  --font-size-heading: 17px;

  --space-hairline: 2px;
  --space-tight: 4px;
  --space-snug: 8px;
  --space-normal: 12px;
  --space-loose: 24px;
  --space-wide: 40px;

  --radius-small: 6px;
  --radius-card: 10px;
  --rule-width: 1px;

  /* The widest the page grows, and a single column form. */
  --size-page-width: 1200px;
  --size-form-width: 360px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --colour-background: var(--palette-paper-dark);
    --colour-text: var(--palette-paper);
    --colour-accent: var(--palette-accent-dark);
    --colour-surface: var(--palette-surface-dark);
    --colour-free: var(--palette-free-dark);
    --colour-beta: var(--palette-beta-dark);
    --colour-rule: color-mix(in srgb, var(--colour-text) 18%, var(--colour-background));
    --colour-hover: color-mix(in srgb, var(--colour-accent) 14%, var(--colour-background));
    --colour-error: color-mix(in srgb, var(--colour-danger) 85%, var(--colour-text));
  }
}