@import url("https://fonts.googleapis.com/css2?family=Caveat:wght@400;500;600;700&family=Ubuntu:ital,wght@0,400;0,500;0,700;1,400&display=swap");

:root,
html[data-theme="light"] {
  color-scheme: light;
  --ckm-color-bg: #f5f7fb;
  --ckm-color-surface: #ffffff;
  --ckm-color-surface-soft: #eef3f9;
  --ckm-color-surface-strong: #e6edf6;
  --ckm-color-text: #172033;
  --ckm-color-muted: #667085;
  --ckm-color-border: #d9e2ee;
  --ckm-color-accent: #1769ff;
  --ckm-color-accent-hover: #0f56d9;
  --ckm-color-accent-contrast: #ffffff;
  --ckm-color-success: #137a4b;
  --ckm-color-success-soft: #e9f8f0;
  --ckm-color-warning: #9b6a08;
  --ckm-color-warning-soft: #fff6dc;
  --ckm-color-danger: #b42318;
  --ckm-color-danger-soft: #fff0ee;
  --ckm-color-test: #7a4a00;
  --ckm-color-test-soft: #fff1c2;
  --ckm-color-focus: #1769ff;
  --ckm-color-shadow: rgba(23, 32, 51, 0.12);
  --ckm-color-overlay: rgba(23, 32, 51, 0.56);
  --ckm-color-page-overlay: rgba(255, 255, 255, 0.86);
  --ckm-color-media-bg: #000000;
  --ckm-space-0: 0;
  --ckm-space-1: 0.25rem;
  --ckm-space-2: 0.5rem;
  --ckm-space-3: 0.75rem;
  --ckm-space-4: 1rem;
  --ckm-space-5: 1.25rem;
  --ckm-space-6: 1.5rem;
  --ckm-space-7: 2rem;
  --ckm-space-8: 2.5rem;
  --ckm-space-9: 3rem;
  --ckm-space-10: 4rem;
  --ckm-radius-sm: 0.6rem;
  --ckm-radius-md: 0.9rem;
  --ckm-radius-lg: 1.25rem;
  --ckm-radius-pill: 999rem;
  --ckm-border-width: 1px;
  --ckm-control-height: 2.75rem;
  --ckm-layout-max: 76rem;
  --ckm-layout-wide: 94rem;
  --ckm-font-body: "Ubuntu", Arial, sans-serif;
  --ckm-font-heading: "Caveat", "Bad Script", cursive;
  --ckm-font-xs: 0.75rem;
  --ckm-font-sm: 0.875rem;
  --ckm-font-md: 1rem;
  --ckm-font-lg: 1.125rem;
  --ckm-font-xl: 1.4rem;
  --ckm-font-2xl: 2rem;
  --ckm-font-3xl: clamp(2rem, 4vw, 3.6rem);
  --ckm-font-score: clamp(3.2rem, 8vw, 7rem);
  --ckm-font-projector-title: clamp(2.6rem, 5vw, 5.5rem);
  --ckm-font-projector-score: clamp(5rem, 12vw, 11rem);
  --ckm-shadow-card: 0 1.1rem 3.6rem var(--ckm-color-shadow);
}

html[data-theme="dark"] {
  color-scheme: dark;
  --ckm-color-bg: #0c111b;
  --ckm-color-surface: #141c29;
  --ckm-color-surface-soft: #1b2635;
  --ckm-color-surface-strong: #243247;
  --ckm-color-text: #f5f8fc;
  --ckm-color-muted: #a8b3c4;
  --ckm-color-border: #33445d;
  --ckm-color-accent: #6ea8ff;
  --ckm-color-accent-hover: #91bcff;
  --ckm-color-accent-contrast: #07101d;
  --ckm-color-success: #58d59b;
  --ckm-color-success-soft: #123b2b;
  --ckm-color-warning: #ffd166;
  --ckm-color-warning-soft: #3c3217;
  --ckm-color-danger: #ff8e86;
  --ckm-color-danger-soft: #421f21;
  --ckm-color-test: #ffd166;
  --ckm-color-test-soft: #3b3012;
  --ckm-color-focus: #8cb9ff;
  --ckm-color-shadow: rgba(0, 0, 0, 0.42);
  --ckm-color-overlay: rgba(0, 0, 0, 0.72);
  --ckm-color-page-overlay: rgba(12, 17, 27, 0.90);
  --ckm-color-media-bg: #000000;
}

html[data-projector="true"][data-theme="light"] {
  --ckm-color-bg: #ffffff;
  --ckm-color-surface: #ffffff;
  --ckm-color-surface-soft: #f0f0f0;
  --ckm-color-surface-strong: #dddddd;
  --ckm-color-text: #000000;
  --ckm-color-muted: #252525;
  --ckm-color-border: #111111;
  --ckm-color-accent: #003dcc;
  --ckm-color-accent-hover: #002b91;
  --ckm-color-accent-contrast: #ffffff;
  --ckm-color-success: #006b38;
  --ckm-color-success-soft: #e7fff1;
  --ckm-color-warning: #6e4c00;
  --ckm-color-warning-soft: #fff1b8;
  --ckm-color-danger: #a40000;
  --ckm-color-danger-soft: #ffe2e2;
  --ckm-color-test: #5c3b00;
  --ckm-color-test-soft: #ffe79a;
  --ckm-color-focus: #003dcc;
  --ckm-color-shadow: rgba(0, 0, 0, 0.18);
}

html[data-projector="true"][data-theme="dark"] {
  --ckm-color-bg: #000000;
  --ckm-color-surface: #050505;
  --ckm-color-surface-soft: #111111;
  --ckm-color-surface-strong: #1e1e1e;
  --ckm-color-text: #ffffff;
  --ckm-color-muted: #e0e0e0;
  --ckm-color-border: #f3f3f3;
  --ckm-color-accent: #ffe66d;
  --ckm-color-accent-hover: #fff09c;
  --ckm-color-accent-contrast: #000000;
  --ckm-color-success: #7dffb8;
  --ckm-color-success-soft: #06351d;
  --ckm-color-warning: #ffe66d;
  --ckm-color-warning-soft: #3c3200;
  --ckm-color-danger: #ff8a80;
  --ckm-color-danger-soft: #3b0909;
  --ckm-color-test: #ffe66d;
  --ckm-color-test-soft: #3c3200;
  --ckm-color-focus: #ffe66d;
  --ckm-color-shadow: rgba(255, 255, 255, 0.16);
}