@font-face {
  font-family: "Google Sans Flex";
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url("assets/fonts/google-sans-flex-variable.ttf") format("truetype-variations");
}

@property --sp-color-background {
  syntax: "<color>";
  inherits: true;
  initial-value: #f2f2f2;
}

@property --sp-color-on-background {
  syntax: "<color>";
  inherits: true;
  initial-value: #111111;
}

@property --sp-color-surface {
  syntax: "<color>";
  inherits: true;
  initial-value: #fafafa;
}

@property --sp-color-shell-frame {
  syntax: "<color>";
  inherits: true;
  initial-value: #fafafa;
}

@property --sp-color-surface-dim {
  syntax: "<color>";
  inherits: true;
  initial-value: #d8d8d8;
}

@property --sp-color-surface-bright {
  syntax: "<color>";
  inherits: true;
  initial-value: #ffffff;
}

@property --sp-color-surface-container-lowest {
  syntax: "<color>";
  inherits: true;
  initial-value: #ffffff;
}

@property --sp-color-surface-container-low {
  syntax: "<color>";
  inherits: true;
  initial-value: #f5f5f5;
}

@font-face {
  font-family: "Rubik";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("assets/fonts/rubik-variable.ttf") format("truetype-variations");
}

@font-face {
  font-family: "CaskaydiaCove NF";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/caskaydia-cove-nf-regular.ttf") format("truetype");
}

@font-face {
  font-family: "CaskaydiaCove NF";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/caskaydia-cove-nf-bold.ttf") format("truetype");
}

@font-face {
  font-family: "JetBrains Mono Nerd Font";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/jetbrains-mono-nf-regular.ttf") format("truetype");
}

@font-face {
  font-family: "JetBrains Mono Nerd Font";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/jetbrains-mono-nf-bold.ttf") format("truetype");
}

@font-face {
  font-family: "Material Symbols Rounded";
  font-style: normal;
  font-weight: 100 700;
  font-display: block;
  src: url("assets/fonts/material-symbols-rounded-variable.woff2") format("woff2-variations");
}

@property --sp-color-surface-container {
  syntax: "<color>";
  inherits: true;
  initial-value: #ededed;
}

@property --sp-color-surface-container-high {
  syntax: "<color>";
  inherits: true;
  initial-value: #e2e2e2;
}

@property --sp-color-surface-container-highest {
  syntax: "<color>";
  inherits: true;
  initial-value: #d8d8d8;
}

@property --sp-color-surface-variant {
  syntax: "<color>";
  inherits: true;
  initial-value: #e2e2e2;
}

@property --sp-color-outline-variant {
  syntax: "<color>";
  inherits: true;
  initial-value: #bfc0c0;
}

@property --sp-color-on-surface {
  syntax: "<color>";
  inherits: true;
  initial-value: #111111;
}

@property --sp-color-on-surface-variant {
  syntax: "<color>";
  inherits: true;
  initial-value: #535353;
}

@property --sp-color-outline {
  syntax: "<color>";
  inherits: true;
  initial-value: #777777;
}

@property --sp-color-surface-tint {
  syntax: "<color>";
  inherits: true;
  initial-value: #202020;
}

@property --sp-color-primary {
  syntax: "<color>";
  inherits: true;
  initial-value: #202020;
}

@property --sp-color-on-primary {
  syntax: "<color>";
  inherits: true;
  initial-value: #ffffff;
}

@property --sp-color-primary-container {
  syntax: "<color>";
  inherits: true;
  initial-value: #dedede;
}

@property --sp-color-secondary {
  syntax: "<color>";
  inherits: true;
  initial-value: #505050;
}

@property --sp-color-on-secondary {
  syntax: "<color>";
  inherits: true;
  initial-value: #ffffff;
}

@property --sp-color-secondary-container {
  syntax: "<color>";
  inherits: true;
  initial-value: #ededed;
}

@property --sp-color-tertiary {
  syntax: "<color>";
  inherits: true;
  initial-value: #676767;
}

@property --sp-color-on-tertiary {
  syntax: "<color>";
  inherits: true;
  initial-value: #ffffff;
}

@property --sp-color-tertiary-container {
  syntax: "<color>";
  inherits: true;
  initial-value: #f0f0f0;
}

