/* =========================================================================
   MathMaker — Design Tokens
   Fonte única de verdade visual (cores, tipografia, espaçamento, sombras).
   Carregado por TODAS as superfícies (site público, app professor, tablet).
   ========================================================================= */

:root {
  /* ── Cor primária — verde ateliê/escola ─────────────────────────────── */
  --verde-900: #123B2E;
  --verde-700: #16604A;
  --verde-500: #2E8B6B;
  --verde-100: #DCEFE7;
  --verde-50:  #EFF7F3;

  /* ── Acento — madeira/âmbar ─────────────────────────────────────────── */
  --madeira-700: #9A5B13;
  --madeira-500: #C8862B;
  --madeira-100: #F6E7CE;

  /* ── Neutros — carvão/pergaminho ────────────────────────────────────── */
  --carvao-900: #1C1917;
  --carvao-700: #44403C;
  --carvao-500: #78716C;
  --carvao-300: #D6D3D1;
  --carvao-100: #EDEBE8;
  --pergaminho:  #FAF7F2;
  --branco:      #FFFFFF;

  /* ── Semânticas (feedback) ──────────────────────────────────────────── */
  --ok:     #15803D;
  --alerta: #B45309;
  --erro:   #B91C1C;
  --info:   #1D4ED8;

  --ok-50:     #ECFDF5;
  --alerta-50: #FFF7ED;
  --erro-50:   #FEF2F2;
  --info-50:   #EFF6FF;

  /* ── Aliases semânticos (usar estes, não os brutos) ─────────────────── */
  --cor-texto:        var(--carvao-900);
  --cor-texto-suave:  var(--carvao-700);
  --cor-texto-fraco:  var(--carvao-500);
  --cor-fundo:        var(--pergaminho);
  --cor-superficie:   var(--branco);
  --cor-borda:        var(--carvao-300);
  --cor-borda-suave:  var(--carvao-100);
  --cor-primaria:     var(--verde-700);
  --cor-primaria-forte: var(--verde-900);
  --cor-acento:       var(--madeira-500);

  /* ── Tipografia ─────────────────────────────────────────────────────── */
  --fonte-display: 'Fraunces', 'Georgia', 'Times New Roman', serif;
  --fonte-ui: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --fonte-mono: 'IBM Plex Mono', 'SFMono-Regular', 'Consolas', monospace;

  /* Escala modular 1.25 */
  --fs-12: 0.75rem;    /* 12px */
  --fs-14: 0.875rem;   /* 14px */
  --fs-16: 1rem;       /* 16px */
  --fs-18: 1.125rem;   /* 18px */
  --fs-22: 1.375rem;   /* 22px */
  --fs-28: 1.75rem;    /* 28px */
  --fs-36: 2.25rem;    /* 36px */
  --fs-48: 3rem;       /* 48px */
  --fs-64: 4rem;       /* 64px */

  --peso-normal: 400;
  --peso-medio:  500;
  --peso-semibold: 600;
  --peso-bold:  700;

  --lh-corpo: 1.5;
  --lh-titulo: 1.2;

  /* ── Espaçamento (base 4px) ─────────────────────────────────────────── */
  --esp-1: 0.25rem;   /* 4px */
  --esp-2: 0.5rem;    /* 8px */
  --esp-3: 0.75rem;   /* 12px */
  --esp-4: 1rem;      /* 16px */
  --esp-5: 1.5rem;    /* 24px */
  --esp-6: 2rem;      /* 32px */
  --esp-7: 3rem;      /* 48px */
  --esp-8: 4rem;      /* 64px */
  --esp-9: 6rem;      /* 96px */
  --esp-10: 8rem;     /* 128px */

  /* ── Layout ─────────────────────────────────────────────────────────── */
  --largura-max: 72rem;        /* 1152px container principal */
  --largura-max-estreita: 46rem; /* 736px leitura */
  --raio-sm: 6px;
  --raio-md: 10px;
  --raio-lg: 16px;
  --raio-xl: 24px;
  --raio-pill: 999px;

  /* ── Elevação ───────────────────────────────────────────────────────── */
  --sombra-sm: 0 1px 2px rgba(28, 25, 23, 0.06);
  --sombra-md: 0 4px 12px rgba(28, 25, 23, 0.10);
  --sombra-lg: 0 12px 32px rgba(28, 25, 23, 0.14);

  /* ── Transições ─────────────────────────────────────────────────────── */
  --transicao: 160ms cubic-bezier(0.2, 0, 0, 1);
  --transicao-lenta: 260ms cubic-bezier(0.2, 0, 0, 1);

  /* ── Z-index ────────────────────────────────────────────────────────── */
  --z-nav: 100;
  --z-overlay: 200;
  --z-modal: 300;
  --z-toast: 400;
}