/* Generated from design-system/design-system.resolver.json by the design-system skill. Do not edit; regenerate. */

:root {
  --palette-primary-blue: #337ab7;
  --palette-primary-blue-700: #2a6496;
  --palette-accent-blue: #4fcccd;
  --palette-dark-blue: #001347;
  --palette-neutral-bg: #f8f9fa;
  --palette-white: #ffffff;
  --palette-dark-gray: #212529;
  --palette-light-gray: #6c757d;
  --palette-slate-600: #5c6670;
  --palette-border-light: #e9ecef;
  --palette-placeholder-bg: #eeeeee;
  --palette-placeholder-text: #666666;
  --palette-navy-1000: #060a18;
  --palette-navy-950: #0b1226;
  --palette-navy-900: #111b38;
  --palette-navy-850: #16224a;
  --palette-navy-800: #1c2a55;
  --palette-navy-700: #26355e;
  --palette-cloud-100: #e6eaf2;
  --palette-cloud-400: #a3aec2;
  --palette-red-700: #b91c1c;
  --palette-red-400: #f87171;
  --palette-green-700: #15803d;
  --palette-green-400: #4ade80;
  --palette-green-800: #11703a;
  --palette-teal: #0099ae;
  --palette-teal-700: #008a9e;
  --palette-orange: #e78817;
  --palette-orange-700: #b8650a;
  --palette-plum: #702340;
  --palette-pink: #e94989;
  --palette-gold: #ffc93c;
  --palette-indigo-1000: #0b0820;
  --palette-indigo-950: #140f2e;
  --palette-indigo-900: #1d1642;
  --palette-indigo-850: #261d57;
  --palette-indigo-ink: #1b1340;
  --palette-indigo-700: #3a2f78;
  --palette-indigo-500: #4d4470;
  --palette-indigo-400: #7d72b0;
  --palette-indigo-300: #8a80b0;
  --palette-lavender: #b9b0dc;
  --palette-lavender-100: #f3efff;
  --palette-lilac: #f3eeff;
  --palette-lilac-300: #e2d8ff;
  --palette-lavender-50: #fbfaff;
  --palette-violet: #6a3df0;
  --palette-deep-purple: #2a0f5c;
  --palette-magenta: #d6246e;
  --palette-magenta-700: #b0185a;
  --palette-magenta-300: #ff5c9a;
  --palette-lime: #b8f400;
  --palette-yellow: #ffd23f;
  --font-sans: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --type-h1: 700 56px/1.2 var(--font-display);
  --type-h1-mobile: 700 32px/1.2 var(--font-display);
  --type-h2: 700 36px/1.3 var(--font-display);
  --type-h2-mobile: 700 24px/1.3 var(--font-display);
  --type-metric: 700 48px/1.3 var(--font-display);
  --type-h3: 600 24px/1.3 var(--font-display);
  --type-h4: 700 20px/1.3 var(--font-display);
  --type-logo: 700 24px/1.2 var(--font-display);
  --type-body: 400 18px/1.6 var(--font-sans);
  --type-small: 400 16px/1.6 var(--font-sans);
  --type-caption: 400 14px/1.5 var(--font-sans);
  --type-ui: 500 16px/1.6 var(--font-sans);
  --type-button: 600 16px/1.6 var(--font-sans);
  --type-button-large: 600 20px/1.6 var(--font-sans);
  --type-code: 400 16px/1.6 var(--font-mono);
  --tracking-logo: -0.5px;
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-28: 28px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-60: 60px;
  --space-80: 80px;
  --space-120: 120px;
  --layout-max-width: 1200px;
  --layout-gutter: 24px;
  --layout-desktop-padding: 80px;
  --layout-mobile-padding: 60px;
  --layout-breakpoint: 768px;
  --layout-measure: 720px;
  --radius: 12px;
  --radius-field: 8px;
  --radius-pill: 999px;
  --border-width: 1px;
  --border-width-strong: 2px;
  --size-target: 44px;
  --size-icon: 24px;
  --size-icon-sm: 16px;
  --size-line: 8px;
  --size-line-quiet: 4px;
  --size-marker: 24px;
  --size-commit: 10px;
  --size-card: 148px;
  --focus-width: 3px;
  --focus-offset: 2px;
  --motion-lift-sm: 2px;
  --motion-lift: 4px;
  --motion-rise: 20px;
  --blur-header: 10px;
  --shadow-subtle: 0px 4px 6px 0px rgb(0 0 0 / 0.05);
  --shadow-hover: 0px 10px 20px 0px rgb(0 0 0 / 0.1);
  --shadow-dialog: 0px 20px 40px 0px rgb(0 0 0 / 0.2);
  --duration-base: 300ms;
  --duration-enter: 500ms;
  --easing-standard: cubic-bezier(0.25, 0.1, 0.25, 1);
  --z-header: 1000;
  --z-dialog: 2000;
  --color-surface: var(--palette-white);
  --color-surface-subtle: var(--palette-neutral-bg);
  --color-surface-raised: var(--palette-white);
  --color-surface-header: rgb(255 255 255 / 0.92);
  --color-footer: var(--palette-dark-blue);
  --color-hero-start: var(--palette-dark-blue);
  --color-hero-end: var(--palette-primary-blue);
  --color-ink: var(--palette-dark-gray);
  --color-ink-strong: var(--palette-dark-blue);
  --color-ink-muted: var(--palette-slate-600);
  --color-link: var(--palette-primary-blue-700);
  --color-link-hover: var(--palette-dark-blue);
  --color-accent: var(--palette-primary-blue);
  --color-highlight: var(--palette-accent-blue);
  --color-border-subtle: var(--palette-border-light);
  --color-border-strong: var(--palette-light-gray);
  --color-focus: var(--palette-primary-blue-700);
  --color-action: var(--palette-primary-blue);
  --color-action-hover: var(--palette-primary-blue-700);
  --color-on-action: var(--palette-white);
  --color-placeholder: var(--palette-placeholder-bg);
  --color-on-placeholder: var(--palette-placeholder-text);
  --color-plate: var(--palette-white);
  --color-on-plate: var(--palette-dark-blue);
  --color-on-dark: var(--palette-white);
  --color-on-dark-muted: rgb(255 255 255 / 0.7);
  --color-on-dark-border: rgb(255 255 255 / 0.8);
  --color-on-dark-subtle: rgb(255 255 255 / 0.1);
  --color-on-dark-field: rgb(255 255 255 / 0.05);
  --color-on-dark-focus: var(--palette-white);
  --color-danger: var(--palette-red-700);
  --color-success: var(--palette-green-700);
  --color-line-active: var(--palette-primary-blue);
  --color-line-quiet: var(--palette-light-gray);
  --color-marker: var(--palette-dark-blue);
  --color-marker-project: var(--palette-primary-blue-700);
  --color-spot-teal: var(--palette-teal-700);
  --color-spot-orange: var(--palette-orange-700);
  --color-spot-berry: var(--palette-plum);
  --color-game-surface: var(--palette-lavender-50);
  --color-game-surface-subtle: var(--palette-lilac);
  --color-game-surface-raised: var(--palette-white);
  --color-game-surface-header: rgb(251 250 255 / 0.92);
  --color-game-footer: var(--palette-indigo-ink);
  --color-game-hero-start: var(--palette-deep-purple);
  --color-game-hero-end: var(--palette-magenta);
  --color-game-ink: var(--palette-indigo-ink);
  --color-game-ink-strong: var(--palette-indigo-ink);
  --color-game-ink-muted: var(--palette-indigo-500);
  --color-game-link: var(--palette-violet);
  --color-game-link-hover: var(--palette-indigo-ink);
  --color-game-accent: var(--palette-violet);
  --color-game-highlight: var(--palette-gold);
  --color-game-border-subtle: var(--palette-lilac-300);
  --color-game-border-strong: var(--palette-indigo-ink);
  --color-game-shadow: var(--palette-indigo-ink);
  --color-game-focus: var(--palette-violet);
  --color-game-action: var(--palette-magenta);
  --color-game-action-hover: var(--palette-magenta-700);
  --color-game-placeholder: var(--palette-lilac-300);
  --color-game-on-placeholder: var(--palette-indigo-500);
  --color-game-success: var(--palette-green-800);
  --color-game-line-active: var(--palette-magenta);
  --color-game-line-quiet: var(--palette-indigo-300);
  --color-game-marker: var(--palette-indigo-ink);
  --color-game-marker-project: var(--palette-violet);
  --color-scrim: rgb(0 19 71 / 0.6);
  --font-display: var(--font-sans);
}

