:root {
  /* Core automotive palette — dark navy & signal yellow (brand logo colours) */
  --color-carbon: #0A1220;
  --color-graphite: #0F1B30;
  --color-graphite-light: #182A48;
  --color-off-white: #F5F7FA;
  --color-accent: #FFC72C;
  --color-accent-dark: #E0AC00;
  --color-accent-glow: rgba(255, 199, 44, 0.20);
  --color-steel: #93A3BF;
  --color-steel-light: #C7D2E3;

  --color-on-accent: #10192E;
  /* Ink-accent: used where the brand accent needs to read as text/icon on a
     LIGHT surface — yellow itself is too pale there, so it renders as navy. */
  --color-ink-accent: var(--color-on-accent);

  --color-border: rgba(255, 255, 255, 0.10);
  --color-border-strong: rgba(255, 255, 255, 0.18);
  --color-border-dark: rgba(10, 18, 32, 0.10);

  --color-success: #3FA66A;
  --color-star: #FFC72C;

  /* Surfaces */
  --surface-dark: var(--color-carbon);
  --surface-dark-alt: var(--color-graphite);
  --surface-light: var(--color-off-white);
  --surface-light-alt: #ECEEF5;

  /* Text */
  --text-on-dark: var(--color-off-white);
  --text-on-dark-muted: var(--color-steel);
  --text-on-light: #12203B;
  --text-on-light-muted: #566079;

  /* Shadows */
  --shadow-soft: 0 12px 32px rgba(0, 0, 0, 0.32);
  --shadow-card: 0 8px 24px rgba(0, 0, 0, 0.22);
  --shadow-accent: 0 10px 26px rgba(255, 199, 44, 0.35);
}