/*
 * Theme: Obsidian
 * Dark slate, electric accent — sharp, modern, minimal
 * Source: #7B8FA8
 */

/* === Typography === */
:root {
  --md-sys-font-family-display: 'Inter', 'Roboto', sans-serif;
  --md-sys-font-family-body: 'Inter', 'Roboto', sans-serif;
  --md-sys-font-family-mono: 'JetBrains Mono', 'Fira Code', monospace;

  --md-sys-typescale-display-large-size: 57px;
  --md-sys-typescale-display-large-weight: 400;
  --md-sys-typescale-display-large-tracking: -0.25px;
  --md-sys-typescale-display-large-line-height: 64px;
  --md-sys-typescale-display-medium-size: 45px;
  --md-sys-typescale-display-medium-weight: 400;
  --md-sys-typescale-display-medium-tracking: 0px;
  --md-sys-typescale-display-medium-line-height: 52px;
  --md-sys-typescale-display-small-size: 36px;
  --md-sys-typescale-display-small-weight: 400;
  --md-sys-typescale-display-small-tracking: 0px;
  --md-sys-typescale-display-small-line-height: 44px;
  --md-sys-typescale-headline-large-size: 32px;
  --md-sys-typescale-headline-large-weight: 400;
  --md-sys-typescale-headline-large-tracking: 0px;
  --md-sys-typescale-headline-large-line-height: 40px;
  --md-sys-typescale-headline-medium-size: 28px;
  --md-sys-typescale-headline-medium-weight: 400;
  --md-sys-typescale-headline-medium-tracking: 0px;
  --md-sys-typescale-headline-medium-line-height: 36px;
  --md-sys-typescale-headline-small-size: 24px;
  --md-sys-typescale-headline-small-weight: 400;
  --md-sys-typescale-headline-small-tracking: 0px;
  --md-sys-typescale-headline-small-line-height: 32px;
  --md-sys-typescale-title-large-size: 22px;
  --md-sys-typescale-title-large-weight: 500;
  --md-sys-typescale-title-large-tracking: 0px;
  --md-sys-typescale-title-large-line-height: 28px;
  --md-sys-typescale-title-medium-size: 16px;
  --md-sys-typescale-title-medium-weight: 500;
  --md-sys-typescale-title-medium-tracking: 0.15px;
  --md-sys-typescale-title-medium-line-height: 24px;
  --md-sys-typescale-title-small-size: 14px;
  --md-sys-typescale-title-small-weight: 500;
  --md-sys-typescale-title-small-tracking: 0.1px;
  --md-sys-typescale-title-small-line-height: 20px;
  --md-sys-typescale-body-large-size: 16px;
  --md-sys-typescale-body-large-weight: 400;
  --md-sys-typescale-body-large-tracking: 0.5px;
  --md-sys-typescale-body-large-line-height: 24px;
  --md-sys-typescale-body-medium-size: 14px;
  --md-sys-typescale-body-medium-weight: 400;
  --md-sys-typescale-body-medium-tracking: 0.25px;
  --md-sys-typescale-body-medium-line-height: 20px;
  --md-sys-typescale-body-small-size: 12px;
  --md-sys-typescale-body-small-weight: 400;
  --md-sys-typescale-body-small-tracking: 0.4px;
  --md-sys-typescale-body-small-line-height: 16px;
  --md-sys-typescale-label-large-size: 14px;
  --md-sys-typescale-label-large-weight: 500;
  --md-sys-typescale-label-large-tracking: 0.1px;
  --md-sys-typescale-label-large-line-height: 20px;
  --md-sys-typescale-label-medium-size: 12px;
  --md-sys-typescale-label-medium-weight: 500;
  --md-sys-typescale-label-medium-tracking: 0.5px;
  --md-sys-typescale-label-medium-line-height: 16px;
  --md-sys-typescale-label-small-size: 11px;
  --md-sys-typescale-label-small-weight: 500;
  --md-sys-typescale-label-small-tracking: 0.5px;
  --md-sys-typescale-label-small-line-height: 16px;
}

/* === Spacing === */
:root {
  --md-sys-spacing-0: 0px;
  --md-sys-spacing-1: 4px;
  --md-sys-spacing-2: 8px;
  --md-sys-spacing-3: 12px;
  --md-sys-spacing-4: 16px;
  --md-sys-spacing-5: 20px;
  --md-sys-spacing-6: 24px;
  --md-sys-spacing-7: 28px;
  --md-sys-spacing-8: 32px;
  --md-sys-spacing-9: 36px;
  --md-sys-spacing-10: 40px;
  --md-sys-spacing-11: 44px;
  --md-sys-spacing-12: 48px;
  --md-sys-spacing-16: 64px;
}

