/* Otoscopia Kids · Design System · tokens v0.3.0
   Fonte de verdade para web. A documentação está em "Design System - Otoscopia Kids.md".
   v0.2.0: paleta Espectro (9 cores) e neutros em duas opções claras e duas escuras.
   v0.3.0: direção limpa. Display em Inter Tight, botões em pílula, mais respiro. */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Inter+Tight:wght@500;600;700&display=swap");

:root {
  /* Espectro: as 9 cores da marca */
  --vermelho-500: #f2002b;   /* Racing Red */
  --escarlate-500: #f64021;  /* Scarlet Fire */
  --tangerina-500: #f98016;  /* Vivid Tangerine */
  --ambar-500: #fcc00b;      /* Amber Gold: a luz do otoscópio, CTA principal */
  --amarelo-500: #ffff00;    /* Yellow: só brilho e realce, nunca texto nem fundo */
  --esmeralda-500: #00cc66;  /* Emerald */
  --royal-500: #496ddb;      /* Royal Blue */
  --indigo-500: #7209b7;     /* Indigo Bloom */
  --framboesa-500: #a01a7d;  /* Raspberry Plum */

  /* Variações derivadas */
  --vermelho-600: #d4001f;
  --vermelho-800: #8f0019;
  --escarlate-800: #94260f;
  --tangerina-800: #8a4200;
  --ambar-300: #ffdc6b;
  --ambar-600: #e5ad00;
  --ambar-700: #8a6400;      /* texto âmbar sobre claro */
  --amarelo-800: #6b6b00;
  --esmeralda-800: #00663a;
  --royal-300: #8fa5ec;
  --royal-600: #3553b8;
  --royal-800: #23409e;
  --indigo-300: #b98ae6;
  --indigo-800: #4a0577;
  --framboesa-800: #6a0f52;

  /* Tintas pastel dos cartões, uma por cor do espectro */
  --tinta-vermelho: #ffe3e8;
  --tinta-escarlate: #ffe6df;
  --tinta-tangerina: #ffeedd;
  --tinta-ambar: #fff4cc;
  --tinta-ambar-forte: #ffe27a;
  --tinta-amarelo: #ffffd6;
  --tinta-esmeralda: #d6f7e6;
  --tinta-royal: #e2e9fb;
  --tinta-indigo: #efe2fa;
  --tinta-framboesa: #f7e0f1;

  /* Palco: noite índigo, sempre escuro, nos dois temas */
  --palco-900: #0f0b24;
  --palco-800: #1a0f3d;
  --palco-600: #2e1f5e;
  --palco-400: #6a5a9e;

  /* Neutros claros · opção Papel (padrão, quente) */
  --canvas: #fffdf8;
  --surface: #faf6ee;
  --surface-soft: #fdfbf6;
  --hairline: #eee7da;
  --hairline-soft: #f4efe5;
  --hairline-strong: #d6cdbc;

  /* Texto: tinta índigo, nunca preto puro */
  --ink-deep: #0f0b24;
  --ink: #1a1530;
  --charcoal: #2f2a45;
  --slate: #5a5470;
  --steel: #6f6a86;
  --stone: #a29db3;
  --muted: #c4c0cf;
  --on-dark: #ffffff;
  --on-dark-muted: #b8b0d6;
  --on-primary: #1a1530;
  --texto-tinta: #2f2a45;

  /* Papéis semânticos */
  --primary: var(--ambar-500);
  --primary-pressed: var(--ambar-600);
  --link: var(--royal-600);
  --success: var(--esmeralda-800);
  --warning: var(--tangerina-800);
  --error: var(--vermelho-600);
  --sombra-rgb: 26, 21, 48;

  /* Tipografia */
  --font-display: "Inter Tight", "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Forma */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-xxl: 36px;
  --r-full: 9999px;
  --r-botao: 9999px;

  /* Espaço, base 4 */
  --s-xxs: 4px;
  --s-xs: 8px;
  --s-sm: 12px;
  --s-md: 16px;
  --s-lg: 20px;
  --s-xl: 24px;
  --s-xxl: 32px;
  --s-xxxl: 40px;
  --s-section-sm: 48px;
  --s-section: 64px;
  --s-section-lg: 96px;
  --s-hero: 120px;
  --s-section-xl: 160px;
  --s-section-xxl: 220px;

  /* Elevação: sombra tingida de índigo e borda de luz no topo */
  --luz-borda: inset 0 1px 0 rgba(255, 255, 255, 0.85);
  --e-1: 0 1px 2px rgba(var(--sombra-rgb), 0.06), var(--luz-borda);
  --e-2: 0 8px 20px -6px rgba(var(--sombra-rgb), 0.16), 0 2px 4px rgba(var(--sombra-rgb), 0.05), var(--luz-borda);
  --e-3: 0 32px 64px -14px rgba(15, 11, 36, 0.42);
  --e-4: 0 22px 54px -12px rgba(15, 11, 36, 0.32);
  --foco: 0 0 0 4px rgba(252, 192, 11, 0.5);
  --volume: radial-gradient(120% 90% at 18% 0%, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0) 55%);

  /* Movimento: parâmetros de mola no formato Apple (amortecimento, resposta em segundos) */
  --mola-padrao: "1.0 0.35";
  --mola-impulso: "0.8 0.4";
  --toque-duracao: 90ms;
}

