/* ═══════════════════════════════════════════════════════
   DESIGN TOKENS — single source of truth for the whole site
   ═══════════════════════════════════════════════════════ */
:root {
  /* ── Palette ── */
  --black:    #08080a;
  --dark:     #111114;
  --darker:   #0d0d10;
  --card:     #161619;
  --orange:   #E05A1A;
  --orange-lt:#f07030;
  --white:    #ffffff;
  --off:      #e8e8e8;
  --muted:    rgba(255,255,255,0.52);
  --border:   rgba(255,255,255,0.085);
  --border-hover: rgba(255,255,255,0.18);

  /* Brand accent colors */
  --green:    #2D7A1E;
  --green-lt: #3A9B28;
  --rose:     #C2185B;
  --rose-lt:  #e879a0;

  /* ── Layout ── */
  --max-w:      1440px;
  --sec-side:   3rem;
  --sec-v:      96px;
  --nav-h:      68px;
  --container-w: min(var(--max-w), calc(100vw - var(--sec-side) * 2));

  /* ── Components ── */
  --radius:     3px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --transition: 0.22s ease;
  --transition-slow: 0.38s ease;

  /* ── Shadows ── */
  --shadow-card:  0 2px 16px rgba(0,0,0,0.35);
  --shadow-hover: 0 12px 40px rgba(0,0,0,0.5);
  --shadow-orange:0 4px 20px rgba(224,90,26,0.35);

  /* ── Typography scale ── */
  --text-xs:  0.62rem;
  --text-sm:  0.78rem;
  --text-base:0.9rem;
  --text-md:  1rem;
  --text-lg:  1.125rem;
}