/* Carlas Brasil — Design Tokens */
:root {
  /* Brand — amarelo Carlas */
  --cb-yellow: #f5c518;
  --cb-yellow-deep: #d4a40f;
  --cb-yellow-glow: rgba(245, 197, 24, 0.42);
  --cb-accent: var(--cb-yellow);
  --cb-accent-deep: var(--cb-yellow-deep);
  --cb-accent-glow: var(--cb-yellow-glow);
  /* alias legado (apontando pro amarelo) */
  --cb-red: var(--cb-yellow);
  --cb-red-deep: var(--cb-yellow-deep);
  --cb-red-glow: var(--cb-yellow-glow);

  --cb-silver: #c8d0d8;
  --cb-silver-bright: #e8eef4;
  --cb-chrome: linear-gradient(135deg, #9aa3ad 0%, #e8eef4 45%, #7a8490 100%);
  --cb-on-accent: #0c0e11;

  /* Surfaces */
  --cb-black: #060708;
  --cb-ink: #0c0e11;
  --cb-surface: #12161c;
  --cb-surface-2: #1a2029;
  --cb-elevated: #222a35;
  --cb-border: rgba(200, 208, 216, 0.12);
  --cb-border-strong: rgba(200, 208, 216, 0.22);

  /* Text */
  --cb-text: #f2f5f8;
  --cb-text-muted: #9aa5b1;
  --cb-text-dim: #6b7682;

  /* Typography */
  --font-display: "Bebas Neue", "Arial Narrow", Impact, sans-serif;
  --font-body: "Manrope", "Segoe UI", system-ui, sans-serif;

  /* Spacing / radius */
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1.25rem;
  --space-lg: 2rem;
  --space-xl: 3.5rem;
  --space-2xl: 6rem;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 180ms;
  --dur: 420ms;
  --dur-slow: 800ms;

  /* Layout */
  --header-h: 72px;
  --container: 1180px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);

  /* Shadows */
  --shadow-glow: 0 0 40px var(--cb-yellow-glow);
  --shadow-lift: 0 18px 50px rgba(0, 0, 0, 0.45);
}