/* EDULIDER — tokens de design.
 *
 * Portados de `app/tokens.css` do projeto Next (Tailwind v4 `@theme`) para CSS
 * puro. Os valores são os mesmos; o que mudou foi só o invólucro, porque aqui
 * não há Tailwind gerando utilitário a partir do token.
 *
 * Regra que veio junto do projeto antigo e continua valendo:
 * `--color-brand` (#48A111) NÃO carrega texto branco por cima — reprova AA.
 * Para preenchimento com texto, use `--color-brand-solid`.
 */

:root {
  /* ===== Verde da marca (crescimento) ===== */
  --color-green-50: #f1f8ea;
  --color-green-100: #dcefc7;
  --color-green-200: #c1e29b;
  --color-green-300: #9fd166;
  --color-green-400: #74bd34;
  --color-green-500: #48a111; /* amostrada do logo, não alterar */
  --color-green-600: #3c8710;
  --color-green-700: #2f690e;
  --color-green-800: #24500c;
  --color-green-900: #1b3c0a;

  /* ===== Tinta (neutro quente, competência) ===== */
  --color-ink-400: #9aa392;
  --color-ink-500: #77826e;
  --color-ink-600: #5a6552;
  --color-ink-700: #3f4a39;
  --color-ink-800: #2b3327;
  --color-ink-900: #16280f;

  /* ===== Areia (superfícies quentes, acolhimento) ===== */
  --color-sand-50: #f8f6f0;
  --color-sand-100: #f4f1e8;
  --color-sand-200: #e9e4d6;
  --color-sand-300: #d8d1bd;
  --color-sand-400: #c4bca3;

  /* ===== Pinho (acento monocromático, um elemento por tela) ===== */
  --color-pine-100: #dcefc7;
  --color-pine-300: #74bd34;
  --color-pine-500: #24500c;
  --color-pine-600: #1b3c0a;

  /* ===== Bases semânticas ===== */
  --color-amber-100: #fbeecb;
  --color-amber-500: #d99a00;
  --color-red-100: #f6dcd8;
  --color-red-500: #c0392b;
  --color-teal-100: #d5ebea;
  --color-teal-500: #2f8f8b;

  /* ===== Apelidos semânticos ===== */
  --color-brand: var(--color-green-500);
  --color-brand-hover: var(--color-green-600);
  --color-brand-active: var(--color-green-700);
  --color-brand-subtle: var(--color-green-50);
  --color-brand-solid: var(--color-green-600); /* o que aceita texto branco */

  --color-accent: var(--color-pine-500);
  --color-accent-hover: var(--color-pine-600);
  --color-accent-subtle: var(--color-pine-100);

  --color-success: var(--color-green-600);
  --color-success-subtle: var(--color-green-50);
  --color-warning: var(--color-amber-500);
  --color-warning-subtle: var(--color-amber-100);
  --color-danger: var(--color-red-500);
  --color-danger-subtle: var(--color-red-100);
  --color-info: var(--color-teal-500);
  --color-info-subtle: var(--color-teal-100);

  /* ===== Tipografia ===== */
  --font-display: "Sora", system-ui, sans-serif;
  --font-body: "Mulish", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

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

  --tracking-tight: -0.01em;
  --tracking-caps: 0.08em;
  --leading-normal: 1.55;
  --leading-relaxed: 1.7;

  /* ===== Raios — moderados e adultos, nunca "escolinha" ===== */
  --radius-xs: 3px;
  --radius-sm: 5px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 18px;

  /* ===== Sombras — suaves, tingidas de tinta quente ===== */
  --shadow-xs: 0 1px 2px rgba(22, 40, 15, 0.05);
  --shadow-sm: 0 1px 4px rgba(22, 40, 15, 0.06);
  --shadow-md: 0 4px 14px rgba(22, 40, 15, 0.07);
  --shadow-lg: 0 18px 48px rgba(22, 40, 15, 0.12);

  /* ===== Movimento — calmo, sem bounce ===== */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out-soft: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 320ms;

  /* ===== Superfícies e texto ===== */
  --surface-page: var(--color-sand-50);
  --surface-card: #ffffff;
  --surface-sunken: var(--color-sand-100);
  --surface-inverse: var(--color-ink-900);

  --text-strong: var(--color-ink-900);
  --text-body: var(--color-ink-800);
  --text-muted: var(--color-ink-600);
  --text-faint: var(--color-ink-500);
  --text-link: var(--color-green-700);
  --text-link-hover: var(--color-green-800);

  --border-subtle: var(--color-sand-200);
  --border-default: var(--color-sand-300);

  --focus-ring: 0 0 0 3px rgba(72, 161, 17, 0.28);
  --scrim: rgba(28, 36, 24, 0.45);

  /* ===== Largura de conteúdo ===== */
  --container-content: 1180px;

  /* ===== Cabeçalho =====
   * Vira token porque três folhas precisam do mesmo número: o base.css desenha
   * a barra e afasta o <main>, o home.css e o paginas.css afastam as capas por
   * onde a barra passa por cima. A barra encolhe ao rolar; a folga do conteúdo
   * usa sempre a altura maior, senão o conteúdo pularia junto. */
  --altura-cabecalho: 84px;
  --altura-cabecalho-solido: 70px;
}