/* ============================================================
   COD-YQ Technologies — Design Tokens
   All colors, spacing, typography, and breakpoints live here.
   Never hardcode values in other files — always reference these.
   ============================================================ */

:root {

  /* ── Background Layers ─────────────────────────────────── */
  --color-bg:             #080c14;
  --color-bg-surface:     #0d1220;
  --color-bg-card:        #111827;

  /* ── Brand Accents ──────────────────────────────────────── */
  --color-accent-orange:  #F7941D;
  --color-accent-purple:  #7B3FE4;
  --color-gradient:       linear-gradient(135deg, #F7941D 0%, #7B3FE4 100%);

  /* ── Text ───────────────────────────────────────────────── */
  --color-text-primary:   #F0F4FF;
  --color-text-secondary: #8892A4;

  /* ── Borders ────────────────────────────────────────────── */
  --color-border:         rgba(255, 255, 255, 0.06);
  --color-border-accent:  rgba(247, 148, 29, 0.15);

  /* ── Glow Effects ───────────────────────────────────────── */
  --color-glow-orange:    rgba(247, 148, 29, 0.10);
  --color-glow-purple:    rgba(123, 63, 228, 0.10);

  /* ── Typography ─────────────────────────────────────────── */
  --font-heading:         'Syne', sans-serif;
  --font-body:            'DM Sans', sans-serif;

  --size-hero-h1:         clamp(2.8rem, 5.5vw, 5rem);
  --size-section-h2:      clamp(1.8rem, 3.5vw, 2.8rem);
  --size-card-h3:         1.2rem;
  --size-body:            1rem;
  --size-eyebrow:         0.72rem;
  --size-nav:             0.9rem;

  --weight-hero:          800;
  --weight-h2:            700;
  --weight-h3:            600;
  --weight-eyebrow:       700;
  --weight-nav:           500;

  --lh-body:              1.8;
  --ls-eyebrow:           0.14em;

  /* ── Spacing Scale ──────────────────────────────────────── */
  --space-xs:    0.5rem;
  --space-sm:    1rem;
  --space-md:    1.5rem;
  --space-lg:    2.5rem;
  --space-xl:    4rem;
  --space-2xl:   6rem;
  --space-3xl:   8rem;

  /* ── Layout ─────────────────────────────────────────────── */
  --max-width:          1280px;
  --nav-height:         72px;
  --border-radius-sm:   6px;
  --border-radius-md:   12px;
  --border-radius-lg:   20px;

  /* ── Transitions ────────────────────────────────────────── */
  --transition-fast:    0.2s ease;
  --transition-base:    0.3s ease;
  --transition-slow:    0.5s ease;

  /* ── Shadows ────────────────────────────────────────────── */
  --shadow-card:        0 2px 24px rgba(0, 0, 0, 0.4);
  --shadow-card-hover:  0 8px 40px rgba(0, 0, 0, 0.6);
}

/* ── Breakpoints (reference only — use media queries in files) ──
   480px  → mobile-sm
   768px  → tablet
   1024px → laptop
   1280px → desktop
   ──────────────────────────────────────────────────────────── */