/* ════════════════════════════════════════════════════════════════
   INSUCALC · Design Tokens — Redesign v3
   ────────────────────────────────────────────────────────────────
   FONTE DA VERDADE: design/handoff/HANDOFF.md › "Design Tokens".
   Valores de cor, sombra, gradiente e easing são transcritos VERBATIM.
   Onde o handoff dá FAIXAS (tipografia, raios, algumas durações), foi
   usado o "valor canônico das telas" — o valor exato que o handoff
   aplica nas telas concretas (decisão aprovada; nada interpolado).

   Nomenclatura: --ic-{categoria}-{nome}.
   ════════════════════════════════════════════════════════════════ */

/* 6. Fontes (Geist 300–700, Playfair Display 400–600) — Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300..700&family=Playfair+Display:wght@400..600&display=swap');

/* ════════════════════════════════════════════════════════════════
   1. TEMA CLARO  (:root)
   ════════════════════════════════════════════════════════════════ */
:root {
  /* ── Cores — tema claro (HANDOFF › Cores — tema claro) ────────── */
  --ic-color-bg:               #FAF9F6; /* fundo da aplicação */
  --ic-color-card:             #FFFFFF; /* superfícies/cartões */
  --ic-color-border:           #ECE8DF; /* bordas de cartões e inputs */
  --ic-color-hairline:         #F1EEE7; /* divisórias internas, chips neutros */
  --ic-color-ink:              #17251C; /* texto principal */
  --ic-color-body:             #3D4A42; /* texto corrido secundário */
  --ic-color-muted:            #7A857C; /* labels, metadados */
  --ic-color-sage:             #4A6B5A; /* texto de apoio esverdeado */
  --ic-color-axis:             #A8B0A8; /* eixos/legendas de gráfico */
  --ic-color-brand:            #0D3C1F; /* verde-profundo: CTAs, dose, ativo */
  --ic-color-emerald:          #3D7F61; /* acento: carbo, links, focos, "na faixa" */
  --ic-color-tint:             #E9F1EC; /* fundo de seleção/tiles verdes */
  --ic-color-amber:            #9A6A16; /* "alto", avisos */
  --ic-color-amber-tint:       #F5EDDA; /* fundo de aviso */
  --ic-color-amber-border:     #E5D4A8; /* borda do cartão de dose alta */
  --ic-color-amber-ink:        #7A5410; /* texto do cartão de dose alta */
  --ic-color-red:              #A8432F; /* correção, exclusão, hipo */
  --ic-color-red-tint:         #F7E8E2; /* fundo vermelho suave */
  --ic-color-red-row:          #FBF6F3; /* linhas de correção */
  --ic-color-red-border:       #EAC9BC; /* bordas vermelhas */
  --ic-color-dot-high:         #C99A2E; /* ponto de gráfico — alta */
  --ic-color-dot-low:          #C0603F; /* ponto de gráfico — baixa */
  --ic-color-seg-off:          #E5E1D6; /* progresso/segmento inativo */
  --ic-color-dashed:           #DDD8CC; /* bordas tracejadas de estados vazios */
  --ic-color-disabled:         #C9CFC9; /* botão inerte */
  --ic-color-chart-line-hist:  #B9C6BD; /* curva do gráfico do Histórico */
  --ic-color-chart-line-spark: #9FB3A6; /* curva do sparkline (Hoje) */
  --ic-color-on-brand:         #FDFCF9; /* texto sobre verde */

  /* Extras do handoff, para paridade de nomes entre os temas
     (não estavam na lista de :root, mas o bloco dark os define) */
  --ic-color-tabbar:           rgba(255,255,255,.92); /* tab bar mobile translúcida (HANDOFF nav) */
  /* Selos de fonte (HANDOFF Passo 2): txt / fundo */
  --ic-color-selo-tbca:        #4A6B5A; --ic-color-selo-tbca-bg: #E9F1EC;
  --ic-color-selo-taco:        #44548F; --ic-color-selo-taco-bg: #EBEEF7;
  --ic-color-selo-meu:         #7A5BB8; --ic-color-selo-meu-bg:  #F0EBF9;

  /* Notificações e modais (HANDOFF › Notificações / Modais) */
  --ic-color-toast-err-ink:    #FFF6F2;             /* texto do toast de erro (sobre red) */
  --ic-color-backdrop:         rgba(23,37,28,.35);  /* fundo (scrim) dos modais */

  /* ── 3. Gradiente da dose (identidade — IDÊNTICO nos dois temas) ─ */
  --ic-gradient-dose: linear-gradient(165deg, #12452B, #0D3C1F);
  /* Cores do cartão de dose — FIXAS nos dois temas (parte da identidade,
     por isso NÃO são sobrescritas no bloco dark) — HANDOFF Passo 3 */
  --ic-color-dose-ink:     #ECF5EE;                /* texto sobre o gradiente */
  --ic-color-dose-hair:    rgba(236,245,238,.16);  /* hairline do breakdown */
  --ic-color-dose-step:    rgba(236,245,238,.14);  /* círculos dos passos */
  --ic-color-dose-btn-bg:  #FDFCF9;                /* botão "Registrar dose" */
  --ic-color-dose-btn-ink: #0D3C1F;                /* texto do botão */

  /* ── 3b. Documento / Relatório PDF (folha impressa) ─────────────
     FIXAS nos dois temas — a folha é sempre branca. Lidas via
     getComputedStyle e injetadas no <style> da janela de impressão
     (o popup não carrega tokens.css). Fonte única de cor. */
  --ic-color-doc-bg:     #FFFFFF; /* papel */
  --ic-color-doc-ink:    #17251C; /* texto principal */
  --ic-color-doc-muted:  #7A857C; /* labels, metadados */
  --ic-color-doc-line:   #ECE8DF; /* réguas/bordas */
  --ic-color-doc-accent: #3D7F61; /* carbo/acento */
  --ic-color-doc-brand:  #0D3C1F; /* marca, dose */

  /* ── 4. Tipografia ────────────────────────────────────────────── */
  /* Famílias */
  --ic-font-sans:    'Geist', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --ic-font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;

  /* Escala Geist (UI) — valores canônicos das telas */
  --ic-font-size-badge:      9px;    /* selo de fonte */
  --ic-font-size-nav:        9.5px;  /* label da tab bar */
  --ic-font-size-label:      10px;   /* labels de resumo uppercase */
  --ic-font-size-kicker:     10.5px; /* kicker do herói */
  --ic-font-size-caption:    11px;   /* labels de campo, disclaimer */
  --ic-font-size-caption-lg: 11.5px; /* subtítulos/sublinhas */
  --ic-font-size-sm:         12.5px; /* metadados, ingredientes */
  --ic-font-size-body:       13.5px; /* corpo de listas, dropdown */
  --ic-font-size-base:       14px;   /* corpo/nome de refeição */
  --ic-font-size-input:      15px;   /* inputs */
  --ic-font-size-md:         16px;   /* títulos de header/cartão */
  --ic-font-size-lg:         17px;   /* input de glicemia, título de cartão maior */

  /* Escala Playfair Display — números críticos e títulos de tela */
  --ic-font-display-kpi:       24px; /* KPIs */
  --ic-font-display-total:     26px; /* total de carbo, kcal */
  --ic-font-display-title:     27px; /* títulos de passo */
  --ic-font-display-title-lg:  30px; /* título do Histórico */
  --ic-font-display-greeting:  32px; /* saudação (Hoje) */
  --ic-font-display-dose-modal: 34px; /* dose no modal de detalhes */
  --ic-font-display-glucose:   60px; /* glicemia herói */
  --ic-font-display-dose:      70px; /* dose (cartão de dose) */

  /* Pesos */
  --ic-font-weight-light:    300;
  --ic-font-weight-regular:  400;
  --ic-font-weight-medium:   500;
  --ic-font-weight-semibold: 600;
  --ic-font-weight-bold:     700;

  /* Tracking de kickers/labels (uppercase) */
  --ic-tracking-tight:  0.09em; /* labels de campo */
  --ic-tracking-label:  0.1em;  /* labels de resumo */
  --ic-tracking-kicker: 0.12em; /* kicker do herói */
  --ic-tracking-wide:   0.14em; /* extremo superior */

  /* Números tabulares (doses, carbo, colunas) */
  --ic-font-numeric: tabular-nums;

  /* ── 5a. Raios — valores canônicos das telas ──────────────────── */
  --ic-radius-badge:   6px;   /* selo de fonte */
  --ic-radius-stepper: 9px;   /* botões −/＋ */
  --ic-radius-tile:    11px;  /* tiles de ícone (10–11) */
  --ic-radius-input:   13px;  /* inputs de formulário */
  --ic-radius-chip:    14px;  /* chips/opções, toast */
  --ic-radius-button:  16px;  /* CTA primário, busca */
  --ic-radius-card:    24px;  /* cartões, herói, modais */
  --ic-radius-dose:    26px;  /* cartão de dose */
  --ic-radius-pill:    999px; /* pills/chips */

  /* ── 5b. Sombras (HANDOFF › Escala e forma / telas) ───────────── */
  --ic-shadow-rest:     0 4px 24px rgba(13,60,31,0.05);        /* repouso */
  --ic-shadow-dropdown: 0 20px 40px -12px rgba(13,60,31,0.22); /* dropdown */
  --ic-shadow-cta:      0 16px 32px -14px rgba(13,60,31,.5);   /* CTA */
  --ic-shadow-dose:     0 24px 48px -20px rgba(13,60,31,0.55); /* cartão de dose */
  --ic-shadow-login:    0 20px 48px -20px rgba(13,60,31,.25);  /* cartão de login */
  --ic-shadow-toast:    0 18px 40px -12px rgba(10,16,12,.4);   /* toastr */
  --ic-shadow-navcta:   0 12px 24px -8px rgba(13,60,31,.55);   /* "Calcular" central elevado (nav mobile) */

  /* ── 5c. Motion (HANDOFF › Motion) ────────────────────────────── */
  /* Easings reutilizáveis */
  --ic-ease-standard:   ease;                        /* fadeUp, hover */
  --ic-ease-emphasized: cubic-bezier(.22,1,.36,1);   /* dlgIn, toastIn */
  --ic-ease-sheet:      cubic-bezier(.32,.72,0,1);   /* bottom sheet */
  --ic-ease-chart:      cubic-bezier(.4,0,.2,1);     /* chartDraw */

  /* Durações — valores canônicos (faixas resolvidas no topo/citado) */
  --ic-motion-fadeUp:          .3s;   /* entrada de telas/passos/alertas (.28–.3s) */
  --ic-motion-dlgIn:           .26s;  /* modal desktop */
  --ic-motion-sheetUp:         .34s;  /* bottom sheet */
  --ic-motion-toastIn:         .32s;  /* toastr */
  --ic-motion-chartDraw:       1.1s;  /* desenho das curvas */
  --ic-motion-chartDraw-delay: .15s;  /* atraso do chartDraw */
  --ic-motion-livePulse:       1.5s;  /* pontos de status (1.4–1.6s) */
  --ic-motion-hover:           .18s;  /* hovers (.15–.18s) */
  --ic-motion-active:          .15s;  /* active/press */
  --ic-motion-theme:           .3s;   /* transição de tema no root */

  /* Shorthands de animação (usam @keyframes ic-* definidos abaixo) */
  --ic-anim-fadeUp:    ic-fadeUp    var(--ic-motion-fadeUp)    var(--ic-ease-standard)   both;
  --ic-anim-dlgIn:     ic-dlgIn     var(--ic-motion-dlgIn)     var(--ic-ease-emphasized) both;
  --ic-anim-sheetUp:   ic-sheetUp   var(--ic-motion-sheetUp)   var(--ic-ease-sheet)      both;
  --ic-anim-toastIn:   ic-toastIn   var(--ic-motion-toastIn)   var(--ic-ease-emphasized) both;
  --ic-anim-livePulse: ic-livePulse var(--ic-motion-livePulse) ease-in-out infinite;
}

/* ════════════════════════════════════════════════════════════════
   2. TEMA ESCURO  (:root[data-theme="dark"])
   Sobrescreve os MESMOS nomes de cor. Tipografia, raios, sombras,
   gradiente e motion são independentes de tema e não se repetem.
   ════════════════════════════════════════════════════════════════ */
:root[data-theme="dark"] {
  /* ── Cores dadas pelo handoff (HANDOFF › Cores — tema escuro) ─── */
  --ic-color-bg:      #0F1512;
  --ic-color-card:    #18211B;
  --ic-color-border:  #26312A;
  --ic-color-hairline:#212B24;
  --ic-color-ink:     #E9F0EA;
  --ic-color-body:    #C4D0C6;
  --ic-color-muted:   #8CA092;
  --ic-color-sage:    #9DB3A4;
  --ic-color-axis:    #5E6D62;
  --ic-color-brand:   #6FAE8B;
  --ic-color-on-brand:#0F1512;
  --ic-color-tint:    rgba(111,174,139,.16);
  --ic-color-amber:   #D9B45C;
  --ic-color-amber-tint: rgba(217,180,92,.15);
  --ic-color-red:     #D98973;
  --ic-color-red-tint:rgba(217,137,115,.15);
  --ic-color-seg-off: #2A362E;
  --ic-color-tabbar:  rgba(15,21,18,.92);
  /* chart-line: o handoff dá uma cor única no dark → ambos os tokens */
  --ic-color-chart-line-hist:  #3E4F44;
  --ic-color-chart-line-spark: #3E4F44;
  /* Selos dark dados pelo handoff */
  --ic-color-selo-taco: #9FAEDC; --ic-color-selo-taco-bg: rgba(122,144,207,.18);
  --ic-color-selo-meu:  #C4B0E8; --ic-color-selo-meu-bg:  rgba(196,176,232,.16);

  /* ── DERIVADOS — NÃO constam no handoff ───────────────────────────
     Você optou por "derivar equivalentes dark". Cada valor é ancorado
     na paleta dark que o handoff FORNECE (reuso de matiz), não em cor
     nova arbitrária. Revisar no tokens-preview.html. */
  --ic-color-amber-ink:    #D9B45C;              /* = dark amber (texto em contexto âmbar) */
  --ic-color-amber-border: rgba(217,180,92,.30); /* dark amber, alpha > tint (.15) */
  --ic-color-red-row:      rgba(217,137,115,.07);/* dark red, mais tênue que red-tint (.15) */
  --ic-color-red-border:   rgba(217,137,115,.30);/* dark red, alpha > tint (.15) */
  --ic-color-dot-high:     #D9B45C;              /* = dark amber ("alta") */
  --ic-color-dot-low:      #D98973;              /* = dark red ("baixa") */
  --ic-color-dashed:       #313C34;              /* rampa neutra dark, 1 passo acima de seg-off (#2A362E) */
  --ic-color-disabled:     #3A463E;              /* rampa neutra dark, botão inerte */
  --ic-color-selo-tbca:    #9DB3A4;              /* = dark sage */
  --ic-color-selo-tbca-bg: rgba(111,174,139,.16);/* = dark tint */
  --ic-color-toast-err-ink: #1A0F0B;             /* texto do toast de erro (dark) */
  /* --ic-color-backdrop não é redefinido: handoff dá um valor único */

  /* --ic-gradient-dose NÃO é redefinido: identidade, idêntico nos 2 temas. */
}

/* ════════════════════════════════════════════════════════════════
   Keyframes de motion (transforms conforme HANDOFF › Interactions/
   Modais; sheetUp/livePulse usam o gesto padrão pois o handoff
   não detalha o keyframe exato — duração/easing conforme a tabela).
   ════════════════════════════════════════════════════════════════ */
@keyframes ic-fadeUp    { from { opacity: 0; transform: translateY(8px); }            to { opacity: 1; transform: none; } }
@keyframes ic-dlgIn     { from { opacity: 0; transform: translateY(12px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes ic-sheetUp   { from { transform: translateY(100%); }                        to { transform: none; } }
@keyframes ic-toastIn   { from { opacity: 0; transform: translateY(-14px); }           to { opacity: 1; transform: none; } }
@keyframes ic-livePulse { 0%, 100% { opacity: .4; transform: scale(1); } 50% { opacity: 1; transform: scale(1.35); } }

/* Utilitário: números tabulares onde o handoff pede */
.ic-tabular-nums { font-variant-numeric: var(--ic-font-numeric); }