/*
 * Design tokens ("Indigo night"). Every colour, size and font in the UI
 * comes from here, so this is the file to change for a different look.
 * Light theme first, dark theme below. Setting data-theme="light" or
 * data-theme="dark" on <html> overrides the system preference.
 *
 * The source is design/tokens.css, shared by every application with this
 * look; edit it there (see design/README.md).
 */
@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/inter-var-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "Major Mono Display";
  src: url("/assets/fonts/major-mono-display-latin.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "JetBrains Mono";
  src: url("/assets/fonts/jetbrains-mono-var-latin.woff2") format("woff2");
  font-weight: 100 800;
  font-display: swap;
}

:root {
  color-scheme: light;

  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --font-brand: "Major Mono Display", "JetBrains Mono", ui-monospace, monospace;

  /* Wordmark. Major Mono Display has one weight, so --brand-weight stays
     400; a heavier value would only make the browser fake a bold. */
  --brand-weight: 400;
  --brand-size: 1.375rem;
  --brand-tracking: -0.02em;

  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-base: 0.875rem;
  --text-md: 0.9375rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.75rem;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;

  --radius-sm: 6px;
  --radius: 8px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-pill: 999px;

  --content-width: 75rem;
  --control-height: 2.5rem;
  --touch-target: 2.75rem;

  /* Page */
  --color-bg: #f5f6fb;
  --color-surface: #ffffff;
  --color-surface-sunken: #f5f6fb;
  --color-code-bg: #fbfbfc;
  --color-border: #e3e6eb;
  --color-border-strong: #d5d9e0;
  --color-input-border: #878f9e;
  --color-divider: #eef0f3;

  /* Text */
  --color-text: #16181d;
  --color-text-2: #4a5260;
  --color-text-muted: #5b6472;

  /* Header */
  --color-header-bg: #1e1b4b;
  --color-header-text: #ffffff;
  --color-header-muted: #c7c4f0;
  --color-header-accent: #a5b4fc;
  --color-header-input-bg: rgba(255, 255, 255, 0.1);
  --color-header-input-border: rgba(255, 255, 255, 0.18);
  --color-header-divider: rgba(255, 255, 255, 0.5);

  /* Main colour: buttons, links, active tab, focus */
  --color-primary: #4f46e5;
  --color-primary-strong: #3730a3;
  --color-primary-soft: #eef0ff;
  --color-primary-text: #ffffff;

  /* Second colour: explanation icons, avatars, meters */
  --color-second: #0d9488;
  --color-second-strong: #0f766e;
  --color-second-soft: #e6f6f4;

  /* Status: signature pills and alerts keep these meanings everywhere */
  --color-success: #126b3e;
  --color-success-bg: #e5f4ec;
  --color-warning: #7a4a00;
  --color-warning-bg: #fff1d6;
  --color-warning-bar: #b35c00;
  --color-neutral: #4a5260;
  --color-neutral-bg: #eef0f3;
  --color-danger: #b42318;
  --color-danger-bg: #fdecea;
  --color-danger-border: #f3c5c0;
  --color-danger-text: #ffffff;

  --color-focus: #4f46e5;
  --shadow-menu: 0 8px 24px rgba(22, 24, 29, 0.14);
  --color-backdrop: rgba(22, 24, 29, 0.45);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --color-bg: #0f0e1f;
    --color-surface: #181731;
    --color-surface-sunken: #12112a;
    --color-code-bg: #12112a;
    --color-border: #2c2a4a;
    --color-border-strong: #3a3860;
    --color-input-border: #6e6c94;
    --color-divider: #24223f;

    --color-text: #ececf4;
    --color-text-2: #c4c6d6;
    --color-text-muted: #a3a6bf;

    --color-header-bg: #17153a;
    --color-header-text: #ffffff;
    --color-header-muted: #c7c4f0;
    --color-header-accent: #a5b4fc;

    --color-primary: #8b93ff;
    --color-primary-strong: #b4baff;
    --color-primary-soft: #26245a;
    --color-primary-text: #0f0e1f;

    --color-second: #2dd4bf;
    --color-second-strong: #5eead4;
    --color-second-soft: #113a37;

    --color-success: #7ee2a8;
    --color-success-bg: #123524;
    --color-warning: #fcd58a;
    --color-warning-bg: #3a2a08;
    --color-warning-bar: #f59e0b;
    --color-neutral: #c4c6d6;
    --color-neutral-bg: #2a2945;
    --color-danger: #ff9b91;
    --color-danger-bg: #3d1214;
    --color-danger-border: #6b2420;
    --color-danger-text: #2a0906;

    --color-focus: #a5b4fc;
    --shadow-menu: 0 8px 24px rgba(0, 0, 0, 0.5);
    --color-backdrop: rgba(0, 0, 0, 0.6);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --color-bg: #0f0e1f;
  --color-surface: #181731;
  --color-surface-sunken: #12112a;
  --color-code-bg: #12112a;
  --color-border: #2c2a4a;
  --color-border-strong: #3a3860;
  --color-input-border: #6e6c94;
  --color-divider: #24223f;

  --color-text: #ececf4;
  --color-text-2: #c4c6d6;
  --color-text-muted: #a3a6bf;

  --color-header-bg: #17153a;
  --color-header-text: #ffffff;
  --color-header-muted: #c7c4f0;
  --color-header-accent: #a5b4fc;

  --color-primary: #8b93ff;
  --color-primary-strong: #b4baff;
  --color-primary-soft: #26245a;
  --color-primary-text: #0f0e1f;

  --color-second: #2dd4bf;
  --color-second-strong: #5eead4;
  --color-second-soft: #113a37;

  --color-success: #7ee2a8;
  --color-success-bg: #123524;
  --color-warning: #fcd58a;
  --color-warning-bg: #3a2a08;
  --color-warning-bar: #f59e0b;
  --color-neutral: #c4c6d6;
  --color-neutral-bg: #2a2945;
  --color-danger: #ff9b91;
  --color-danger-bg: #3d1214;
  --color-danger-border: #6b2420;
  --color-danger-text: #2a0906;

  --color-focus: #a5b4fc;
  --shadow-menu: 0 8px 24px rgba(0, 0, 0, 0.5);
  --color-backdrop: rgba(0, 0, 0, 0.6);
}