/* Neutros claros · opção Névoa (fria, puxada ao índigo) */
:root[data-claro="nevoa"] {
  --canvas: #fcfcff;
  --surface: #f4f3fa;
  --surface-soft: #f9f9fd;
  --hairline: #e6e4f0;
  --hairline-soft: #eeedf6;
  --hairline-strong: #cac7db;
}

/* Neutros escuros · opção Noite índigo (padrão do tema escuro) */
:root[data-theme="dark"] {
  --canvas: #0f0b24;
  --surface: #17122f;
  --surface-soft: #130e29;
  --hairline: #2a2347;
  --hairline-soft: #201a3b;
  --hairline-strong: #3e355f;
  --ink-deep: #ffffff;
  --ink: #f6f3ff;
  --charcoal: #ded9f0;
  --slate: #b0a9cc;
  --steel: #8b84a8;
  --stone: #6c658a;
  --muted: #4f4970;
  --link: var(--royal-300);
  --success: var(--esmeralda-500);
  --warning: var(--tangerina-500);
  --sombra-rgb: 0, 0, 0;
  --luz-borda: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  --volume: radial-gradient(120% 90% at 18% 0%, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0) 55%);
}
/* Neutros escuros · opção Grafite (quase sem matiz) */
:root[data-theme="dark"][data-escuro="grafite"] {
  --canvas: #121215;
  --surface: #1b1b20;
  --surface-soft: #16161a;
  --hairline: #2c2c34;
  --hairline-soft: #222228;
  --hairline-strong: #44444f;
  --ink: #f5f5f7;
  --charcoal: #dcdce2;
  --slate: #b2b2bd;
  --steel: #8d8d99;
  --stone: #6c6c78;
  --muted: #4d4d58;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --canvas: #0f0b24;
    --surface: #17122f;
    --surface-soft: #130e29;
    --hairline: #2a2347;
    --hairline-soft: #201a3b;
    --hairline-strong: #3e355f;
    --ink-deep: #ffffff;
    --ink: #f6f3ff;
    --charcoal: #ded9f0;
    --slate: #b0a9cc;
    --steel: #8b84a8;
    --stone: #6c658a;
    --muted: #4f4970;
    --link: var(--royal-300);
    --success: var(--esmeralda-500);
    --warning: var(--tangerina-500);
    --sombra-rgb: 0, 0, 0;
    --luz-borda: inset 0 1px 0 rgba(255, 255, 255, 0.08);
    --volume: radial-gradient(120% 90% at 18% 0%, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0) 55%);
  }
  :root:not([data-theme="light"])[data-escuro="grafite"] {
    --canvas: #121215;
    --surface: #1b1b20;
    --surface-soft: #16161a;
    --hairline: #2c2c34;
    --hairline-soft: #222228;
    --hairline-strong: #44444f;
    --ink: #f5f5f7;
    --charcoal: #dcdce2;
    --slate: #b2b2bd;
    --steel: #8d8d99;
    --stone: #6c6c78;
    --muted: #4d4d58;
  }
}