:root {
  color-scheme: only light;

  /* caelestia-dots/shell tokens.hpp at 688142ea */
  --sp-radius-full: 1000px;
  --sp-radius-extra-small: 4px;
  --sp-radius-small: 8px;
  --sp-radius-medium: 12px;
  --sp-radius-normal: var(--sp-radius-medium);
  --sp-radius-large: 16px;
  --sp-radius-large-increased: 20px;
  --sp-radius-extra-large: 28px;
  --sp-radius-extra-large-increased: 32px;
  --sp-radius-extra-extra-large: 48px;

  --sp-space-extra-small: 4px;
  --sp-space-small: 8px;
  --sp-space-smaller: 12px;
  --sp-space-normal: 12px;
  --sp-space-larger: 16px;
  --sp-space-large: 20px;
  --sp-space-extra-large: 28px;

  --sp-padding-extra-small: 4px;
  --sp-padding-small: 8px;
  --sp-padding-smaller: 12px;
  --sp-padding-normal: 12px;
  --sp-padding-larger: 16px;
  --sp-padding-large: 16px;
  --sp-padding-large-increased: 20px;
  --sp-padding-extra-large: 28px;
  --sp-padding-extra-large-increased: 32px;

  --sp-font-sans: "Google Sans Flex", "Segoe UI Variable", "Segoe UI", sans-serif;
  --sp-font-mono: "CaskaydiaCove NF", "Cascadia Mono", Consolas, monospace;
  --sp-font-terminal: "JetBrains Mono Nerd Font", "JetBrains Mono", "Cascadia Mono", Consolas, monospace;
  --sp-font-clock: "Rubik", "Google Sans Flex", "Segoe UI", sans-serif;
  --sp-font-workspace: "Rubik", "Google Sans Flex", "Segoe UI", sans-serif;
  --sp-font-icon: "Material Symbols Rounded", var(--sp-font-sans);
  --sp-type-axis-sans: "ROND" 25;
  --sp-font-small: 11px;
  --sp-font-smaller: 12px;
  --sp-font-normal: 14px;
  --sp-font-larger: 16px;
  --sp-font-large: 22px;
  --sp-font-extra-large: 32px;
  --sp-font-title: 32px;
  --sp-type-headline-large: 500 32px / 1.18 var(--sp-font-sans);
  --sp-type-headline-medium: 500 28px / 1.18 var(--sp-font-sans);
  --sp-type-headline-small: 500 24px / 1.2 var(--sp-font-sans);
  --sp-type-title-large: 500 22px / 1.2 var(--sp-font-sans);
  --sp-type-title-medium: 500 16px / 1.25 var(--sp-font-sans);
  --sp-type-title-small: 500 14px / 1.25 var(--sp-font-sans);
  --sp-type-body-large: 400 16px / 1.4 var(--sp-font-sans);
  --sp-type-body-medium: 400 14px / 1.4 var(--sp-font-sans);
  --sp-type-body-small: 400 12px / 1.4 var(--sp-font-sans);
  --sp-type-label-large: 500 14px / 1.25 var(--sp-font-sans);
  --sp-type-label-medium: 500 12px / 1.25 var(--sp-font-sans);
  --sp-type-label-small: 400 11px / 1.25 var(--sp-font-sans);

  --sp-duration-small: 200ms;
  --sp-duration-normal: 400ms;
  --sp-duration-large: 600ms;
  --sp-duration-extra-large: 1000ms;
  --sp-duration-expressive-fast-spatial: 350ms;
  --sp-duration-expressive-default-spatial: 500ms;
  --sp-duration-expressive-slow-spatial: 650ms;
  --sp-duration-expressive-fast-effects: 150ms;
  --sp-duration-expressive-default-effects: 200ms;
  --sp-duration-expressive-slow-effects: 300ms;
  --sp-duration-wallpaper-profile: 500ms;
  --sp-duration-expressive-effects: var(--sp-duration-expressive-default-effects);
  --sp-motion-short: var(--sp-duration-small);

  --sp-curve-standard: cubic-bezier(0.2, 0, 0, 1);
  --sp-curve-standard-accel: cubic-bezier(0.3, 0, 1, 1);
  --sp-curve-standard-decel: cubic-bezier(0, 0, 0, 1);
  --sp-curve-emphasized-accel: cubic-bezier(0.3, 0, 0.8, 0.15);
  --sp-curve-emphasized-decel: cubic-bezier(0.05, 0.7, 0.1, 1);
  --sp-curve-expressive-fast-spatial: cubic-bezier(0.42, 1.67, 0.21, 0.9);
  --sp-curve-expressive-default-spatial: cubic-bezier(0.38, 1.21, 0.22, 1);
  --sp-curve-expressive-effects: cubic-bezier(0.34, 0.8, 0.34, 1);
  --sp-curve-expressive-slow-effects: cubic-bezier(0.34, 0.88, 0.34, 1);
  --sp-ease-emphasized: var(--sp-curve-expressive-default-spatial);

  --sp-opacity-transparency-base: 0.85;
  --sp-opacity-transparency-layer: 0.4;
  --sp-opacity-hover: 0.08;
  --sp-opacity-pressed: 0.1;
  --sp-opacity-panel-shadow: 0.7;
  --sp-opacity-session-scrim: 0.5;

  --sp-blur-panel-shadow: 15px;
  --sp-blur-slider-handle-shadow: 5px;
  --sp-blur-lock-background: 64px;

  --sp-wallpaper-fallback: #111;

  /* User-selected neutral default. Wallpaper and manual modes replace these
     roles early through the single theme owner in shell-tokens.js. */
  --sp-color-background: #f2f2f2;
  --sp-color-on-background: #111;
  --sp-color-surface: #fafafa;
  --sp-color-surface-dim: #d8d8d8;
  --sp-color-surface-bright: #fff;
  --sp-color-surface-container-lowest: #fff;
  --sp-color-surface-container-low: #f5f5f5;
  --sp-color-surface-container: #ededed;
  --sp-color-surface-container-high: #e2e2e2;
  --sp-color-surface-container-highest: #d8d8d8;
  --sp-color-on-surface: #111;
  --sp-color-surface-variant: #e2e2e2;
  --sp-color-on-surface-variant: #535353;
  --sp-color-outline: #777;
  --sp-color-outline-variant: #bfc0c0;
  --sp-color-shadow: #000;
  --sp-color-scrim: #000;
  --sp-color-surface-tint: #202020;
  --sp-color-primary: #202020;
  --sp-color-on-primary: #fff;
  --sp-color-primary-container: #dedede;
  --sp-color-on-primary-container: #171717;
  --sp-color-secondary: #505050;
  --sp-color-on-secondary: #fff;
  --sp-color-secondary-container: #ededed;
  --sp-color-on-secondary-container: #202020;
  --sp-color-tertiary: #676767;
  --sp-color-on-tertiary: #fff;
  --sp-color-tertiary-container: #f0f0f0;
  --sp-color-on-tertiary-container: #202020;
  --sp-color-error: #ba1a1a;
  --sp-color-on-error: #fff;

  /* Modern relationships, with the user-approved compact evade.im rail override. */
  --sp-border-thickness: 10px;
  --sp-border-rounding: 25px;
  --sp-bar-inner: 30px;
  --sp-bar-outer: 50px;
  --sp-bar-group-padding: 5px;
  --sp-bar-icon-size: 18px;
  --sp-workspace-count: 5;
  --sp-bar-preview: 400px;
  --sp-bar-tray-menu: 300px;
  --sp-bar-battery: 250px;
  --sp-osd-width: 30px;
  --sp-osd-height: 150px;
  --sp-session-button: 80px;

  --sp-shadow-panel: 0 0 var(--sp-blur-panel-shadow) rgb(0 0 0 / var(--sp-opacity-panel-shadow));

  /* Centralized shell layer order keeps transient surfaces predictable. */
  --sp-layer-wallpaper: 0;
  --sp-layer-workspace: 20;
  --sp-layer-bar: 30;
  --sp-layer-terminal: 45;
  --sp-layer-drawer: 55;
  --sp-layer-sidebar: 62;
  --sp-layer-controls: 66;
  --sp-layer-modal: 72;
  --sp-layer-lock: 100;

  /* Shared semantic aliases keep retained functional surfaces on one palette. */
  --ui-font-sans: var(--sp-font-sans);
  --ui-ink: var(--sp-color-on-surface);
  --ui-muted: rgb(17 17 17 / 0.62);
  --ui-border: var(--sp-color-outline-variant);
  --ui-surface: var(--sp-color-surface);
  --ui-panel-radius: var(--sp-radius-normal);
  --ui-workspace-radius: var(--sp-radius-large);
  --ui-control-size: var(--sp-bar-inner);
  --ui-blur-full: var(--sp-blur-panel-shadow);
  --ui-blur-balanced: var(--sp-blur-slider-handle-shadow);
  --ui-shadow-elevated: var(--sp-shadow-panel);
  --ui-motion-fast: var(--sp-duration-small);
  --ui-motion-standard: var(--sp-duration-normal);
  --ui-motion-ease: var(--sp-curve-standard);
}

html,
body {
  font-family: var(--sp-font-sans);
  font-synthesis: none;
  font-optical-sizing: auto;
  font-variation-settings: "ROND" 25;
}

.caelestia-shell :where(*) {
  font-variation-settings: "ROND" 25;
}

.sp-icon,
.material-symbols-rounded,
.top-drawer-tab-icon {
  font-family: var(--sp-font-icon);
  font-style: normal;
  font-weight: 400;
  font-feature-settings: "liga";
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
  letter-spacing: normal;
  line-height: 1;
  text-transform: none;
  white-space: nowrap;
  -webkit-font-smoothing: antialiased;
}

[aria-current="page"] > .sp-icon,
[aria-selected="true"] > .top-drawer-tab-icon {
  font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 24;
}