:root {
  /* Backgrounds */
  --c-bg:         #111111;
  --c-bg-section: #0A0A0A;
  --c-bg-dark:    #050505;
  --c-bg-black:   #000000;
  --c-surface:    #1A1A1A;

  /* Accent */
  --c-accent: #E63946;

  /* Text */
  --c-white:          #FFFFFF;
  --c-text:           rgba(255,255,255,0.90);
  --c-text-secondary: rgba(255,255,255,0.60);
  --c-text-muted:     rgba(255,255,255,0.40);

  /* Borders / dividers */
  --c-border:      rgba(255,255,255,0.10);
  --c-border-soft: rgba(255,255,255,0.08);

  /* Typography */
  --f-display: 'Bebas Neue', 'Oswald', Arial Narrow, sans-serif;
  --f-body:    'Inter', system-ui, -apple-system, sans-serif;

  /* Layout — fluid spacing system (8px base unit) */
  --pad-x:       80px;
  --pad-x-md:    60px;
  --section-gap: 88px;

  /* Transitions (GPU-safe: only transform + opacity) */
  --t-fast: 150ms ease;
  --t-base: 250ms ease;
  --t-slow: 400ms ease;
}

/* ≤1100px — Tablet landscape */
@media (max-width: 1100px) {
  :root {
    --pad-x:       48px;
    --pad-x-md:    48px;
    --section-gap: 80px;
  }
}

/* ≤900px — Tablet portrait */
@media (max-width: 900px) {
  :root {
    --pad-x:       40px;
    --pad-x-md:    40px;
    --section-gap: 72px;
  }
}

/* ≤768px — Large phone / iPad mini */
@media (max-width: 768px) {
  :root {
    --pad-x:       32px;
    --pad-x-md:    32px;
    --section-gap: 64px;
  }
}

/* ≤640px — Phone */
@media (max-width: 640px) {
  :root {
    --pad-x:       20px;
    --pad-x-md:    20px;
    --section-gap: 56px;
  }
}

/* ≤480px — Small phone (iPhone SE, budget Android) */
@media (max-width: 480px) {
  :root {
    --pad-x:       16px;
    --pad-x-md:    16px;
    --section-gap: 48px;
  }
}