/*
  DESIGN TOKENS
  Evolved from fluid.css — single source of truth for all design values.
  Uses CSS clamp() for smooth scaling without breakpoint jumps.
*/

:root {
  /* === COLORS === */
  --color-bg: #080808;
  --color-bg-elevated: #0a0a0a;
  --color-bg-card: #111;
  --color-text: #e8e6e3;
  --color-text-secondary: #878787;
  --color-text-muted: #777;
  --color-text-subtle: #5a5a5a;
  --color-accent: #d4b896;
  --color-accent-hover: #e8c8a0;
  --color-accent-dim: rgba(212, 184, 150, 0.1);
  --color-accent-border: rgba(212, 184, 150, 0.3);
  --color-border: #2a2a2a;
  --color-border-subtle: #1a1a1a;
  --color-border-strong: #333;

  /* === FLUID TYPOGRAPHY === */
  --fluid-title-xl: clamp(32px, 5.5vw, 76px);
  --fluid-title-lg: clamp(24px, 4vw, 56px);
  --fluid-title-md: clamp(18px, 3vw, 36px);
  --fluid-title-sm: clamp(14px, 2vw, 22px);
  --fluid-eyebrow: clamp(14px, 1.4vw, 18px);
  --fluid-body: clamp(17px, 1.5vw, 20px);
  --fluid-small: clamp(13px, 1.2vw, 16px);
  --fluid-tiny: clamp(12px, 1.1vw, 15px);

  /* === FLUID SPACING === */
  --fluid-space-xl: clamp(40px, 8vw, 120px);
  --fluid-space-lg: clamp(30px, 6vw, 80px);
  --fluid-space-md: clamp(20px, 4vw, 60px);
  --fluid-space: clamp(16px, 3vw, 40px);
  --fluid-space-sm: clamp(12px, 2vw, 30px);
  --fluid-space-xs: clamp(8px, 1.5vw, 20px);

  /* === FLUID LETTER SPACING === */
  --fluid-tracking-xl: clamp(8px, 2vw, 20px);
  --fluid-tracking-lg: clamp(4px, 1.5vw, 12px);
  --fluid-tracking-md: clamp(2px, 1vw, 8px);
  --fluid-tracking-sm: clamp(1px, 0.5vw, 4px);

  /* === LINE HEIGHTS === */
  --line-tight: 1.1;
  --line-normal: 1.5;
  --line-relaxed: 1.65;
  --line-loose: 1.85;

  /* === FLUID BORDERS === */
  --fluid-border-thin: clamp(1px, 0.1vw, 2px);
  --fluid-border: clamp(2px, 0.2vw, 3px);

  /* === FLUID GAPS === */
  --fluid-gap-xl: clamp(40px, 6vw, 100px);
  --fluid-gap-lg: clamp(30px, 5vw, 80px);
  --fluid-gap-md: clamp(20px, 3vw, 50px);
  --fluid-gap: clamp(16px, 2.5vw, 40px);
  --fluid-gap-sm: clamp(12px, 2vw, 30px);
  --fluid-gap-xs: clamp(8px, 1.5vw, 20px);

  /* === TRANSITIONS === */
  --transition-fast: 0.2s ease;
  --transition-base: 0.3s ease;
  --transition-slow: 0.5s ease;
}

/* === VIEWPORT OVERRIDES === */
@media (max-width: 400px) {
  :root {
    --fluid-title-xl: clamp(20px, 8vw, 28px);
    --fluid-space-xl: clamp(20px, 6vw, 40px);
  }
}

@media (min-width: 2000px) {
  :root {
    --fluid-title-xl: min(72px, 3.6vw);
    --fluid-space-xl: min(120px, 6vw);
  }
}

/* === PRINT STYLES === */
@media print {
  :root {
    --fluid-title-xl: 48pt;
    --fluid-title-lg: 36pt;
    --fluid-title-md: 24pt;
    --fluid-body: 12pt;
    --fluid-space: 20pt;
    --fluid-space-lg: 40pt;
  }
}