/* ──────────────────────────────────────────────────────────────────────────
   PETRY DESPACHANTE — DESIGN TOKENS
   Owner: @architect (AIOX)
   Estilo: Premium discreto (Stripe / Linear)
   Versão: 1.0.0
   ─────────────────────────────────────────────────────────────────────── */

:root {
  /* ───── Cores: Surface ───── */
  --c-bg:           #FAFAF9;      /* branco-quente */
  --c-surface:      #FFFFFF;
  --c-surface-2:    #F4F4F2;
  --c-border:       #E7E5E4;
  --c-border-soft:  #EFEDEB;
  --c-overlay:      rgba(14, 14, 16, 0.04);

  /* ───── Cores: Texto ───── */
  --c-text:         #0E0E10;      /* quase-preto */
  --c-text-2:       #44403C;      /* texto secundário */
  --c-muted:        #78716C;      /* labels e captions */
  --c-on-accent:    #FFFFFF;

  /* ───── Cores: Marca ───── */
  --c-accent:       #1E3A8A;      /* azul Petry refinado (provisional) */
  --c-accent-700:   #1E40AF;
  --c-accent-600:   #2348A4;
  --c-accent-100:   #DDE5F5;
  --c-accent-soft:  #EEF2FF;

  /* ───── Cores: Estado ───── */
  --c-success:      #5B8C5A;      /* verde-sálvia */
  --c-success-soft: #E8F1E8;
  --c-warning:      #B45309;
  --c-danger:       #B91C1C;

  /* ───── Tipografia ───── */
  --ff-sans:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ff-mono:    ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Escala tipográfica — Major Second + ajuste manual */
  --fs-12: 0.75rem;       /* 12 — micro */
  --fs-13: 0.8125rem;     /* 13 — eyebrow */
  --fs-14: 0.875rem;      /* 14 — small */
  --fs-15: 0.9375rem;     /* 15 — body small */
  --fs-16: 1rem;          /* 16 — body */
  --fs-18: 1.125rem;      /* 18 — body large */
  --fs-20: 1.25rem;       /* 20 — subhead */
  --fs-24: 1.5rem;        /* 24 — h4 */
  --fs-28: 1.75rem;       /* 28 — h3 */
  --fs-32: 2rem;          /* 32 — h2 mobile */
  --fs-40: 2.5rem;        /* 40 — h2 desktop */
  --fs-48: 3rem;          /* 48 — display mobile */
  --fs-56: 3.5rem;        /* 56 — display desktop */
  --fs-64: 4rem;          /* 64 — hero XL */

  --fw-400: 400;
  --fw-500: 500;
  --fw-600: 600;
  --fw-700: 700;
  --fw-800: 800;

  --lh-tight: 1.1;
  --lh-snug:  1.25;
  --lh-base:  1.5;
  --lh-loose: 1.7;

  --tracking-tight: -0.02em;
  --tracking-snug:  -0.01em;
  --tracking-base:   0em;
  --tracking-wide:   0.02em;
  --tracking-eyebrow: 0.08em;

  /* ───── Spacing scale (4-base) ───── */
  --s-2:   2px;
  --s-4:   4px;
  --s-8:   8px;
  --s-12:  12px;
  --s-16:  16px;
  --s-20:  20px;
  --s-24:  24px;
  --s-32:  32px;
  --s-40:  40px;
  --s-48:  48px;
  --s-56:  56px;
  --s-64:  64px;
  --s-80:  80px;
  --s-96:  96px;
  --s-128: 128px;
  --s-160: 160px;

  /* ───── Layout ───── */
  --container-max: 1180px;
  --container-px-mobile: 20px;
  --container-px-desktop: 32px;

  /* ───── Radii ───── */
  --r-4:   4px;
  --r-6:   6px;
  --r-8:   8px;
  --r-10:  10px;
  --r-12:  12px;
  --r-16:  16px;
  --r-20:  20px;
  --r-pill: 999px;

  /* ───── Sombras (camada única, plana à la Stripe) ───── */
  --shadow-1: 0 1px 2px rgba(14, 14, 16, 0.04),
              0 1px 1px rgba(14, 14, 16, 0.03);
  --shadow-2: 0 4px 12px rgba(14, 14, 16, 0.06),
              0 1px 3px rgba(14, 14, 16, 0.04);
  --shadow-3: 0 12px 32px rgba(14, 14, 16, 0.08),
              0 2px 6px rgba(14, 14, 16, 0.04);
  --shadow-focus: 0 0 0 3px rgba(30, 58, 138, 0.18);

  /* ───── Motion ───── */
  --ease-out:  cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in:   cubic-bezier(0.55, 0, 1, 0.45);
  --ease-io:   cubic-bezier(0.65, 0, 0.35, 1);

  --dur-150: 150ms;
  --dur-250: 250ms;
  --dur-400: 400ms;
  --dur-600: 600ms;

  /* ───── Z-index ───── */
  --z-dropdown:   10;
  --z-nav:        20;
  --z-fab:        30;
  --z-modal:      40;
  --z-toast:      50;
}

/* ───── Reduced motion ───── */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-150: 0ms;
    --dur-250: 0ms;
    --dur-400: 0ms;
    --dur-600: 0ms;
  }
}