/* Carkeymaster design tokens: the single source of truth for both themes. */
:root {
  color-scheme: light;

  /* Brand palette. */
  --c-primary: #ffc931;
  --c-primary-ink: #1a1a1a;
  --c-primary-hover: #f0b800;
  --c-accent: #2563eb;
  --c-accent-muted: rgba(37, 99, 235, .36);
  --c-accent-ink: #ffffff;
  --c-danger: #b30000;
  --c-success: #15803d;
  --c-warning: #b45309;

  /* Semantic text colours. */
  --c-ink: #374151;
  --c-ink-2: #1f2937;
  --c-body: #333a45;
  --c-muted: #6b7280;
  --c-placeholder: #7b8491;
  --c-on-dark: #ffffff;
  --c-white: #ffffff; /* Intentionally fixed: logos/icons and text on dark fills. */

  /* Semantic surfaces. */
  --c-page: #ffffff;
  --c-surface: #f3f4f6;
  --c-surface-2: #e9ebef;
  --c-surface-raised: #ffffff;
  --c-surface-soft: #f8fafc;
  --c-surface-hover: #eff6ff;
  --c-control-bg: #ffffff;
  --c-media-bg: #ffffff;
  --c-panel-strong: #374151;
  --c-panel-strong-hover: #2563eb;

  /* Feedback surfaces. */
  --c-info-surface: #f7fbff;
  --c-info-border: #dbeafe;
  --c-success-surface: #f0fdf4;
  --c-success-border: #bbf7d0;
  --c-danger-surface: #fff7f7;
  --c-danger-border: #fecaca;
  --c-warning-surface: #fff7ed;
  --c-warning-border: #fdba74;

  /* Borders. */
  --c-border: #d7d7d9;
  --c-border-strong: #afabab;
  --c-border-soft: #e5e7eb;

  /* Typography. */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --lh-tight: 1.2;
  --lh-base: 1.6;

  /* Layout. */
  --container-max: 1380px;
  --container-pad: 20px;
  --bp-sm: 480px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1200px;

  /* Radius. */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 15px;
  --r-pill: 999px;
  --r-btn: 9px;

  /* Shadows and overlays. */
  --shadow-card: 0 1px 3px rgba(0, 0, 0, .06), 0 1px 2px rgba(0, 0, 0, .04);
  --shadow-card-hover: 0 6px 16px rgba(17, 24, 39, .10);
  --shadow-pop: 0 12px 32px rgba(17, 24, 39, .14);
  --shadow-panel: 0 14px 36px rgba(17, 24, 39, .08);
  --c-backdrop: rgba(15, 23, 42, .66);

  /* Spacing scale. */
  --space-1: 5px;
  --space-2: 10px;
  --space-3: 15px;
  --space-4: 20px;
  --space-5: 30px;
  --space-6: 40px;
  --space-7: 60px;

  /* Site chrome. */
  --header-bg: #ffffff;
  --topbar-bg: #374151;
  --topbar-ink: #ffffff;
  --nav-bg: #374151;
  --nav-ink: #ffffff;
  --nav-ink-active: var(--c-primary);
  --cart-badge-bg: var(--c-accent);
  --footer-bg: var(--c-surface);
  --footer-ink: var(--c-ink);
  --footer-muted: var(--c-muted);
  --footer-accent: var(--c-danger);
  --footer-bottom-bg: #374151;
  --footer-bottom-ink: #ffffff;

  --z-header: 100;
  --z-dropdown: 200;
  --z-overlay: 500;
}

html[data-theme="dark"] {
  color-scheme: dark;

  --c-accent: #72a4ff;
  --c-accent-muted: rgba(114, 164, 255, .36);
  --c-accent-ink: #0b1220;
  --c-danger: #ff7b7b;
  --c-success: #6ee7a0;
  --c-warning: #fdba74;

  --c-ink: #e3e7ed;
  --c-ink-2: #f5f7fa;
  --c-body: #d2d7df;
  --c-muted: #a6afbb;
  --c-placeholder: #98a2b0;

  --c-page: #0f1115;
  --c-surface: #20242b;
  --c-surface-2: #292e37;
  --c-surface-raised: #171a1f;
  --c-surface-soft: #1c2027;
  --c-surface-hover: #272e39;
  --c-control-bg: #20242b;
  --c-media-bg: #f5f6f8;
  --c-panel-strong: #2b323d;
  --c-panel-strong-hover: #365f9d;

  --c-info-surface: #16243a;
  --c-info-border: #31527f;
  --c-success-surface: #142a20;
  --c-success-border: #2f6b4b;
  --c-danger-surface: #321c20;
  --c-danger-border: #78404a;
  --c-warning-surface: #32251a;
  --c-warning-border: #805631;

  --c-border: #3b424d;
  --c-border-strong: #596270;
  --c-border-soft: #2d333c;

  --shadow-card: 0 1px 3px rgba(0, 0, 0, .32), 0 1px 2px rgba(0, 0, 0, .24);
  --shadow-card-hover: 0 6px 16px rgba(0, 0, 0, .26);
  --shadow-pop: 0 16px 38px rgba(0, 0, 0, .42);
  --shadow-panel: 0 14px 36px rgba(0, 0, 0, .32);
  --c-backdrop: rgba(0, 0, 0, .72);

  --header-bg: #15181d;
  --topbar-bg: #222833;
  --nav-bg: #242a34;
  --footer-bg: #171a1f;
  --footer-ink: var(--c-ink);
  --footer-muted: var(--c-muted);
  --footer-bottom-bg: #0b0d10;
}

html[data-theme="dark"] {
  scrollbar-color: var(--c-border-strong) var(--c-page);
}

html[data-theme="dark"] ::selection {
  background: var(--c-primary);
  color: var(--c-primary-ink);
}