/*
 * Design tokens mirrored from the Flutter client (lib/core/theme/app_theme.dart)
 * so the web console and the app read as one product.
 */

:root {
  --brand: #1058e8;
  --on-brand: #ffffff;

  --brand-gradient-start: #0a2a6e;
  --brand-gradient-mid: #0d47b8;
  --brand-gradient-end: #1058e8;

  --radius-chip: 12px;
  --radius-banner: 14px;
  --radius-card: 16px;
  --radius-panel: 20px;
  --radius-pill: 999px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;

  --page-pad: 20px;
  --rail-width: 88px;
  --rail-width-extended: 248px;
  --appbar-height: 64px;
  --content-max: 1320px;

  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',
    Arial, 'Noto Sans', sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  --transition: 160ms cubic-bezier(0.2, 0, 0, 1);
}

@media (min-width: 600px) {
  :root {
    --page-pad: 32px;
  }
}

/* Light scheme ----------------------------------------------------------- */

:root,
[data-theme='light'] {
  color-scheme: light;

  --primary: #1058e8;
  --on-primary: #ffffff;
  --primary-container: #d6e3ff;
  --on-primary-container: #001a41;

  --secondary: #2558c7;
  --secondary-container: #dce6ff;
  --on-secondary-container: #001a41;

  --tertiary: #0b6bcb;
  --tertiary-container: #cde7ff;
  --on-tertiary-container: #001e30;

  --error: #ba1a1a;
  --on-error: #ffffff;
  --error-container: #ffdad6;
  --on-error-container: #410002;

  --warning: #a4560b;
  --warning-container: #ffe2c4;
  --on-warning-container: #331000;

  --ok: #1b7a3e;
  --ok-container: #c8f2d6;
  --on-ok-container: #002110;

  --surface: #f3f6fc;
  --on-surface: #121926;
  --on-surface-variant: #424a5c;
  --outline: #727a8c;
  --outline-variant: #c2c8d8;

  --surface-lowest: #ffffff;
  --surface-low: #f7f9fe;
  --surface-container: #eef2fa;
  --surface-high: #e8edf8;
  --surface-highest: #e4eaf6;

  --inverse-surface: #252b38;
  --on-inverse-surface: #f0f3fa;

  --shadow-sm: 0 1px 2px rgba(18, 25, 38, 0.06), 0 1px 3px rgba(18, 25, 38, 0.05);
  --shadow-md: 0 6px 20px rgba(18, 25, 38, 0.08);
  --shadow-lg: 0 18px 48px rgba(18, 25, 38, 0.14);
}

/* Dark scheme ------------------------------------------------------------ */

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

  --primary: #1058e8;
  --on-primary: #ffffff;
  --primary-container: #0a3a9e;
  --on-primary-container: #d6e3ff;

  --secondary: #9bb8ff;
  --secondary-container: #1a3f8f;
  --on-secondary-container: #d6e3ff;

  --tertiary: #7ec8ff;
  --tertiary-container: #004a73;
  --on-tertiary-container: #cde7ff;

  --error: #ffb4ab;
  --on-error: #690005;
  --error-container: #93000a;
  --on-error-container: #ffdad6;

  --warning: #ffb782;
  --warning-container: #6b3400;
  --on-warning-container: #ffe2c4;

  --ok: #7fdca0;
  --ok-container: #0c4a26;
  --on-ok-container: #c8f2d6;

  --surface: #0b1220;
  --on-surface: #e4eaf6;
  --on-surface-variant: #b8c0d4;
  --outline: #8690a4;
  --outline-variant: #3a4356;

  --surface-lowest: #080d16;
  --surface-low: #121a28;
  --surface-container: #162033;
  --surface-high: #1c2638;
  --surface-highest: #222e42;

  --inverse-surface: #e4eaf6;
  --on-inverse-surface: #252b38;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 18px 48px rgba(0, 0, 0, 0.6);
}

@media (prefers-color-scheme: dark) {
  [data-theme='system'] {
    color-scheme: dark;

    --primary: #1058e8;
    --on-primary: #ffffff;
    --primary-container: #0a3a9e;
    --on-primary-container: #d6e3ff;

    --secondary: #9bb8ff;
    --secondary-container: #1a3f8f;
    --on-secondary-container: #d6e3ff;

    --tertiary: #7ec8ff;
    --tertiary-container: #004a73;
    --on-tertiary-container: #cde7ff;

    --error: #ffb4ab;
    --on-error: #690005;
    --error-container: #93000a;
    --on-error-container: #ffdad6;

    --warning: #ffb782;
    --warning-container: #6b3400;
    --on-warning-container: #ffe2c4;

    --ok: #7fdca0;
    --ok-container: #0c4a26;
    --on-ok-container: #c8f2d6;

    --surface: #0b1220;
    --on-surface: #e4eaf6;
    --on-surface-variant: #b8c0d4;
    --outline: #8690a4;
    --outline-variant: #3a4356;

    --surface-lowest: #080d16;
    --surface-low: #121a28;
    --surface-container: #162033;
    --surface-high: #1c2638;
    --surface-highest: #222e42;

    --inverse-surface: #e4eaf6;
    --on-inverse-surface: #252b38;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 18px 48px rgba(0, 0, 0, 0.6);
  }
}