/* tokens.css - design tokens (iOS Health / macOS Settings) v2 */

:root {
  /* ─── Layout ────────────────────────────────────────────── */
  --container-max: 1120px;
  --content-max: 760px;
  --hero-max: 680px;

  /* ─── Spacing scale ─────────────────────────────────────── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* ─── Radius ────────────────────────────────────────────── */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-2xl: 32px;
  --radius-full: 9999px;

  /* ─── Shadows (Apple soft, multi-layer) ─────────────────── */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.03);
  --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.06), 0 2px 4px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 14px 36px rgba(0, 0, 0, 0.08), 0 6px 12px rgba(0, 0, 0, 0.04);
  --shadow-xl: 0 28px 72px rgba(0, 0, 0, 0.12), 0 12px 24px rgba(0, 0, 0, 0.06);
  --shadow-focus: 0 0 0 4px rgba(0, 122, 255, 0.15);
  --shadow-inner: inset 0 1px 0 rgba(255, 255, 255, 0.6);

  /* ─── Typography ────────────────────────────────────────── */
  --font-base: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
               "Segoe UI", "Helvetica Neue", Arial, system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --text-xs: 0.75rem;       /* 12px */
  --text-sm: 0.875rem;      /* 14px */
  --text-md: 1rem;          /* 16px */
  --text-lg: 1.125rem;      /* 18px */
  --text-xl: 1.25rem;       /* 20px */
  --text-2xl: 1.5rem;       /* 24px */
  --text-3xl: 1.875rem;     /* 30px */
  --text-4xl: 2.25rem;      /* 36px */
  --text-5xl: 3rem;         /* 48px */
  --text-6xl: 3.75rem;      /* 60px */
  --text-7xl: 4.5rem;       /* 72px */

  --leading-tighter: 1.05;
  --leading-tight: 1.15;
  --leading-snug: 1.3;
  --leading-base: 1.55;
  --leading-loose: 1.75;

  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-extrabold: 800;
  --weight-black: 900;

  --tracking-tighter: -0.04em;
  --tracking-tight: -0.02em;
  --tracking-base: 0;
  --tracking-wide: 0.02em;
  --tracking-widest: 0.08em;

  /* ─── Colors - base ─────────────────────────────────────── */
  --color-bg: #F5F5F7;
  --color-bg-elevated: #FAFAFC;
  --color-surface: #FFFFFF;
  --color-surface-soft: #F8F8FB;
  --color-surface-glass: rgba(255, 255, 255, 0.72);
  --color-surface-glass-strong: rgba(255, 255, 255, 0.88);

  --color-text: #1D1D1F;
  --color-text-muted: #6E6E73;
  --color-text-tertiary: #6B6B70;   /* WCAG 2026-05-18: 3.26:1 -> 5.08:1 */
  --color-text-on-primary: #FFFFFF;
  --color-text-on-dark: #F5F5F7;

  /* Brand primary = verde do logo (decreto 2026-05-20: paleta unificada verde-saude).
     #1B8A3F sobre branco = 5.45:1 (WCAG AA). Sucessor do azul #0066D6 anterior. */
  --color-primary: #1B8A3F;
  --color-primary-hover: #157031;
  --color-primary-active: #0F5524;
  --color-primary-soft: rgba(27, 138, 63, 0.10);
  --color-primary-softer: rgba(27, 138, 63, 0.05);

  /* Verde claro (accent secundario: badges, success states, complementar ao primary).
     iOS Health green #34C759. */
  --color-primary-light: #34C759;
  --color-primary-light-soft: rgba(52, 199, 89, 0.12);

  /* Secondary = azul ecossistema iOS (links auxiliares, CTA secundario, focus accent).
     Mantido do esquema anterior pra contraste com o verde primario. */
  --color-secondary: #0066D6;
  --color-secondary-hover: #0051B8;
  --color-secondary-soft: rgba(0, 102, 214, 0.10);

  /* Aliases legados pra accent (compatibilidade com gradientes existentes) */
  --color-accent: #34C759;       /* era #5AC8FA (cyan) — agora verde-claro */
  --color-accent-2: #0066D6;     /* era #BF5AF2 (purple) — agora secondary blue */
  --color-accent-3: #FF9F0A;     /* mantido (warning orange, usado em chips) */

  --color-border: rgba(0, 0, 0, 0.07);
  --color-border-strong: rgba(0, 0, 0, 0.14);
  --color-divider: rgba(0, 0, 0, 0.05);

  --color-success: #34C759;
  --color-success-soft: rgba(52, 199, 89, 0.12);
  --color-warning: #FF9500;
  --color-warning-soft: rgba(255, 149, 0, 0.12);
  --color-danger: #FF3B30;
  --color-danger-soft: rgba(255, 59, 48, 0.1);
  --color-info: #5AC8FA;

  /* Dark surfaces (pra code blocks tipo terminal) */
  --color-code-bg: #1D1D1F;
  --color-code-text: #F5F5F7;
  --color-code-accent: #5AC8FA;

  /* ─── Chapter colors (Apple Health palette) ─────────────── */
  --chap-1: #FF9500;  /* infecciosas/parasitárias - laranja */
  --chap-2: #BF5AF2;  /* neoplasias - roxo */
  --chap-3: #FF453A;  /* sangue - vermelho */
  --chap-4: #FFD60A;  /* endócrinas - amarelo */
  --chap-5: #BF5AF2;  /* mentais - roxo */
  --chap-6: #5E5CE6;  /* nervoso - indigo */
  --chap-7: #00C7BE;  /* olho - teal */
  --chap-8: #64D2FF;  /* ouvido - cyan */
  --chap-9: #FF3B30;  /* circulatório - vermelho cardíaco */
  --chap-10: #5AC8FA; /* respiratório - azul claro */
  --chap-11: #FF9F0A; /* digestivo - laranja escuro */
  --chap-12: #FF6482; /* pele - pink */
  --chap-13: #32D74B; /* osteomuscular - verde */
  --chap-14: #007AFF; /* geniturinário - azul */
  --chap-15: #FF6482; /* gravidez - pink */
  --chap-16: #FFD60A; /* perinatal - amarelo */
  --chap-17: #5E5CE6; /* malformações - indigo */
  --chap-18: #8E8E93; /* sintomas - cinza */
  --chap-19: #FF453A; /* lesões - vermelho */
  --chap-20: #64D2FF; /* externas - cyan */
  --chap-21: #34C759; /* fatores - verde */
  --chap-22: #8E8E93; /* códigos especiais - cinza */

  /* ─── Transitions ───────────────────────────────────────── */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --transition-fast: 0.14s var(--ease-out);
  --transition-base: 0.22s var(--ease-out);
  --transition-slow: 0.36s var(--ease-out);

  /* ─── Header ────────────────────────────────────────────── */
  --header-h: 56px;

  /* ─── Hero gradient (subtle mesh verde-saude com pinga de azul) ─────── */
  --hero-gradient:
    radial-gradient(ellipse 70% 50% at 50% 0%, rgba(27, 138, 63, 0.07), transparent 60%),
    radial-gradient(ellipse 50% 40% at 20% 30%, rgba(52, 199, 89, 0.05), transparent 60%),
    radial-gradient(ellipse 50% 40% at 80% 30%, rgba(0, 102, 214, 0.04), transparent 60%);
}