/* =========================================================
   KONFLIKT — Design Tokens
   Derived from Brand Book v1.0
   ========================================================= */

:root {
  /* --- Brand palette (from Brand Book) --- */
  --onyx: #131112;
  --yellow-green: #A4CD39;
  --ghost-white: #F7F7FF;
  --midnight-violet: #1C0221;
  --vintage-lavender: #7F6A93;

  /* --- Functional roles --- */
  --bg-primary: var(--midnight-violet);
  --bg-elevated: #26082e;          /* one step up from midnight-violet, for cards */
  --bg-onyx: var(--onyx);
  --text-primary: var(--ghost-white);
  /* Vintage Lavender lightened ~35% toward Ghost White for body-copy
     contrast (WCAG AA); the pure brand hex is kept as --tag-color for
     small labels/eyebrows where the brand book calls for the exact swatch. */
  --text-secondary: #A99BB9;
  --tag-color: var(--vintage-lavender);
  --accent: var(--yellow-green);
  --accent-contrast: var(--onyx);  /* text color placed on top of accent fills */
  --hairline: rgba(247, 247, 255, 0.12);
  --hairline-strong: rgba(247, 247, 255, 0.22);

  /* --- Type families --- */
  --font-display: 'Sora', 'Inter', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', 'Courier New', monospace;

  /* --- Type scale (fluid) --- */
  --fs-hero: clamp(2.75rem, 6vw + 1rem, 6.5rem);
  --fs-h1: clamp(2rem, 3.5vw + 1rem, 3.5rem);
  --fs-h2: clamp(1.5rem, 2vw + 1rem, 2.25rem);
  --fs-h3: clamp(1.125rem, 1vw + 1rem, 1.5rem);
  --fs-body: clamp(1rem, 0.3vw + 0.9rem, 1.125rem);
  --fs-small: 0.875rem;
  --fs-label: 0.75rem;

  /* --- Spacing scale --- */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 2rem;
  --space-lg: 4rem;
  --space-xl: 7rem;
  --space-2xl: 11rem;

  /* --- Layout --- */
  --content-max: 1400px;
  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --header-h: calc(44px + 2 * var(--space-sm)); /* logo height + header padding */

  /* --- Motion --- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 0.2s;
  --dur-med: 0.5s;
  --dur-slow: 0.9s;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0.01s;
    --dur-med: 0.01s;
    --dur-slow: 0.01s;
  }
}