/* === Elevation === */
:root {
  --md-sys-elevation-0: none;
  --md-sys-elevation-1: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.14);
  --md-sys-elevation-2: 0 2px 6px rgba(0,0,0,0.12), 0 2px 4px rgba(0,0,0,0.14);
  --md-sys-elevation-3: 0 4px 12px rgba(0,0,0,0.12), 0 4px 8px rgba(0,0,0,0.14);
  --md-sys-elevation-4: 0 6px 18px rgba(0,0,0,0.12), 0 8px 10px rgba(0,0,0,0.14);
  --md-sys-elevation-5: 0 10px 24px rgba(0,0,0,0.12), 0 12px 14px rgba(0,0,0,0.14);
}

/* === Shape === */
:root {
  --md-sys-shape-corner-none: 0px;
  --md-sys-shape-corner-extra-small: 4px;
  --md-sys-shape-corner-small: 8px;
  --md-sys-shape-corner-medium: 12px;
  --md-sys-shape-corner-large: 16px;
  --md-sys-shape-corner-extra-large: 28px;
  --md-sys-shape-corner-full: 9999px;
}

/* === Motion — Duration === */
:root {
  --md-sys-motion-duration-short1: 50ms;
  --md-sys-motion-duration-short2: 100ms;
  --md-sys-motion-duration-short3: 150ms;
  --md-sys-motion-duration-short4: 200ms;
  --md-sys-motion-duration-medium1: 250ms;
  --md-sys-motion-duration-medium2: 300ms;
  --md-sys-motion-duration-medium3: 350ms;
  --md-sys-motion-duration-medium4: 400ms;
  --md-sys-motion-duration-long1: 450ms;
  --md-sys-motion-duration-long2: 500ms;
  --md-sys-motion-duration-extra-long1: 550ms;
  --md-sys-motion-duration-extra-long2: 600ms;
  --md-sys-motion-duration-extra-long3: 650ms;
  --md-sys-motion-duration-extra-long4: 700ms;
}

/* === Motion — Easing === */
:root {
  --md-sys-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --md-sys-motion-easing-standard-accelerate: cubic-bezier(0.3, 0, 0.8, 0.15);
  --md-sys-motion-easing-standard-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1);
  --md-sys-motion-easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
  --md-sys-motion-easing-emphasized-accelerate: cubic-bezier(0.3, 0, 0.8, 0.15);
  --md-sys-motion-easing-emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1);
  --md-sys-motion-easing-legacy: cubic-bezier(0.4, 0, 0.2, 1);
  --md-sys-motion-easing-linear: linear;
}

/*
 * Theme: Obsidian
 * Dark slate, electric accent — sharp, modern, minimal
 * Generated from source color: #7B8FA8
 */
:root[data-theme="obsidian"] {
  --md-sys-color-primary: #BACFE5;
  --md-sys-color-on-primary: #2C3E50;
  --md-sys-color-primary-container: #3D5167;
  --md-sys-color-on-primary-container: #D6E5F5;
  --md-sys-color-secondary: #C6CBD9;
  --md-sys-color-on-secondary: #31343C;
  --md-sys-color-secondary-container: #474B55;
  --md-sys-color-on-secondary-container: #E3E6EF;
  --md-sys-color-tertiary: #CDC6E2;
  --md-sys-color-on-tertiary: #342F45;
  --md-sys-color-tertiary-container: #4B465C;
  --md-sys-color-on-tertiary-container: #E9E2FF;
  --md-sys-color-error: #FFB4AB;
  --md-sys-color-on-error: #690005;
  --md-sys-color-error-container: #93000A;
  --md-sys-color-on-error-container: #FFDAD6;
  --md-sys-color-surface: #11151C;
  --md-sys-color-on-surface: #DCE1E9;
  --md-sys-color-surface-variant: #454D56;
  --md-sys-color-on-surface-variant: #C5CDD9;
  --md-sys-color-surface-container-lowest: #0D1117;
  --md-sys-color-surface-container-low: #1A1F26;
  --md-sys-color-surface-container: #1E242C;
  --md-sys-color-surface-container-high: #282E36;
  --md-sys-color-surface-container-highest: #31383F;
  --md-sys-color-outline: #8F97A3;
  --md-sys-color-outline-variant: #454D56;
  --md-sys-color-inverse-surface: #DCE1E9;
  --md-sys-color-inverse-on-surface: #1A1F26;
  --md-sys-color-inverse-primary: #506680;
  --md-sys-color-scrim: #000000;
  --md-sys-color-shadow: #000000;
  --md-sys-color-elevation: transparent;
}

:root[data-theme="obsidian"] .md-elevation-1 {
  background-color: color-mix(in srgb, var(--md-sys-color-primary) 3%, var(--md-sys-color-surface));
}
:root[data-theme="obsidian"] .md-elevation-2 {
  background-color: color-mix(in srgb, var(--md-sys-color-primary) 6%, var(--md-sys-color-surface));
}
:root[data-theme="obsidian"] .md-elevation-3 {
  background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, var(--md-sys-color-surface));
}
:root[data-theme="obsidian"] .md-elevation-4 {
  background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, var(--md-sys-color-surface));
}
:root[data-theme="obsidian"] .md-elevation-5 {
  background-color: color-mix(in srgb, var(--md-sys-color-primary) 14%, var(--md-sys-color-surface));
}