/*
 * OnlyDrive Design System 2026 — Foundations
 * -------------------------------------------
 * New product UI must consume these semantic tokens instead of hard-coded
 * colours, spacing or radii. Public cinematic pages may keep their own scene
 * styling; authenticated product surfaces share this foundation.
 */
@font-face {
  font-family: "OD Instrument";
  src: url("../v4/fonts/instrument-sans-variable.woff2?v=20260809a") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  color-scheme: dark;

  --od-bg-primary: #05090d;
  --od-bg-secondary: #080e14;
  --od-bg-tertiary: #0b131a;
  --od-surface-1: #0c141b;
  --od-surface-2: #111b24;
  --od-surface-3: #17232e;
  --od-surface-hover: #1a2935;
  --od-surface-selected: #142b39;
  --od-surface-overlay: rgba(8, 14, 20, 0.94);

  --od-border-subtle: rgba(196, 222, 237, 0.08);
  --od-border-default: rgba(196, 222, 237, 0.14);
  --od-border-strong: rgba(196, 222, 237, 0.24);

  --od-text-primary: #eef6fa;
  --od-text-secondary: #a8bac5;
  --od-text-muted: #70838f;
  --od-text-inverse: #041015;

  --od-accent: #62d9e8;
  --od-accent-contrast: #041015;
  --od-accent-hover: #83e5f0;
  --od-accent-strong: #2f7df4;
  --od-accent-soft: rgba(98, 217, 232, 0.10);
  --od-accent-border: rgba(98, 217, 232, 0.28);

  --od-success: #65d6a6;
  --od-success-soft: rgba(101, 214, 166, 0.10);
  --od-warning: #e9bb69;
  --od-warning-soft: rgba(233, 187, 105, 0.11);
  --od-danger: #ff897d;
  --od-danger-soft: rgba(255, 137, 125, 0.10);
  --od-info: #83b7ff;
  --od-info-soft: rgba(131, 183, 255, 0.10);

  --od-font-sans: "OD Instrument", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --od-font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;

  --od-text-2xs: 0.6875rem;
  --od-text-xs: 0.75rem;
  --od-text-sm: 0.8125rem;
  --od-text-md: 0.9375rem;
  --od-text-lg: 1.0625rem;
  --od-text-xl: 1.25rem;
  --od-text-2xl: 1.625rem;
  --od-text-3xl: clamp(2rem, 3vw, 2.75rem);

  --od-space-1: 0.25rem;
  --od-space-2: 0.5rem;
  --od-space-3: 0.75rem;
  --od-space-4: 1rem;
  --od-space-5: 1.25rem;
  --od-space-6: 1.5rem;
  --od-space-8: 2rem;
  --od-space-10: 2.5rem;

  --od-radius-sm: 0.5rem;
  --od-radius-md: 0.75rem;
  --od-radius-lg: 1rem;
  --od-radius-xl: 1.25rem;
  --od-radius-pill: 999px;

  --od-shadow-sm: 0 8px 20px rgba(0, 0, 0, 0.14);
  --od-shadow-md: 0 18px 48px rgba(0, 0, 0, 0.24);
  --od-shadow-lg: 0 32px 90px rgba(0, 0, 0, 0.38);
  --od-focus-ring: 0 0 0 3px rgba(98, 217, 232, 0.16);

  --od-control-sm: 2rem;
  --od-control-md: 2.5rem;
  --od-control-lg: 2.875rem;
  --od-sidebar-width: 16rem;
  --od-sidebar-collapsed: 4.5rem;
  --od-topbar-height: 4.25rem;
  --od-workspace-max: 104rem;

  --od-z-base: 1;
  --od-z-sticky: 40;
  --od-z-tooltip: 80;
  --od-z-dropdown: 100;
  --od-z-drawer: 300;
  --od-z-modal: 400;
  --od-z-toast: 500;

  --od-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --od-duration-fast: 140ms;
  --od-duration-medium: 220ms;
}

/*
 * LIGHT 2026 — neutral enterprise workspace
 * This is the only authoritative light palette. Product CSS consumes these
 * semantic roles; raw light colours belong here, not inside modules.
 */
