/*
 * FSEng Design Tokens
 * Source: design-system.md (extracted from fseng.pdf)
 * ─────────────────────────────────────────────────────
 */

:root {

  /* ── Backgrounds ─────────────────────────────────── */
  --fs-bg:             #0c0c0c;
  --fs-bg-deep:        #0a0a0a;
  --fs-bg-secondary:   #161616;
  --fs-bg-card:        #1a1a1a;
  --fs-bg-card-alt:    #222222;

  /* ── Borders ─────────────────────────────────────── */
  --fs-border:         #3a3a3a;
  --fs-border-light:   #4a4a4a;

  /* ── Accent ──────────────────────────────────────── */
  --fs-accent:         #cc0000;

  /* ── Text ────────────────────────────────────────── */
  --fs-text:           #ffffff;
  --fs-text-secondary: #8c8c8c;
  /*--fs-text-label:     #555555;*/
  --fs-text-muted:     #404040;

  /* ── Typography — Families ───────────────────────── */
  --fs-font-heading:   'Rajdhani', 'Bebas Neue', sans-serif;
  --fs-font-display:   'Bebas Neue', 'Rajdhani', sans-serif;
  --fs-font-body:      'Inter', system-ui, sans-serif;
  --fs-font-mono:      'Share Tech Mono', 'Courier New', monospace;

  /* ── Typography — Scale ──────────────────────────── */
  --fs-text-hero:      clamp(52px, 9.5vw, 108px);
  --fs-text-h1:        clamp(32px, 5vw, 56px);
  --fs-text-h2:        clamp(20px, 3vw, 32px);
  --fs-text-stat:      clamp(28px, 4vw, 48px);
  --fs-text-label:     14px;
  --fs-text-body:      14px;
  --fs-text-small:     12px;

  /* ── Typography — Tracking ───────────────────────── */
  --fs-tracking-hero:  -0.01em;  /* Bebas Neue looks tighter, like reference */
  --fs-tracking-label: 0.15em;

  /* ── Spacing ─────────────────────────────────────── */
  --fs-container-max:  1200px;
  --fs-container-pad:  clamp(16px, 4vw, 24px);

  --fs-gap-xl:         clamp(40px, 7vw, 80px);
  --fs-gap-lg:         clamp(24px, 4.5vw, 48px);
  --fs-gap-md:         clamp(14px, 2.5vw, 24px);
  --fs-gap-sm:         clamp(8px, 1.5vw, 12px);

  /* ── Grid ────────────────────────────────────────── */
  --fs-grid-gap:       12px;

  /* ── Dimensions ──────────────────────────────────── */
  --fs-header-height:  64px;

  /* ── Textures ────────────────────────────────────── */

  /* Carbon fiber weave — two crossing diagonals create the woven look */
  --fs-texture-carbon:
    repeating-linear-gradient(
      45deg,
      rgba(255,255,255,0.055) 0px,
      rgba(255,255,255,0.055) 1px,
      transparent 1px,
      transparent 6px
    ),
    repeating-linear-gradient(
      135deg,
      rgba(255,255,255,0.055) 0px,
      rgba(255,255,255,0.055) 1px,
      transparent 1px,
      transparent 6px
    );

  --fs-texture-stripe: repeating-linear-gradient(
    -45deg,
    rgba(255,255,255,0.055) 0px,
    rgba(255,255,255,0.055) 2px,
    transparent 2px,
    transparent 8px
  );
}