/* BLACKSOUND design tokens — primitive → semantic → component (fonts are linked in each HTML <head>) */

:root {
  color-scheme: dark;

  /* Primitive — from logo */
  --black: #0a0a08;
  --gray-975: #1e2026;
  --gray-950: #25272e;
  --gray-900: #2b2d35;
  --gray-800: #353842;
  --gray-600: #4c4f5a;
  --gray-400: #9a9da8;
  --gray-200: #dcdde2;
  --white: #ffffff;
  --blue: #18a9f2;
  --orange: #ffab0d;
  --green: #2fbf71;
  --red: #ef4444;
  --whatsapp: #25d366;
  --waze: #33ccff;

  /* Semantic */
  color-scheme: light;
  --bg: #f6f6f4;
  --bg-alt: #ececea;
  --surface: var(--white);
  --surface-2: #f1f1ef;
  --border: #d4d4d0;
  --text: #16171b;
  --text-soft: #3c3e45;
  --text-muted: #62656e;
  --primary-ink: #9a5800;   /* orange as text on light (prices) */
  --primary: var(--orange);      /* CTA, selection, prices */
  --on-primary: var(--black);
  --accent: #0a6fa8;             /* brand blue darkened for AA text contrast on light */
  --success: var(--green);
  --danger: #c62828;
  --warning: var(--orange);

  /* Type */
  --font-display: "Rubik", "Segoe UI", system-ui, sans-serif;   /* headings, buttons — matches logo */
  --font: "Heebo", "Segoe UI", system-ui, sans-serif;           /* body, forms */
  --fs-xs: .8125rem;
  --fs-sm: .9375rem;
  --fs-base: 1.0625rem;
  --fs-lg: 1.25rem;
  --fs-xl: 1.75rem;
  --fs-2xl: clamp(2rem, 4.5vw, 3.25rem);
  --fs-hero: clamp(2.5rem, 7vw, 5.5rem);

  /* Space (4px base) */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s6: 24px; --s8: 32px; --s12: 48px; --s16: 64px; --s24: 96px;

  /* Shape — rounded terminals like the logo */
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-pill: 999px;
  --shadow: 0 10px 40px color-mix(in srgb, var(--black) 35%, transparent);
  --glow-primary: 0 0 0 1px var(--primary), 0 8px 32px color-mix(in srgb, var(--primary) 35%, transparent);
  --glow-accent: 0 0 24px color-mix(in srgb, var(--accent) 45%, transparent);
  --ease: cubic-bezier(.2, .7, .2, 1);

  /* Component */
  --btn-bg: var(--primary);
  --btn-fg: var(--on-primary);
  --btn-radius: var(--r-pill);
  --card-bg: var(--surface);
  --card-radius: var(--r-lg);
  --input-bg: var(--bg);
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--accent) 55%, transparent);
  --slot-selected-bg: var(--primary);
  --slot-busy-opacity: .3;
}

/* Areas that stay dark: over photos, and where the white logo sits */
.hero, .topbar, .svc-card, footer, .side, .login {
  color-scheme: dark;
  --bg: var(--gray-975);
  --bg-alt: var(--gray-950);
  --surface: var(--gray-900);
  --surface-2: var(--gray-800);
  --border: var(--gray-600);
  --text: var(--white);
  --text-soft: var(--gray-200);
  --text-muted: var(--gray-400);
  --input-bg: var(--gray-975);
  --accent: var(--blue);
  --primary-ink: var(--orange);
  --danger: var(--red);
  color: var(--text);
}