/* ============================================================
   REBUG — Design Tokens
   All colors, spacing, and typography as CSS variables.
   Never use raw values in code — always use these tokens.
   ============================================================ */

:root {
  /* Colors — Light Mode */
  --color-bg:        #ffffff;
  --color-surface:   #f5f5f5;
  --color-border:    #e0e0e0;
  --color-text:      #0a0a0a;
  --color-muted:     #6b6b6b;
  --color-accent:    #00d2f3;

  /* Typography */
  --font-base:       'Plus Jakarta Sans', sans-serif;
  --text-xs:         0.75rem;
  --text-sm:         0.875rem;
  --text-base:       1rem;
  --text-lg:         1.125rem;
  --text-xl:         1.25rem;
  --text-2xl:        1.5rem;
  --text-3xl:        1.875rem;
  --text-4xl:        2.25rem;
  --text-5xl:        3rem;
  --text-6xl:        3.75rem;

  --weight-normal:   400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  --leading-tight:   1.2;
  --leading-normal:  1.6;

  /* Spacing */
  --space-1:   0.25rem;
  --space-2:   0.5rem;
  --space-3:   0.75rem;
  --space-4:   1rem;
  --space-6:   1.5rem;
  --space-8:   2rem;
  --space-12:  3rem;
  --space-16:  4rem;
  --space-24:  6rem;
  --space-32:  8rem;

  /* Layout */
  --max-width:       1200px;
  --nav-height:      64px;
  --border-radius:   6px;
  --border-radius-lg: 12px;

  /* Transitions */
  --transition:      150ms ease;
  --transition-slow: 300ms ease;
}

/* Dark Mode */
[data-theme="dark"] {
  --color-bg:      #0a0a0a;
  --color-surface: #141414;
  --color-border:  #2a2a2a;
  --color-text:    #f5f5f5;
  --color-muted:   #909090;
}

/* Accent color per section */
[data-section="automotive"] { --color-accent: #00d2f3; }
[data-section="energy"]     { --color-accent: #F59E0B; }
[data-section="digital"]    { --color-accent: #A855F7; }