/* Design tokens — mirrors the Figma variable collections (V2 / midu-style). Dark is the default mode. */
:root {
  /* Primitives */
  --black-1000: #050505;
  --black-950: #0a0a0a;
  --gray-card: #151515;
  --gray-card-a80: rgba(21, 21, 21, 0.8);
  --gray-menu: #1c1c1c;
  --gray-750: #262626;
  --gray-600: #4a4a4a;
  --light-100: #e6e6e6;
  --light-200: #ececec;
  --white: #ffffff;
  --red-400: #ff4a2e;
  --red-500: #ff2a12;
  --red-700: #b31500;
  --red-900: #3a0800;
  --white-a05: rgba(255, 255, 255, 0.05);
  --white-a07: rgba(255, 255, 255, 0.07);
  --white-a10: rgba(255, 255, 255, 0.1);
  --white-a40: rgba(255, 255, 255, 0.4);
  --white-a50: rgba(255, 255, 255, 0.5);
  --white-a60: rgba(255, 255, 255, 0.6);
  --white-a80: rgba(255, 255, 255, 0.8);
  --black-a07: rgba(0, 0, 0, 0.07);
  --black-a40: rgba(0, 0, 0, 0.4);
  --black-a60: rgba(0, 0, 0, 0.6);
  --black-a80: rgba(0, 0, 0, 0.8);

  /* Color — Dark mode */
  --color-bg-canvas: var(--black-1000);
  --color-bg-card: var(--gray-card-a80);
  --color-bg-card-solid: var(--gray-card);
  --color-bg-menu: var(--gray-menu);
  --color-bg-glass: var(--white-a05);
  --color-bg-glass-hover: var(--white-a10);
  --color-bg-inverse: var(--white);
  --color-bg-light: var(--light-100);
  --color-bg-light-card: var(--white);
  --color-bg-light-chip: var(--light-200);
  --color-text-primary: var(--white);
  --color-text-secondary: var(--white-a60);
  --color-text-muted: var(--white-a40);
  --color-text-soft: var(--white-a80);
  --color-text-on-inverse: var(--black-1000);
  --color-text-on-light: var(--black-1000);
  --color-text-on-light-soft: var(--black-a80);
  --color-text-on-light-muted: var(--black-a40);
  --color-border-subtle: var(--white-a10);
  --color-border-light: var(--black-a07);
  --color-accent-glow: var(--red-500);
  --color-accent-glow-soft: var(--red-400);
  --color-accent-glow-deep: var(--red-700);
  --color-accent-glow-dark: var(--red-900);

  /* Spacing (4px scale) */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px;
  --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px;
  --space-32: 128px; --space-40: 160px; --space-50: 200px;

  /* Radius */
  --radius-sm: 8px; --radius-md: 12px; --radius-nav: 14px; --radius-lg: 20px;
  --radius-card: 20px; --radius-tile: 24px; --radius-panel: 32px; --radius-service: 36px; --radius-full: 999px;

  /* Layout */
  --layout-gutter: 40px;
  --layout-content-max: 1000px;
  --layout-section-gap: 200px;

  /* Typography — Switzer (Fontshare) */
  --font-sans: "Switzer", "Host Grotesk", "Inter", system-ui, -apple-system, sans-serif;

  /* Effects */
  --shadow-card: 0 30px 60px -20px rgba(0, 0, 0, 0.35);
  --shadow-light-card: 0 20px 40px -10px rgba(0, 0, 0, 0.08);

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 220ms;
  --dur-base: 500ms;
  --dur-slow: 900ms;
}

@media (max-width: 767px) {
  :root { --layout-gutter: 20px; --layout-section-gap: 96px; }
}