/* Space Works design tokens — brand guidelines v1.
 Colours are space-separated sRGB triplets: use as rgb(var(--color-accent)) or rgb(var(--color-accent) / 0.5).
 Light is the default; add class "dark" on <html> for dark mode. */

@font-face {
  font-family: "Unbounded";
  src: url("../fonts/Unbounded-Variable.woff2") format("woff2");
  font-weight: 500 600;
  font-style: normal;
  font-display: swap;
}

/* Gilroy: only the FREE weights ship (Light 300, ExtraBold 800; decision 299). Everything else is Outfit (OFL). */
@font-face {
  font-family: "Gilroy";
  src: url("../fonts/Gilroy-ExtraBold.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Gilroy";
  src: url("../fonts/Gilroy-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Outfit";
  src: url("../fonts/Outfit-Variable.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
:root {
  --font-display: "Gilroy", sans-serif;
  --font-sans: "Outfit", sans-serif;
  --font-accent: "Unbounded", "Outfit", sans-serif;
  --brand-deep-ink: #142C2A;
  --brand-maker-teal: #006E63;
  --brand-workshop-orange: #FF7447;
  --brand-citron: #DFFF8F;
  --brand-sky-blue: #B5CDFF;
  --brand-warm-yellow: #FFD447;
  --brand-warm-cream: #FFF4E8;

  --color-bg: 255 244 232;
  --color-surface: 246 236 224;
  --color-panel: 255 255 255;
  --color-hover: 239 230 219;
  --color-line: 213 208 198;
  --color-outline: 130 138 131;
  --color-ink: 20 44 42;
  --color-muted: 91 104 99;
  --color-focus: 0 110 99;
  --color-accent: 0 110 99;
  --color-accent-hover: 2 103 93;
  --color-accent-active: 4 97 88;
  --color-on-accent: 255 244 232;
  --color-accent-soft: 224 238 236;
  --color-accent-ink: 0 110 99;
  --color-brand: 0 110 99;
  --color-brand-hover: 2 103 93;
  --color-brand-active: 4 97 88;
  --color-on-brand: 255 244 232;
  --color-brand-soft: 224 238 236;
  --color-brand-ink: 0 110 99;
  --color-brand-boundary: 0 110 99;
  --color-emphasis: 255 116 71;
  --color-emphasis-hover: 255 129 87;
  --color-emphasis-active: 255 142 103;
  --color-on-emphasis: 20 44 42;
  --color-emphasis-soft: 255 238 233;
  --color-success: 223 255 143;
  --color-success-hover: 203 234 133;
  --color-success-active: 182 213 123;
  --color-on-success: 20 44 42;
  --color-success-soft: 251 255 242;
  --color-success-ink: 83 109 73;
  --color-warn: 255 212 71;
  --color-warn-hover: 232 195 68;
  --color-warn-active: 208 178 65;
  --color-on-warn: 20 44 42;
  --color-warn-soft: 255 250 233;
  --color-warn-ink: 105 104 52;
  --color-info: 181 205 255;
  --color-info-hover: 165 189 234;
  --color-info-active: 149 173 212;
  --color-on-info: 20 44 42;
  --color-info-soft: 246 249 255;
  --color-info-ink: 81 105 123;
  --color-danger: 185 28 28;
  --color-danger-hover: 153 27 27;
  --color-danger-active: 133 30 29;
  --color-on-danger: 255 244 232;
  --color-danger-line: 252 165 165;
  --color-sidebar: 223 255 143;
  --color-sidebar-hover: 242 255 210;
  --color-sidebar-active: 0 110 99;
  --color-scrim: 20 44 42; /* dims the page behind dialogs */
  --shadow-color: 20 44 42;
}

:root.dark {
  --color-bg: 0 0 0;
  --color-surface: 11 11 11;
  --color-panel: 20 20 20;
  --color-hover: 28 28 28;
  --color-line: 44 44 44;
  --color-outline: 120 120 120;
  --color-ink: 255 244 232;
  --color-muted: 172 172 172;
  --color-focus: 223 255 143;
  --color-accent: 0 110 99;
  --color-accent-hover: 2 103 93;
  --color-accent-active: 4 97 88;
  --color-on-accent: 255 244 232;
  --color-accent-soft: 18 29 28;
  --color-accent-ink: 128 177 166;
  --color-brand: 0 110 99;
  --color-brand-hover: 2 103 93;
  --color-brand-active: 4 97 88;
  --color-on-brand: 255 244 232;
  --color-brand-soft: 18 29 28;
  --color-brand-ink: 128 177 166;
  --color-brand-boundary: 128 177 166;
  --color-emphasis: 255 116 71;
  --color-emphasis-hover: 255 129 87;
  --color-emphasis-active: 255 142 103;
  --color-on-emphasis: 20 44 42;
  --color-emphasis-soft: 34 26 23;
  --color-success: 223 255 143;
  --color-success-hover: 203 234 133;
  --color-success-active: 182 213 123;
  --color-on-success: 20 44 42;
  --color-success-soft: 32 34 27;
  --color-success-ink: 233 252 170;
  --color-warn: 255 212 71;
  --color-warn-hover: 232 195 68;
  --color-warn-active: 208 178 65;
  --color-on-warn: 20 44 42;
  --color-warn-soft: 34 32 23;
  --color-warn-ink: 255 222 119;
  --color-info: 181 205 255;
  --color-info-hover: 165 189 234;
  --color-info-active: 149 173 212;
  --color-on-info: 20 44 42;
  --color-info-soft: 30 31 34;
  --color-info-ink: 203 217 248;
  --color-danger: 252 165 165;
  --color-danger-hover: 253 185 182;
  --color-danger-active: 253 201 195;
  --color-on-danger: 20 44 42;
  --color-danger-line: 124 98 97;
  --color-sidebar: 11 11 11;
  --color-sidebar-hover: 28 28 28;
  --color-sidebar-active: 0 110 99;
  --color-scrim: 0 0 0; /* ink is Cream in dark and would lighten the page, so the scrim is black */
  --shadow-color: 0 0 0;
}

/* Motion tokens (SpaceWorks 0.12.0, mirrors frontend/src/styles/motionTokens.css).
   Durations: fast = press/hover/exit, base = overlays and indicators, slow = route settle.
   Curves: standard = most movement, enter = arrivals (decelerate), exit = departures (accelerate).
   Distances are tokens so kiosk and TV screens zero them and keep only the fade. */
:root {
  --sw-dur-fast: 120ms;
  --sw-dur-base: 180ms;
  --sw-dur-slow: 240ms;
  --sw-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --sw-ease-enter: cubic-bezier(0.16, 1, 0.3, 1);
  --sw-ease-exit: cubic-bezier(0.4, 0, 1, 1);
  --sw-enter-y: 8px;
  --sw-pop-scale: 0.98;
  --sw-pop-offset: 4px;
  --sw-slide-x: 100%;
}
.sw-kiosk, .sw-tv { --sw-enter-y: 0px; --sw-pop-scale: 1; --sw-pop-offset: 0px; --sw-slide-x: 0%; }
@media (prefers-reduced-motion: reduce) {
  :root { --sw-dur-fast: 0ms; --sw-dur-base: 0ms; --sw-dur-slow: 0ms; --sw-enter-y: 0px; --sw-pop-scale: 1; --sw-pop-offset: 0px; --sw-slide-x: 0%; }
}

/* Chart tokens (Design System v2.0, SW-380; mirrors frontend/src/styles/chrome.css). RGB triplets like the colour
   tokens: use rgb(var(--chart-1)). Series 1-5 are the five bright brand colours, identical in light and dark;
   --chart-edge (a 1px mark edge / 4px line casing) carries the 3:1 contrast. Danger is not a series colour. */
:root {
  --chart-1: 0 110 99;
  --chart-2: 255 116 71;
  --chart-3: 223 255 143;
  --chart-4: 181 205 255;
  --chart-5: 255 212 71;
  --chart-edge: 20 44 42;
  --chart-danger: var(--color-danger);
}
:root.dark {
  --chart-edge: 255 244 232;
}