/* ==========================================================================
   Prazo — tokens.css
   Única fonte dos valores visuais do app. Nenhuma cor, tamanho ou tempo
   deve aparecer solto em outro arquivo CSS: use sempre var(--nome).
   Origem: prazo-design-system.png (v1) + ajustes de contraste (ver DESIGN.md).
   ========================================================================== */

:root {
  color-scheme: light;

  /* ---------- Neutros quentes (nunca preto nem cinza puro) ---------- */
  --bg: #F7F4EF;          /* papel: fundo do app */
  --surface: #FFFDFA;     /* cartões e campos */
  --ink: #1C1A17;         /* tinta: texto e ação primária */
  --ink-2: #57514A;       /* texto secundário */
  --muted: #6E675F;       /* metadados e placeholder (só sobre papel, superfície e areia 100) */
  --taupe: #7C5E4A;       /* terra: avatar e apoio */
  --line: #E4DDD2;        /* borda de 1 px de cartões e divisores */
  --sand-100: #F2EDE6;    /* campo padrão */
  --sand-200: #EAE3D9;    /* botão secundário, chips, esqueleto */
  --sand-300: #D9CFC1;    /* divisor forte e faixa de tarefa concluída */

  /* ---------- Acento laranja (uso raro: selo "Hoje" e botão +) ---------- */
  --accent: #E8693A;      /* só preenchimento, com tinta por cima; nunca texto */
  --accent-text: #A6421C; /* laranja como texto (5,11:1 sobre o fundo suave) */
  --accent-soft: #FBE6DC; /* fundo do selo "Hoje" */

  /* ---------- Semânticas: texto + fundo suave (texto ≥ 4,5:1 sobre o suave) ---------- */
  --success: #276E42;  --success-soft: #E3F0E7;  /* 5,27:1 */
  --warn: #8A5A0F;     --warn-soft: #F8EDD6;     /* 5,09:1 */
  --error: #B42318;    --error-soft: #F8E1DE;    /* 5,26:1 */
  --info: #2D5DA8;     --info-soft: #E2EAF6;     /* 5,35:1; também é a cor do foco */

  /* ---------- Cores de matéria (sempre com o nome ao lado) ---------- */
  --subject-orange: #E8693A;
  --subject-amber: #C9752E;
  --subject-green: #3F8F6B;
  --subject-blue: #4A6FB5;
  --subject-purple: #8A5BB0;
  --subject-pink: #C2507A;
  --subject-teal: #5E8C99;
  --subject-olive: #A08A2E;

  /* ---------- Tipografia ---------- */
  --font-display: "Fraunces", Georgia, serif;
  --font-ui: "Plus Jakarta Sans", system-ui, sans-serif;

  --fs-display: 2.25rem;   --lh-display: 2.5rem;    /* 36/40 */
  --fs-title-1: 1.75rem;   --lh-title-1: 2rem;      /* 28/32 */
  --fs-title-2: 1.25rem;   --lh-title-2: 1.75rem;   /* 20/28 */
  --fs-title-3: 1rem;      --lh-title-3: 1.5rem;    /* 16/24 */
  --fs-body-lg: 1rem;      --lh-body-lg: 1.5rem;    /* 16/24 */
  --fs-body: 0.875rem;     --lh-body: 1.25rem;      /* 14/20 */
  --fs-label: 0.75rem;     --lh-label: 1rem;        /* 12/16 */
  --tracking-label: 0.1em;

  /* ---------- Espaçamento (grid de 8 pt) ---------- */
  --space-xs: 4px;    /* ícone ↔ texto */
  --space-sm: 8px;    /* itens próximos */
  --space-md: 12px;   /* entre cartões */
  --space-lg: 16px;   /* margem mobile */
  --space-xl: 24px;   /* padding de card */
  --space-2xl: 32px;  /* entre seções */
  --space-3xl: 48px;  /* altura do botão */
  --space-4xl: 64px;  /* respiro no desktop */

  /* ---------- Formas ---------- */
  --radius-sm: 8px;     /* checkbox */
  --radius-md: 12px;    /* campo */
  --radius-lg: 20px;    /* card */
  --radius-pill: 999px; /* botão e chip */

  /* ---------- Tamanhos de controle ---------- */
  --tap-min: 44px;      /* alvo de toque mínimo */
  --btn-h: 48px;        /* altura do botão */
  --btn-h-small: 36px;  /* botão pequeno (o alvo continua com 44 px) */
  --fab-size: 56px;
  --check-size: 24px;
  --icon-size: 20px;
  --urgency-bar-w: 4px; /* faixa lateral de urgência */
  --bar-h: 64px;        /* barra inferior */
  --switch-w: 44px;     /* interruptor */
  --switch-h: 26px;
  --switch-thumb: 16px;
  --sheet-w: 28rem;     /* painel lateral (Nova/editar) a partir de 768 px */
  --sheet-max-h: 92dvh; /* altura máxima da folha no celular */
  --rail-w: 88px;       /* a barra de navegação vira coluna à esquerda a partir de 768 px */
  --dot-size: 10px;     /* ponto da matéria */
  --icon-xs: 1.15em;    /* ícone dentro do selo: cresce com o texto (12 px → ~14 px) */
  --icon-sm: 16px;      /* ícone dentro de chip e mensagem de erro */
  --icon-lg: 24px;      /* ícone da barra inferior e do botão + */
  --icon-xl: 40px;      /* ícone do estado vazio */
  --avatar-size: 40px;
  --spinner-size: 32px;
  --counter-min: 22px;  /* largura mínima do contador das abas */
  --textarea-min: 96px;
  --hit-extra: 4px;     /* área de toque invisível ao redor de chip e botão pequeno (36 + 4 + 4 = 44) */
  --border: 1px;        /* borda fina de cartões e divisores */
  --border-strong: 1.5px; /* borda de botão e de campo */

  /* ---------- Borda dos campos: 3:1 contra o papel (WCAG 1.4.11); apagado = 5,08:1 ---------- */
  --field-border: var(--muted);

  /* ---------- Foco: anel azul de 3 px com folga da cor do fundo ---------- */
  --focus: 0 0 0 3px var(--bg), 0 0 0 6px var(--info);

  /* ---------- Fundo atrás da folha aberta: tinta com transparência ---------- */
  --scrim: rgba(28, 26, 23, 0.45);

  /* ---------- Sombra: só o botão + tem (curta e quente) ---------- */
  --shadow-fab: 0 6px 14px rgba(168, 66, 28, 0.28);

  /* ---------- Movimento: curto, sem bounce ---------- */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur-fast: 150ms;
  --dur: 200ms;
  --dur-slow: 250ms;
  --toast-time: 6000ms;  /* tempo do toast com Desfazer (também usado no JS) */

  /* ---------- Layout ---------- */
  --content-max: 72rem; /* largura máxima da vitrine; o app usa o seu próprio limite */
  /* Breakpoints (media query não aceita var): base 375 px · 768 px · 1024 px */
}