/* Executr tokens — vendored from ../../design-system/tokens.css (generated from tokens.json).
   Light is the :root default. Dark follows the visitor's system setting, and [data-theme]
   overrides it in both directions. Add no colours here that are not in tokens.json. */
:root {
  --color-surface: #FAF9F6;
  --color-surface-raised: #FFFEFB;
  --color-surface-sunken: #F2F0EA;
  --color-border: #E4E1D9;
  --color-border-strong: #858B95;
  --color-navy: #16324F;
  --color-navy-raised: #1F4268;
  --color-navy-line: #3A5677;
  --color-on-navy: #FAF9F6;
  --color-on-navy-muted: #BFD0E2;
  --color-teal: #2F8A8A;
  --color-teal-strong: #26716F;
  --color-teal-deep: #1F5D5B;
  --color-on-teal: #FFFFFF;
  --color-teal-tint: #E6F2F1;
  --color-ink: #1F2937;
  --color-ink-muted: #5B6472;
  --color-success: #3B7A57;
  --color-success-tint: #E8F2EC;
  --color-warning: #D97706;
  --color-warning-text: #A34F06;
  --color-warning-tint: #FDF3E4;
  --color-danger: #B42318;
  --color-on-danger: #FFFFFF;
  --color-danger-tint: #FBEAE8;
  --color-scrim: rgba(15, 27, 41, 0.5);
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-full: 999px;
  --shadow-card: 0 1px 2px rgba(22, 50, 79, 0.05), 0 4px 16px rgba(22, 50, 79, 0.04);
  --shadow-overlay: 0 12px 40px rgba(22, 50, 79, 0.16);
  --font-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-sans: Figtree, "Segoe UI", system-ui, -apple-system, sans-serif;
  --text-display: 500 40px/48px var(--font-serif);
  --text-heading-1: 500 30px/38px var(--font-serif);
  --text-heading-2: 500 22px/30px var(--font-serif);
  --text-heading-3: 600 17px/24px var(--font-sans);
  --text-body: 400 16px/26px var(--font-sans);
  --text-body-sm: 400 14px/22px var(--font-sans);
  --text-label: 600 14px/20px var(--font-sans);
  --text-caption: 500 12px/16px var(--font-sans);
  --text-figure: 600 32px/40px var(--font-sans);
}

/* The dark values from tokens.json, applied to the system preference as well as the
   explicit choice. --color-navy-raised and --color-navy-line are the two frame shades
   the app bar needs; they sit between navy and border in both themes. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-surface: #0F1B29;
    --color-surface-raised: #16263A;
    --color-surface-sunken: #0B1520;
    --color-border: #2A3D53;
    --color-border-strong: #6B7F96;
    --color-navy: #1B3A5C;
    --color-navy-raised: #24486E;
    --color-navy-line: #3A5677;
    --color-on-navy: #FAF9F6;
    --color-on-navy-muted: #A3ABB7;
    --color-teal: #5FB3AE;
    --color-teal-strong: #5FB3AE;
    --color-teal-deep: #8CCBC7;
    --color-on-teal: #0F1B29;
    --color-teal-tint: #173A3E;
    --color-ink: #EDEBE6;
    --color-ink-muted: #A3ABB7;
    --color-success: #6FBF91;
    --color-success-tint: #173326;
    --color-warning: #F2A93B;
    --color-warning-text: #F2A93B;
    --color-warning-tint: #3A2A12;
    --color-danger: #F97066;
    --color-on-danger: #0F1B29;
    --color-danger-tint: #3D1D1F;
    --color-scrim: rgba(5, 10, 16, 0.66);
    --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-overlay: 0 12px 40px rgba(0, 0, 0, 0.55);
  }
}

:root[data-theme="dark"] {
  --color-surface: #0F1B29;
  --color-surface-raised: #16263A;
  --color-surface-sunken: #0B1520;
  --color-border: #2A3D53;
  --color-border-strong: #6B7F96;
  --color-navy: #1B3A5C;
  --color-navy-raised: #24486E;
  --color-navy-line: #3A5677;
  --color-on-navy: #FAF9F6;
  --color-on-navy-muted: #A3ABB7;
  --color-teal: #5FB3AE;
  --color-teal-strong: #5FB3AE;
  --color-teal-deep: #8CCBC7;
  --color-on-teal: #0F1B29;
  --color-teal-tint: #173A3E;
  --color-ink: #EDEBE6;
  --color-ink-muted: #A3ABB7;
  --color-success: #6FBF91;
  --color-success-tint: #173326;
  --color-warning: #F2A93B;
  --color-warning-text: #F2A93B;
  --color-warning-tint: #3A2A12;
  --color-danger: #F97066;
  --color-on-danger: #0F1B29;
  --color-danger-tint: #3D1D1F;
  --color-scrim: rgba(5, 10, 16, 0.66);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-overlay: 0 12px 40px rgba(0, 0, 0, 0.55);
}

/* Type styles, one class per scale step. */
.ex-t-display { font: var(--text-display); letter-spacing: -0.01em; }
.ex-t-heading-1 { font: var(--text-heading-1); }
.ex-t-heading-2 { font: var(--text-heading-2); }
.ex-t-heading-3 { font: var(--text-heading-3); }
.ex-t-body { font: var(--text-body); }
.ex-t-body-sm { font: var(--text-body-sm); }
.ex-t-label { font: var(--text-label); }
.ex-t-caption { font: var(--text-caption); }
.ex-t-figure { font: var(--text-figure); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