html[data-theme-mode="light"],
html[data-theme="light"] {
  color-scheme: light;

  --od-bg-primary: #F3F5F6;
  --od-bg-secondary: #F7F9FA;
  --od-bg-tertiary: #EEF2F3;
  --od-bg-navigation: #EBEFF1;
  --od-surface-1: #FBFCFC;
  --od-surface-2: #F4F7F8;
  --od-surface-3: #EEF2F3;
  --od-surface-raised: #FFFFFF;
  --od-surface-hover: #E8EDEF;
  --od-surface-selected: #E2F3F4;
  --od-surface-overlay: rgba(251, 252, 252, 0.98);

  --od-border-subtle: #D8E0E4;
  --od-border-default: #CDD7DC;
  --od-border-strong: #B9C6CC;

  --od-text-primary: #17232B;
  --od-text-secondary: #596872;
  --od-text-muted: #7B8991;
  --od-text-disabled: #A6B0B6;
  --od-text-inverse: #F8FCFC;

  --od-accent: #0796A6;
  --od-accent-contrast: #F8FCFC;
  --od-accent-hover: #067F8D;
  --od-accent-strong: #087D8B;
  --od-accent-soft: #E2F3F4;
  --od-accent-border: #B9E0E3;

  --od-success: #23805F;
  --od-success-soft: #E5F3ED;
  --od-warning: #A66717;
  --od-warning-soft: #F8EEDC;
  --od-danger: #B54C48;
  --od-danger-soft: #F8E7E5;
  --od-info: #336FA3;
  --od-info-soft: #E7EFF7;

  --od-radius-sm: 0.375rem;
  --od-radius-md: 0.5625rem;
  --od-radius-lg: 0.75rem;
  --od-radius-xl: 1rem;

  --od-shadow-xs: 0 1px 2px rgba(23, 35, 43, 0.04);
  --od-shadow-sm: 0 4px 12px rgba(23, 35, 43, 0.055);
  --od-shadow-md: 0 12px 32px rgba(23, 35, 43, 0.075);
  --od-shadow-lg: 0 24px 64px rgba(23, 35, 43, 0.11);
  --od-focus-ring: 0 0 0 3px rgba(7, 150, 166, 0.16);
}

*, *::before, *::after { box-sizing: border-box; }

html { min-width: 20rem; background: var(--od-bg-primary); }

body.od-design-system {
  margin: 0;
  min-height: 100vh;
  color: var(--od-text-primary);
  background:
    radial-gradient(circle at 86% -12%, rgba(47, 125, 244, 0.10), transparent 30rem),
    linear-gradient(rgba(98, 217, 232, 0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(98, 217, 232, 0.018) 1px, transparent 1px),
    var(--od-bg-primary);
  background-size: auto, 4rem 4rem, 4rem 4rem, auto;
  font-family: var(--od-font-sans);
  font-size: var(--od-text-md);
  font-variation-settings: "wdth" 100;
  line-height: 1.5;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body.od-design-system::before {
  position: fixed;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 42%, rgba(0, 0, 0, 0.32) 100%);
  content: "";
}

html[data-theme-mode="light"] body.od-design-system,
html[data-theme="light"] body.od-design-system {
  color: var(--od-text-primary);
  background: var(--od-bg-primary);
  background-size: auto;
}

html[data-theme-mode="light"] body.od-design-system::before,
html[data-theme="light"] body.od-design-system::before {
  display: none;
}

.od-design-system h1,
.od-design-system h2,
.od-design-system h3,
.od-design-system h4,
.od-design-system p { text-wrap: pretty; }

.od-design-system h1,
.od-design-system h2,
.od-design-system h3,
.od-design-system h4 { color: var(--od-text-primary); letter-spacing: -0.025em; }

.od-design-system a { color: inherit; }
.od-design-system button,
.od-design-system input,
.od-design-system select,
.od-design-system textarea { font: inherit; }

.od-visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

@media (prefers-reduced-motion: reduce) {
  .od-design-system *,
  .od-design-system *::before,
  .od-design-system *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}