/* Hallmark · macrostructure: Workbench · tone: editorial · anchor hue: 155
 * genre: editorial · family: DraftSOS
 * design-system: draftsos-family-design.md
 */

/* ============================================
   Design Tokens — DraftSOS Family OKLCH System
   ============================================ */

:root {
  /* ── Surfaces — light mode (primary) ── */
  --color-paper:      oklch(0.98 0.003 155);
  --color-paper-2:    oklch(0.94 0.004 155);
  --color-paper-3:    oklch(0.88 0.005 155);

  /* ── Accent — field green ── */
  --color-accent:       oklch(0.52 0.12 155);
  --color-accent-dim:   oklch(0.42 0.10 155);
  --color-accent-ghost: oklch(0.52 0.12 155 / 0.12);

  /* ── Secondary — amber/gold (warnings, premium badges, highlights) ── */
  --color-secondary:       oklch(0.72 0.16 75);
  --color-secondary-dim:   oklch(0.58 0.14 75);

  /* ── Risk — red (tough matchups, negative signals) ── */
  --color-risk:       oklch(0.55 0.20 25);
  --color-risk-dim:   oklch(0.45 0.16 25);
  --color-risk-ghost: oklch(0.55 0.20 25 / 0.10);

  /* ── Ink ── */
  --color-ink:       oklch(0.15 0.005 155);
  --color-ink-80:    oklch(0.15 0.005 155 / 0.80);
  --color-ink-muted: oklch(0.45 0.005 155);

  /* ── Borders ── */
  --color-border-subtle:  oklch(0.15 0.005 155 / 0.08);
  --color-border-default: oklch(0.15 0.005 155 / 0.15);

  /* ── Dark mode surfaces ── */
  --color-void:     oklch(0.12 0.005 155);
  --color-surface:  oklch(0.16 0.006 155);
  --color-raised:   oklch(0.20 0.007 155);

  /* ── Legacy compat aliases (shared components) ── */
  --bg-base: var(--color-paper);
  --bg-elevated: var(--color-paper-2);
  --bg-surface: var(--color-paper-3);
  --bg-surface-hover: oklch(0.82 0.006 155);
  --bg-overlay: oklch(0.12 0.005 155 / 0.50);

  --glow-positive: var(--color-accent);
  --glow-insight: var(--color-secondary);
  --glow-warning: var(--color-secondary);
  --glow-risk: var(--color-risk);

  --accent: var(--color-accent);
  --accent-rgb: 27, 107, 58;
  --accent-soft: var(--color-accent-ghost);
  --accent-glow: oklch(0.52 0.12 155 / 0.15);

  --text-primary: var(--color-ink);
  --text-secondary: var(--color-ink-80);
  --text-muted: var(--color-ink-muted);
  --text-accent: var(--color-accent);

  --border-default: var(--color-border-default);
  --border-hover: var(--color-border-default);
  --border-accent: var(--color-accent);

  /* ── Typography ── */
  --font-display: 'Clash Display', sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-mono: 'Geist Mono', 'SF Mono', monospace;

  /* ── Spacing (4pt base) ── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* Legacy spacing aliases */
  --space-xs: var(--space-1);
  --space-sm: var(--space-2);
  --space-md: var(--space-4);
  --space-lg: var(--space-6);
  --space-xl: var(--space-8);
  --space-2xl: var(--space-12);
  --space-3xl: var(--space-16);
  --space-section: var(--space-20);
  --section-tight: 3rem;
  --section-generous: 5rem;

  /* ── Radius ── */
  --radius-sm: 8px;
  --radius-md: 8px;
  --radius-lg: 24px;

  /* ── Container ── */
  --container-max: 1120px;
  --nav-height: 60px;

  /* ── Shadows — none (editorial: flat surfaces only) ── */
  --shadow-1: none;
  --shadow-2: none;
  --shadow-3: none;
  --shadow-4: none;
  --shadow-5: none;
  --shadow-accent: none;
  --shadow-accent-lg: none;

  /* ── Gradients — SOLID SURFACES ONLY ── */
  --grad-hero: var(--color-paper);
  --grad-hero-accent: var(--color-paper);
  --grad-card: var(--color-paper);
  --grad-accent: var(--color-accent);
  --grad-accent-light: var(--color-accent-ghost);
  --grad-cta: var(--color-accent);
  --grad-cta-hover: var(--color-accent-dim);
  --grad-divider: linear-gradient(90deg, transparent, var(--color-border-subtle), transparent);
  --grad-dark-section: var(--color-void);

  /* ── Animation ── */
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 400ms;
  --duration-reveal: 600ms;
  --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-expo: var(--ease-out);
  --stagger: 0.06s;

  /* ── Premium Accents ── */
  --accent-line-width: 3px;
  --accent-line: var(--color-accent);
  --accent-dot: var(--color-accent);
  --glass-blur: 12px;
  --glass-bg: var(--color-paper);
  --glass-border: var(--color-border-subtle);
}

/* ── Dark Mode ── */
[data-theme="dark"] {
  --color-paper:    var(--color-void);
  --color-paper-2:  var(--color-surface);
  --color-paper-3:  var(--color-raised);
  --color-ink:      oklch(0.95 0.003 155);
  --color-ink-80:   oklch(0.95 0.003 155 / 0.80);
  --color-ink-muted: oklch(0.60 0.005 155);
  --color-border-subtle:  oklch(0.95 0.003 155 / 0.10);
  --color-border-default: oklch(0.95 0.003 155 / 0.18);

  --bg-base: var(--color-void);
  --bg-elevated: var(--color-surface);
  --bg-surface: var(--color-raised);
  --bg-surface-hover: oklch(0.24 0.007 155);
  --bg-overlay: oklch(0.12 0.005 155 / 0.70);

  --text-primary: oklch(0.95 0.003 155);
  --text-secondary: oklch(0.70 0.005 155);
  --text-muted: oklch(0.55 0.005 155);

  --border-default: oklch(0.95 0.003 155 / 0.18);
  --border-hover: oklch(0.95 0.003 155 / 0.25);

  --glass-bg: oklch(0.16 0.006 155 / 0.80);
  --glass-border: oklch(0.95 0.003 155 / 0.12);

  --grad-hero: var(--color-void);
  --grad-card: var(--color-surface);
  --grad-dark-section: var(--color-void);
}

/* ── Domain Overrides ── */
/* All DraftSOS family sites use the same green accent (hue 155).
   Domain-specific color is handled via position badges, not accent. */
[data-domain="idpranks"],
[data-domain="draftsim"],
[data-domain="superflex"],
[data-domain="draftstrategy"] {
  --accent: var(--color-accent);
  --accent-rgb: 42, 148, 100;
  --accent-soft: var(--color-accent-ghost);
  --accent-glow: oklch(0.52 0.12 155 / 0.15);
}

/* ── Skip Link (Accessibility) ── */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  background: var(--accent);
  color: var(--color-paper);
  font-weight: 600;
  font-size: 0.875rem;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  z-index: 10000;
  text-decoration: none;
  transition: top var(--duration-fast);
}
.skip-link:focus {
  top: 0;
}

/* ── Reduced Motion ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}