/* ==========================================================================
   CFX NETWORK — DESIGN SYSTEM TOKENS (variables.css)
   Editorial PR Agency & Documentary Production House
   ========================================================================== */

:root {
  /* ── 1. Core Editorial Palette ────────────────────────────────────────── */
  --cfx-obsidian:        #0B0B0C;
  --cfx-carbon:          #121315;
  --cfx-charcoal:        #1B1C1F;
  --cfx-slate:           #2A2C30;

  --cfx-paper:           #F5F3EE;
  --cfx-paper-warm:      #ECE9E1;
  --cfx-surface:         #FFFFFF;
  --cfx-surface-subtle:  #F9F8F5;

  /* ── 2. Text Hierarchy ────────────────────────────────────────────────── */
  --cfx-ink:             #0F1012;
  --cfx-ink-secondary:   #45474C;
  --cfx-ink-muted:       #71747A;
  --cfx-ink-faint:       #9A9DA3;

  --cfx-on-dark:         #F5F3EE;
  --cfx-on-dark-muted:   #A9ACB2;
  --cfx-on-dark-faint:   #6E7178;

  /* ── 3. Documentary & Editorial Accents ───────────────────────────────── */
  --cfx-accent:          #C83E3B; /* Documentary Vermilion / Timecode Red */
  --cfx-accent-hover:    #A82E2B;
  --cfx-accent-soft:     rgba(200, 62, 59, 0.10);
  --cfx-film-amber:      #C59B6D; /* Warm tungsten highlight */

  /* ── 4. Hairline Rules & Borders ──────────────────────────────────────── */
  --cfx-rule:            rgba(15, 16, 18, 0.13);
  --cfx-rule-strong:     rgba(15, 16, 18, 0.28);
  --cfx-rule-dark:       rgba(245, 243, 238, 0.14);
  --cfx-rule-dark-strong:rgba(245, 243, 238, 0.30);

  /* ── 5. Typography Stacks ─────────────────────────────────────────────── */
  --cfx-font-sans:       'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --cfx-font-serif:      'Instrument Serif', 'Playfair Display', Georgia, 'Times New Roman', serif;
  --cfx-font-mono:       'JetBrains Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;

  /* ── 6. Layout & Grid Containers (Matching 1440px Figma Frame) ────────── */
  --cfx-max-width:       1440px;
  --cfx-container:       1296px; /* 1440px - (72px * 2) */
  --cfx-gutter:          72px;
  --cfx-grid-gap:        24px;
  --cfx-grid-gap-lg:     48px;

  /* ── 7. Section Spacing Scale ─────────────────────────────────────────── */
  --cfx-space-xs:        8px;
  --cfx-space-sm:        16px;
  --cfx-space-md:        24px;
  --cfx-space-lg:        40px;
  --cfx-space-xl:        64px;
  --cfx-space-2xl:       96px;
  --cfx-space-3xl:       128px;

  /* ── 8. Borders, Radius & Motion ──────────────────────────────────────── */
  --cfx-radius-none:     0px;
  --cfx-radius-xs:       2px;
  --cfx-radius-sm:       4px;

  --cfx-ease-editorial:  cubic-bezier(0.22, 1, 0.36, 1);
  --cfx-transition-fast: 180ms cubic-bezier(0.22, 1, 0.36, 1);
  --cfx-transition:      340ms cubic-bezier(0.22, 1, 0.36, 1);
  --cfx-transition-slow: 600ms cubic-bezier(0.22, 1, 0.36, 1);

  /* ── 9. Header Height ─────────────────────────────────────────────────── */
  --cfx-header-h:        96px;
}

@media (max-width: 1279px) {
  :root {
    --cfx-gutter:        48px;
    --cfx-space-2xl:     80px;
    --cfx-space-3xl:     104px;
  }
}

@media (max-width: 1023px) {
  :root {
    --cfx-gutter:        32px;
    --cfx-space-xl:      48px;
    --cfx-space-2xl:     64px;
    --cfx-space-3xl:     84px;
    --cfx-header-h:      80px;
  }
}

@media (max-width: 767px) {
  :root {
    --cfx-gutter:        20px;
    --cfx-space-lg:      28px;
    --cfx-space-xl:      40px;
    --cfx-space-2xl:     56px;
    --cfx-space-3xl:     72px;
    --cfx-header-h:      72px;
  }
}