/* ==========================================================================
   Design tokens — única fonte de verdade de cor, tipografia e espaço.
   Nenhum componente deve conter valor literal de cor.
   ========================================================================== */

/* Outfit variável, servida do próprio domínio: sem requisição a terceiro,
   sem enviar o IP do visitante para outro servidor. 47KB nos dois arquivos. */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('/fonts/outfit-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('/fonts/outfit-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* --- Superfícies em três níveis ---
     A regra é simples e não pode ser quebrada: CARTÃO é sempre --surface
     (branco) e NENHUM fundo de seção é branco. Antes o fundo da página e o
     fundo do cartão eram a mesma cor, e o cartão sumia. */
  --bg: #f4f1ed;          /* página */
  --bg-alt: #eae5e0;      /* seções alternadas */
  --bg-sunken: #e3ddd7;   /* faixas de destaque */
  --surface: #ffffff;     /* cartões, sempre acima do fundo */
  --surface-2: #f4f1ed;   /* campos e áreas rebaixadas dentro do cartão */
  --border: #ddd5cd;
  --border-strong: #c2b8ae;

  /* --- Acento: laranja Shopee, usado com parcimônia --- */
  --accent: #e8501f;
  --accent-hover: #cc4317;
  /* Para TEXTO pequeno: o acento fica em 4.0:1 sobre a base, abaixo do
     mínimo AA de 4.5:1. Este tom dá 5.4:1. O --accent segue em fundos de
     botão, ícones e números grandes, onde o piso é 3:1. */
  --accent-text: #b83c12;
  --accent-soft: #fdefe9;
  --accent-ring: rgba(232, 80, 31, .22);

  /* --- Secundário: verde profundo para enviado/ativo --- */
  --green: #0f5132;
  --green-text: #0f5132;
  --green-soft: #e8f3ec;
  --green-border: #bcdcc8;

  /* --- Texto (contraste medido sobre --bg) --- */
  --text: #1a1614;         /* 15.9:1 */
  --text-2: #4a4340;       /* 8.4:1  */
  --text-3: #6b625d;       /* 5.4:1  — só em 14px ou maior */
  --text-inverse: #fbfaf9;

  /* --- Estados --- */
  --warn: #96530b; --warn-soft: #fdf5e7; --warn-border: #f2ddb4;
  --err: #a92a1c;  --err-soft: #fdefee;  --err-border: #f3c6c1;

  /* --- Tipografia --- */
  --font-display: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;

  --fs-2xs: 12px;
  --fs-xs: 13px;
  --fs-sm: 14px;
  --fs-base: 16px;
  --fs-md: 18px;
  --fs-lg: 22px;
  --fs-xl: 28px;
  --fs-2xl: clamp(30px, 3.6vw, 40px);
  --fs-3xl: clamp(38px, 5.4vw, 62px);

  --lh-tight: 1.08;
  --lh-snug: 1.3;
  --lh-base: 1.62;

  --tracking-tight: -.035em;
  --tracking-snug: -.02em;
  --tracking-wide: .08em;

  /* --- Espaço: escala de 4 --- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;  --sp-5: 24px;
  --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px;  --sp-10: 128px;

  /* --- Forma: raio único, com uma variante menor para elementos densos --- */
  --radius: 14px;
  --radius-sm: 9px;
  --radius-pill: 999px;

  /* --- Sombras discretas e direcionais, sempre para baixo --- */
  /* Sombras direcionais e perceptíveis. As anteriores eram tão fracas que
     o cartão dependia só da borda para existir. */
  --shadow-1: 0 1px 2px rgba(60, 45, 35, .06), 0 2px 6px -2px rgba(60, 45, 35, .07);
  --shadow-2: 0 4px 10px -2px rgba(60, 45, 35, .1), 0 10px 24px -8px rgba(60, 45, 35, .12);
  --shadow-3: 0 8px 20px -4px rgba(60, 45, 35, .12), 0 24px 48px -16px rgba(60, 45, 35, .2);

  --max: 1120px;
  --ease: cubic-bezier(.4, 0, .2, 1);
  --tap: 44px;   /* alvo mínimo de toque */
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14110f;
    --bg-alt: #0d0b0a;
    --bg-sunken: #0a0908;
    --surface: #221e1c;      /* no escuro o cartão é MAIS claro que o fundo */
    --surface-2: #2b2624;
    --border: #3a3330;
    --border-strong: #4e4541;

    --accent: #ff7043;
    --accent-hover: #ff8a63;
    --accent-text: #ff7043;   /* 6.9:1 sobre o fundo escuro: já passa */
    --accent-soft: #2e1710;
    --accent-ring: rgba(255, 112, 67, .26);

    --green: #4ade80;
    --green-text: #6ee7a4;
    --green-soft: #0d2a1b;
    --green-border: #17512f;

    --text: #f5f2f0;
    --text-2: #c9c1bc;
    --text-3: #9a908a;
    --text-inverse: #12100f;

    --warn: #f3c164; --warn-soft: #2b2110; --warn-border: #56421c;
    --err: #f5a29a;  --err-soft: #2e1512;  --err-border: #5c231c;

    --shadow-1: 0 1px 2px rgba(0, 0, 0, .5);
    --shadow-2: 0 4px 14px -3px rgba(0, 0, 0, .6);
    --shadow-3: 0 18px 40px -14px rgba(0, 0, 0, .75);
  }
}