[data-theme="dark"] {
  --color-surface: var(--palette-navy-950);
  --color-surface-subtle: var(--palette-navy-900);
  --color-surface-raised: var(--palette-navy-850);
  --color-surface-header: rgb(11 18 38 / 0.92);
  --color-footer: var(--palette-navy-1000);
  --color-hero-start: var(--palette-dark-blue);
  --color-hero-end: var(--palette-primary-blue);
  --color-ink: var(--palette-cloud-100);
  --color-ink-strong: var(--palette-white);
  --color-ink-muted: var(--palette-cloud-400);
  --color-link: var(--palette-accent-blue);
  --color-link-hover: var(--palette-white);
  --color-accent: var(--palette-accent-blue);
  --color-highlight: var(--palette-accent-blue);
  --color-border-subtle: var(--palette-navy-700);
  --color-border-strong: var(--palette-light-gray);
  --color-focus: var(--palette-accent-blue);
  --color-action: var(--palette-primary-blue);
  --color-action-hover: var(--palette-primary-blue-700);
  --color-on-action: var(--palette-white);
  --color-placeholder: var(--palette-navy-800);
  --color-on-placeholder: var(--palette-cloud-400);
  --color-plate: var(--palette-white);
  --color-on-plate: var(--palette-dark-blue);
  --color-on-dark: var(--palette-white);
  --color-on-dark-muted: rgb(255 255 255 / 0.7);
  --color-on-dark-border: rgb(255 255 255 / 0.8);
  --color-on-dark-subtle: rgb(255 255 255 / 0.1);
  --color-on-dark-field: rgb(255 255 255 / 0.05);
  --color-on-dark-focus: var(--palette-white);
  --color-danger: var(--palette-red-400);
  --color-success: var(--palette-green-400);
  --color-line-active: var(--palette-accent-blue);
  --color-line-quiet: var(--palette-light-gray);
  --color-marker: var(--palette-cloud-100);
  --color-marker-project: var(--palette-accent-blue);
  --color-spot-teal: var(--palette-teal);
  --color-spot-orange: var(--palette-orange);
  --color-spot-berry: var(--palette-pink);
  --color-game-surface: var(--palette-indigo-950);
  --color-game-surface-subtle: var(--palette-indigo-900);
  --color-game-surface-raised: var(--palette-indigo-850);
  --color-game-surface-header: rgb(20 15 46 / 0.92);
  --color-game-footer: var(--palette-indigo-1000);
  --color-game-hero-start: var(--palette-deep-purple);
  --color-game-hero-end: var(--palette-magenta);
  --color-game-ink: var(--palette-lavender-100);
  --color-game-ink-strong: var(--palette-white);
  --color-game-ink-muted: var(--palette-lavender);
  --color-game-link: var(--palette-lime);
  --color-game-link-hover: var(--palette-white);
  --color-game-accent: var(--palette-yellow);
  --color-game-highlight: var(--palette-accent-blue);
  --color-game-border-subtle: var(--palette-indigo-700);
  --color-game-border-strong: var(--palette-lavender);
  --color-game-shadow: var(--palette-violet);
  --color-game-focus: var(--palette-lime);
  --color-game-action: var(--palette-magenta);
  --color-game-action-hover: var(--palette-magenta-700);
  --color-game-placeholder: var(--palette-indigo-900);
  --color-game-on-placeholder: var(--palette-lavender);
  --color-game-success: var(--palette-green-400);
  --color-game-line-active: var(--palette-lime);
  --color-game-line-quiet: var(--palette-indigo-400);
  --color-game-marker: var(--palette-yellow);
  --color-game-marker-project: var(--palette-magenta-300);
  --color-scrim: rgb(6 10 24 / 0.7);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-surface: var(--palette-navy-950);
    --color-surface-subtle: var(--palette-navy-900);
    --color-surface-raised: var(--palette-navy-850);
    --color-surface-header: rgb(11 18 38 / 0.92);
    --color-footer: var(--palette-navy-1000);
    --color-hero-start: var(--palette-dark-blue);
    --color-hero-end: var(--palette-primary-blue);
    --color-ink: var(--palette-cloud-100);
    --color-ink-strong: var(--palette-white);
    --color-ink-muted: var(--palette-cloud-400);
    --color-link: var(--palette-accent-blue);
    --color-link-hover: var(--palette-white);
    --color-accent: var(--palette-accent-blue);
    --color-highlight: var(--palette-accent-blue);
    --color-border-subtle: var(--palette-navy-700);
    --color-border-strong: var(--palette-light-gray);
    --color-focus: var(--palette-accent-blue);
    --color-action: var(--palette-primary-blue);
    --color-action-hover: var(--palette-primary-blue-700);
    --color-on-action: var(--palette-white);
    --color-placeholder: var(--palette-navy-800);
    --color-on-placeholder: var(--palette-cloud-400);
    --color-plate: var(--palette-white);
    --color-on-plate: var(--palette-dark-blue);
    --color-on-dark: var(--palette-white);
    --color-on-dark-muted: rgb(255 255 255 / 0.7);
    --color-on-dark-border: rgb(255 255 255 / 0.8);
    --color-on-dark-subtle: rgb(255 255 255 / 0.1);
    --color-on-dark-field: rgb(255 255 255 / 0.05);
    --color-on-dark-focus: var(--palette-white);
    --color-danger: var(--palette-red-400);
    --color-success: var(--palette-green-400);
    --color-line-active: var(--palette-accent-blue);
    --color-line-quiet: var(--palette-light-gray);
    --color-marker: var(--palette-cloud-100);
    --color-marker-project: var(--palette-accent-blue);
    --color-spot-teal: var(--palette-teal);
    --color-spot-orange: var(--palette-orange);
    --color-spot-berry: var(--palette-pink);
    --color-game-surface: var(--palette-indigo-950);
    --color-game-surface-subtle: var(--palette-indigo-900);
    --color-game-surface-raised: var(--palette-indigo-850);
    --color-game-surface-header: rgb(20 15 46 / 0.92);
    --color-game-footer: var(--palette-indigo-1000);
    --color-game-hero-start: var(--palette-deep-purple);
    --color-game-hero-end: var(--palette-magenta);
    --color-game-ink: var(--palette-lavender-100);
    --color-game-ink-strong: var(--palette-white);
    --color-game-ink-muted: var(--palette-lavender);
    --color-game-link: var(--palette-lime);
    --color-game-link-hover: var(--palette-white);
    --color-game-accent: var(--palette-yellow);
    --color-game-highlight: var(--palette-accent-blue);
    --color-game-border-subtle: var(--palette-indigo-700);
    --color-game-border-strong: var(--palette-lavender);
    --color-game-shadow: var(--palette-violet);
    --color-game-focus: var(--palette-lime);
    --color-game-action: var(--palette-magenta);
    --color-game-action-hover: var(--palette-magenta-700);
    --color-game-placeholder: var(--palette-indigo-900);
    --color-game-on-placeholder: var(--palette-lavender);
    --color-game-success: var(--palette-green-400);
    --color-game-line-active: var(--palette-lime);
    --color-game-line-quiet: var(--palette-indigo-400);
    --color-game-marker: var(--palette-yellow);
    --color-game-marker-project: var(--palette-magenta-300);
    --color-scrim: rgb(6 10 24 / 0.7);
  }
}

