/* ─────────────────────────────────────────────────────────
   X.C.O MEDIA — GLOBAL DESIGN TOKENS
   Typography: Awwwards-grade, editorial, laconic
   ───────────────────────────────────────────────────────── */
:root {
  /* ── Color ─────────────────────────────────────────────── */
  --white:       #FFFFFF;
  --paper:       #F8F7F4;      /* warm off-white surface */
  --paper-dark:  #F0EFE9;      /* slight depth */
  --sand:        #EAE8E2;
  --ink:         #0E0E0E;      /* near-black — not pure */
  --ink-mid:     #2B2B2B;      /* paragraphs, secondary heads */
  --ash:         #6B6966;      /* tertiary text / captions */
  --ghost:       #9E9A96;      /* placeholders */
  --rule:        #E2E0DC;      /* dividers */
  --rule-dark:   #C8C5BF;
  --gold:        #0E0E0E;      /* pure dark ink — no gold font */
  --gold-light:  rgba(14,14,14,0.08);
  --dark-rule:   rgba(255,255,255,0.08);

  /* ── Type scale ─────────────────────────────────────────── */
  /*
     SERIF  → Cormorant Garamond 300 / 300-italic
              Display, hero headlines, pull quotes, section H1
     SANS   → DM Sans 300 / 400 / 500
              Body copy, navigation, captions, buttons
     LABELS → DM Sans 400 / 500
              Tags, labels, metadata, specs, counters
  */
  --font-serif:  'Cormorant Garamond', Georgia, serif;
  --font-sans:   'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body:   'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:   'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;

  /* ── Type sizes (fluid clamp grid) ─────────────────────── */
  --type-display:    clamp(72px, 10vw, 130px);   /* hero headline */
  --type-hero-sub:   clamp(52px, 7vw, 96px);     /* inner page hero */
  --type-h1:         clamp(38px, 4.5vw, 60px);   /* section title */
  --type-h2:         clamp(28px, 3vw, 44px);     /* sub-section */
  --type-h3:         clamp(20px, 2vw, 28px);     /* card / row title */
  --type-body-lg:    18px;
  --type-body:       15px;
  --type-body-sm:    13px;
  --type-label:      11px;
  --type-micro:      10px;

  /* ── Spacing rhythm ─────────────────────────────────────── */
  --space-xs:    4px;
  --space-sm:    8px;
  --space-md:    16px;
  --space-lg:    32px;
  --space-xl:    64px;
  --space-2xl:   96px;
  --space-3xl:   160px;

  /* ── Motion ─────────────────────────────────────────────── */
  --ease-out:    cubic-bezier(0.23, 1, 0.32, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --dur-fast:    140ms;
  --dur-med:     240ms;
  --dur-slow:    380ms;

  /* ── Layout ─────────────────────────────────────────────── */
  --z-header:   100;
  --z-drop:     200;
  --z-modal:    9999;
  --container:  1320px;
  --container-sm: 840px;
  --gap:        24px;
  --col-gutter: clamp(20px, 4vw, 60px);
}