/* Igma × Blip Design System — tokens v0.1
   Base: Igma DS 2.0 + takenet/blip-ds (color-primary). Fonte: igma-blip-ds.html */

:root {
  /* Cor — tema claro */
  --bg: #FAFAF8;
  --surface: #FFFFFF;
  --sunken: #F5F5F3;
  --ink: #0A0A0A;
  --ink-2: #555550;
  --ink-3: #737370;          /* só metadado; 4,55:1 */
  --line: #E8E8E4;
  --line-strong: #D4D4CF;
  --accent: #1E6BF1;         /* Blip primary; 4,54:1 sobre bg */
  --accent-ink: #174FB8;     /* texto, link, hover; 7,06:1 */
  --accent-on: #FFFFFF;
  --accent-soft: #E8F0FE;
  --mark: #FF462E;           /* marca Igma; só gráfico, nunca texto ou botão */
  --ok: #1A7A4A;   --ok-soft: #E6F5EE;
  --warn: #C97C00; --warn-soft: #FFF8E6;   /* warn não serve de texto */
  --bad: #CC2222;  --bad-soft: #FDEAEA;
  --focus: #C226FB;

  /* Tipografia */
  --font: 'Space Grotesk', system-ui, sans-serif;
  --display: 'Playfair Display', Georgia, serif;   /* a partir de 24px, 1 bloco por viewport */
  --fs-display: clamp(34px, 5vw, 56px);
  --fs-title: 28px;
  --fs-body: 16px;
  --fs-caption: 13px;
  --fs-meta: 12px;
  --lh-display: 1.05;
  --lh-title: 1.2;
  --lh-body: 1.6;
  --ls-meta: 0.1em;

  /* Espaço (base 4px) */
  --sp-1: 4px;  --sp-2: 8px;  --sp-4: 16px; --sp-6: 24px;
  --sp-8: 32px; --sp-12: 48px; --sp-16: 64px; --sp-24: 96px;
  --gutter: clamp(16px, 4vw, 48px);
  --container: 1200px;
  --grid-gap: 24px;

  /* Forma */
  --r-sm: 4px; --r-md: 8px; --r-lg: 12px; --r-full: 9999px;
  --touch-min: 44px;
  --focus-ring: 3px solid var(--focus);
  --focus-offset: 3px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0A0A0A; --surface: #141413; --sunken: #1F1F1D;
    --ink: #FAFAF8; --ink-2: #A8A8A2; --ink-3: #9A9A94;
    --line: #2A2A27; --line-strong: #3A3A37;
    --accent: #7FA8FF; --accent-ink: #7FA8FF; --accent-on: #0A0A0A; --accent-soft: #14233F;
    --mark: #FF6E5A;
    --ok: #5FD39A; --ok-soft: #10261B; --warn: #E5A93B; --warn-soft: #2B2112; --bad: #FF7A7A; --bad-soft: #2D1515;
    --focus: #E08BFF;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0A0A0A; --surface: #141413; --sunken: #1F1F1D;
  --ink: #FAFAF8; --ink-2: #A8A8A2; --ink-3: #9A9A94;
  --line: #2A2A27; --line-strong: #3A3A37;
  --accent: #7FA8FF; --accent-ink: #7FA8FF; --accent-on: #0A0A0A; --accent-soft: #14233F;
  --mark: #FF6E5A;
  --ok: #5FD39A; --ok-soft: #10261B; --warn: #E5A93B; --warn-soft: #2B2112; --bad: #FF7A7A; --bad-soft: #2D1515;
  --focus: #E08BFF;
  color-scheme: dark;
}

/* Breakpoints (documentação; media queries não aceitam var()):
   wide ≥1200 · desktop 901–1199 · tablet 561–900 · mobile ≤560 */