:root {
  /* Trak4Tune — exact Android palette */
  --trak-void-black: #050407;
  --trak-carbon-black: #0B0910;
  --trak-deep-black-purple: #120D18;
  --trak-dark-surface: #17101F;
  --trak-dark-surface-high: #21152D;
  --trak-dark-surface-highest: #2C1B3B;
  --trak-neon-orange: #FF7A00;
  --trak-neon-orange-bright: #FF9A32;
  --trak-neon-orange-container: #5A2600;
  --trak-neon-purple: #B865FF;
  --trak-neon-purple-bright: #D6A6FF;
  --trak-neon-purple-container: #4C176C;
  --trak-neon-magenta: #FF4FD8;
  --trak-neon-magenta-container: #65104F;
  --trak-dark-text-primary: #FFF7FF;
  --trak-dark-text-secondary: #D8C8DF;
  --trak-dark-outline: #A891B2;
  --trak-dark-outline-variant: #594760;
  --trak-dark-error: #FFB4AB;
  --trak-dark-error-container: #93000A;

  --trak-light-background: #FFF8FC;
  --trak-light-surface: #FFFFFF;
  --trak-light-surface-low: #FFF1FA;
  --trak-light-surface-high: #F5E7F6;
  --trak-light-surface-highest: #EBDCED;
  --trak-light-orange: #B94700;
  --trak-light-orange-container: #FFDCC5;
  --trak-light-on-orange-container: #351000;
  --trak-light-purple: #7B2CBF;
  --trak-light-purple-container: #F0D7FF;
  --trak-light-on-purple-container: #2D004B;
  --trak-light-magenta: #A9007D;
  --trak-light-magenta-container: #FFD8EF;
  --trak-light-on-magenta-container: #3A002A;
  --trak-light-text-primary: #211823;
  --trak-light-text-secondary: #554956;
  --trak-light-outline: #817481;
  --trak-light-outline-variant: #D2C2D1;
  --trak-light-error: #BA1A1A;
  --trak-light-error-container: #FFDAD6;

  --font-display: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --content-width: 1320px;
  --scene-pad-x: clamp(24px, 6vw, 96px);
  --scene-pad-y: clamp(28px, 5vh, 72px);
  --radius-sm: 12px;
  --radius-md: 22px;
  --radius-lg: 34px;
  --ease-cinematic: cubic-bezier(.76, 0, .24, 1);
  --ease-scene: cubic-bezier(.55, .05, 1, .45); /* slow start → fast finish */
  --transition-scene: 620ms;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --color-background: var(--trak-carbon-black);
  --color-background-deep: var(--trak-void-black);
  --color-surface: var(--trak-deep-black-purple);
  --color-surface-low: var(--trak-carbon-black);
  --color-surface-high: var(--trak-dark-surface-high);
  --color-surface-highest: var(--trak-dark-surface-highest);
  --color-primary: var(--trak-neon-orange);
  --color-primary-hover: var(--trak-neon-orange-bright);
  --color-primary-container: var(--trak-neon-orange-container);
  --color-secondary: var(--trak-neon-purple);
  --color-secondary-bright: var(--trak-neon-purple-bright);
  --color-secondary-container: var(--trak-neon-purple-container);
  --color-tertiary: var(--trak-neon-magenta);
  --color-tertiary-container: var(--trak-neon-magenta-container);
  --color-text-primary: var(--trak-dark-text-primary);
  --color-text-secondary: var(--trak-dark-text-secondary);
  --color-outline: var(--trak-dark-outline);
  --color-outline-variant: var(--trak-dark-outline-variant);
  --color-panel-glass: rgba(23,16,31,.72);
  --color-shadow: rgba(0,0,0,.42);
}

html[data-theme="light"] {
  color-scheme: light;
  --color-background: var(--trak-light-background);
  --color-background-deep: var(--trak-light-surface-low);
  --color-surface: var(--trak-light-surface);
  --color-surface-low: var(--trak-light-surface-low);
  --color-surface-high: var(--trak-light-surface-high);
  --color-surface-highest: var(--trak-light-surface-highest);
  --color-primary: var(--trak-light-orange);
  --color-primary-hover: #9E3D00;
  --color-primary-container: var(--trak-light-orange-container);
  --color-secondary: var(--trak-light-purple);
  --color-secondary-bright: #9350D0;
  --color-secondary-container: var(--trak-light-purple-container);
  --color-tertiary: var(--trak-light-magenta);
  --color-tertiary-container: var(--trak-light-magenta-container);
  --color-text-primary: var(--trak-light-text-primary);
  --color-text-secondary: var(--trak-light-text-secondary);
  --color-outline: var(--trak-light-outline);
  --color-outline-variant: var(--trak-light-outline-variant);
  --color-panel-glass: rgba(255,255,255,.78);
  --color-shadow: rgba(45,0,75,.13);
}