/* Kelas - generated from kelas-ds/project/tokens.json by tools/build-css.ps1. Do not edit. */
:root, [data-theme="space"], [data-theme="dark"] {
  --void: #070a14;
  --surface: #0f1426;
  --surface-raised: #182040;
  --surface-sunken: #090d1a;
  --outline: #27304f;
  --outline-strong: #6d7aa0;
  --ink: #eef1fa;
  --ink-muted: #a3adc9;
  --ink-disabled: #4f5878;
  --hover-layer: #ffffff12;
  --primary: #ff8a3d;
  --primary-hi: #ffb27a;
  --on-primary: #2a1200;
  --primary-container: #3a2316;
  --on-primary-container: #ffd2b0;
  --accent: #5ad1e6;
  --on-accent: #032a31;
  --danger: #ff7b6b;
  --on-danger: #2b0603;
  --danger-container: #47171a;
  --on-danger-container: #ffd6d0;
  --focus: var(--accent);
  --star: #ffffffb3;
  --hull: #e9edf5;
  --hull-shade: #8e98b3;
  --visor: #1b2a4a;
  --flame: #ffd45a;
  --subject-1: #f2b33d;
  --subject-2: #5aa9f0;
  --subject-3: #e0674a;
  --subject-4: #4cc3a0;
  --subject-5: #b49cf2;
  --scrim: #03050c99;
  --red: #ea1b1b;
  --depth-card: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 2px 6px rgba(0, 0, 0, 0.35), 0 12px 32px rgba(0, 0, 0, 0.45);
  --depth-float: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 8px 16px rgba(0, 0, 0, 0.4), 0 24px 56px rgba(0, 0, 0, 0.55);
  --bevel: inset 0 1px 0 rgba(255, 255, 255, 0.45), inset 0 -3px 0 rgba(0, 0, 0, 0.22), 0 6px 16px rgba(255, 138, 61, 0.30);
  --bevel-neutral: inset 0 1px 0 rgba(255, 255, 255, 0.10), inset 0 -2px 0 rgba(0, 0, 0, 0.30), 0 4px 10px rgba(0, 0, 0, 0.35);
  --well: inset 0 2px 6px rgba(0, 0, 0, 0.55), inset 0 -1px 0 rgba(255, 255, 255, 0.05);
  --glow-accent: 0 0 0 1px rgba(90, 209, 230, 0.45), 0 0 18px rgba(90, 209, 230, 0.35);
}
[data-theme="lunar"], [data-theme="light"] {
  --void: #d9dee9;
  --surface: #eef1f6;
  --surface-raised: #ffffff;
  --surface-sunken: #e2e6ef;
  --outline: #c9cfdc;
  --outline-strong: #7a8296;
  --ink: #10152a;
  --ink-muted: #4b5470;
  --ink-disabled: #a3a9b8;
  --hover-layer: #10152a10;
  --primary: #c2410c;
  --primary-hi: #cf4f15;
  --on-primary: #ffffff;
  --primary-container: #ffe3d1;
  --on-primary-container: #6a2300;
  --accent: #0e7490;
  --on-accent: #ffffff;
  --danger: #b42318;
  --on-danger: #ffffff;
  --danger-container: #fde3e0;
  --on-danger-container: #7a1610;
  --focus: var(--accent);
  --star: #10152a33;
  --hull: #f7f8fb;
  --hull-shade: #aab2c4;
  --visor: #1b2a4a;
  --flame: #f5b82e;
  --subject-1: #c98a10;
  --subject-2: #2f6fb0;
  --subject-3: #b4462c;
  --subject-4: #1f8a6c;
  --subject-5: #7454c9;
  --scrim: #10152a66;
  --red: #ea1b1b;
  --depth-card: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 2px 4px rgba(16, 21, 42, 0.08), 0 12px 28px rgba(16, 21, 42, 0.10);
  --depth-float: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 8px 16px rgba(16, 21, 42, 0.12), 0 24px 48px rgba(16, 21, 42, 0.18);
  --bevel: inset 0 1px 0 rgba(255, 255, 255, 0.35), inset 0 -3px 0 rgba(0, 0, 0, 0.22), 0 6px 14px rgba(194, 65, 12, 0.28);
  --bevel-neutral: inset 0 1px 0 rgba(255, 255, 255, 1), inset 0 -2px 0 rgba(16, 21, 42, 0.10), 0 3px 8px rgba(16, 21, 42, 0.12);
  --well: inset 0 2px 4px rgba(16, 21, 42, 0.14), inset 0 -1px 0 rgba(255, 255, 255, 0.9);
  --glow-accent: 0 0 0 1px rgba(14, 116, 144, 0.40), 0 0 12px rgba(14, 116, 144, 0.20);
}
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-full: 999px;
  --font-display: "Sora", "Figtree", system-ui, sans-serif;
  --font-sans: "Figtree", system-ui, sans-serif;
  --font-mono: "Space Mono", ui-monospace, monospace;
}