/**
 * Universo Prematuro Design — Design Tokens
 * Gerado a partir de tokens/color.json, typography.json, spacing.json, radius.json
 * Equivalente ao artefato build/web/tokens.css
 * Não editar à mão — alterar os JSONs fonte e regerar.
 */

:root {
  /* ===== Color — paleta bruta ===== */
  --color-cream-50: #FFFFFF;
  --color-cream-100: #FEFEFA;

  --color-gray-50: #F6F6F6;
  --color-gray-100: #E4E4E4;
  --color-gray-300: #A7A7A7;
  --color-gray-500: #777777;
  --color-gray-700: #343434;
  --color-gray-900: #191514;

  --color-green-100: #EBFFE8;
  --color-green-200: #BFD6B3;
  --color-green-300: #8FD683;
  --color-green-400: #68B65A;
  --color-green-700: #376430;

  --color-orange-100: #FAE4DD;
  --color-orange-200: #F6A88E;
  --color-orange-400: #EF7C5B;
  --color-orange-700: #C65030;

  --color-white: #FFFFFF;
  --color-black: #000000;
  --color-transparent: #00000000;

  /* ===== Color — semânticos ===== */
  --color-brand-primary: var(--color-green-400);
  --color-brand-secondary: var(--color-orange-400);
  --color-brand-primary-on-dark: #68B65A;

  --color-semantic-error: #F44336;
  --color-semantic-success: var(--color-green-400);

  --color-text-primary: var(--color-gray-900);
  --color-text-secondary: var(--color-gray-700);
  --color-text-hint: var(--color-gray-500);

  --color-border-default: var(--color-gray-300);
  --color-border-subtle: var(--color-gray-100);

  /* Surface — valores padrão (tema claro) */
  --color-surface-background: var(--color-cream-100);
  --color-surface-default: var(--color-cream-50);
  --color-surface-input: var(--color-gray-50);
  --color-surface-muted: var(--color-gray-50);
  --color-surface-divider: var(--color-gray-100);

  --color-interactive-disabled-background: var(--color-gray-100);
  --color-interactive-disabled-foreground: var(--color-gray-500);

  /* ===== Typography ===== */
  --typography-font-family-sans: "Nunito", sans-serif;

  --typography-font-weight-regular: 400;
  --typography-font-weight-semibold: 600;
  --typography-font-weight-bold: 700;

  --typography-font-size-xs: 10px;
  --typography-font-size-sm: 12px;
  --typography-font-size-md: 14px;
  --typography-font-size-lg: 16px;
  --typography-font-size-xl: 24px;
  --typography-font-size-2xl: 32px;

  --typography-line-height-tight: 1.2;
  --typography-line-height-normal: 1.5;

  /* ===== Spacing ===== */
  --spacing-0: 0px;
  --spacing-1: 4px;
  --spacing-2: 8px;
  --spacing-3: 12px;
  --spacing-4: 16px;
  --spacing-5: 20px;
  --spacing-6: 24px;
  --spacing-8: 32px;
  --spacing-12: 48px;

  /* ===== Radius ===== */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 106px;
}

/* Tema escuro — só os tokens de surface têm variante "dark" no JSON fonte */
[data-theme="dark"] {
  --color-surface-background: #121212;
  --color-surface-default: #1E1E1E;
  --color-surface-input: #2E2E2E;
  --color-surface-divider: #2E2E2E;
  /* surface.muted não tem variante dark no JSON — mantém o valor claro */
}