/* The project view comes last, so it overrides either theme. */
:root[data-view="projects"] {
  --font-display: ui-rounded, Nunito, Quicksand, system-ui, sans-serif;
  --color-surface: var(--color-game-surface);
  --color-surface-subtle: var(--color-game-surface-subtle);
  --color-surface-raised: var(--color-game-surface-raised);
  --color-surface-header: var(--color-game-surface-header);
  --color-footer: var(--color-game-footer);
  --color-hero-start: var(--color-game-hero-start);
  --color-hero-end: var(--color-game-hero-end);
  --color-ink: var(--color-game-ink);
  --color-ink-strong: var(--color-game-ink-strong);
  --color-ink-muted: var(--color-game-ink-muted);
  --color-link: var(--color-game-link);
  --color-link-hover: var(--color-game-link-hover);
  --color-accent: var(--color-game-accent);
  --color-highlight: var(--color-game-highlight);
  --color-border-subtle: var(--color-game-border-subtle);
  --color-border-strong: var(--color-game-border-strong);
  --color-focus: var(--color-game-focus);
  --color-action: var(--color-game-action);
  --color-action-hover: var(--color-game-action-hover);
  --color-placeholder: var(--color-game-placeholder);
  --color-on-placeholder: var(--color-game-on-placeholder);
  --color-success: var(--color-game-success);
  --color-line-active: var(--color-game-line-active);
  --color-line-quiet: var(--color-game-line-quiet);
  --color-marker: var(--color-game-marker);
  --color-marker-project: var(--color-game-marker-project);
  --radius: 6px;
  --radius-field: 4px;
  --border-width: 2px;
  --shadow-subtle: 4px 4px 0px 0px var(--color-game-shadow);
  --shadow-hover: 6px 6px 0px 0px var(--color-game-shadow);
  --easing-standard: cubic-bezier(0.34, 1.56, 0.64, 1);
}