/* ==========================================================================
   iPorto Store — Design Tokens
   Identidade extraída do Instagram @iportostore:
   preto profundo · laranja Cosmic · branco puro · tipografia neo-grotesk
   ========================================================================== */

:root {
  /* ---------- Cor: base escura (identidade principal) ---------- */
  --ink-000: #000000;
  --ink-950: #08080a;
  --ink-925: #0b0b0e;
  --ink-900: #101014;
  --ink-850: #16161b;
  --ink-800: #1c1c22;
  --ink-750: #24242b;

  /* ---------- Cor: superfícies claras (respiro editorial) ---------- */
  --bone-050: #f5f5f7;
  --bone-100: #ebebef;
  --bone-200: #dcdce2;

  /* ---------- Cor: texto ---------- */
  --text-hi: #f5f5f7;
  --text-mid: #adadb6;
  --text-low: #8b8b95;
  --text-inv-hi: #0b0b0e;
  --text-inv-mid: #46464e;

  /* ---------- Cor: acento laranja iPorto ---------- */
  --accent: #ff6a00;
  --accent-soft: #ff8a3d;
  --accent-deep: #d94e00;
  --accent-glow: rgba(255, 106, 0, 0.32);
  --accent-wash: rgba(255, 106, 0, 0.08);

  /* ---------- Cor: sinalização ---------- */
  --ok: #30d158;
  --ok-wash: rgba(48, 209, 88, 0.12);
  --warn: #ffd60a;

  /* ---------- Linhas e véus ---------- */
  --line: rgba(255, 255, 255, 0.08);
  --line-2: rgba(255, 255, 255, 0.14);
  --line-3: rgba(255, 255, 255, 0.24);
  --line-dark: rgba(0, 0, 0, 0.1);
  --veil: rgba(255, 255, 255, 0.04);
  --veil-2: rgba(255, 255, 255, 0.07);

  /* ---------- Tipografia ---------- */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Display",
    "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;

  /* Escala fluida — razão ~1.25 no mobile, ~1.33 no desktop */
  --t-micro: 0.6875rem;                                   /* 11px  — eyebrow */
  --t-xs: 0.75rem;                                        /* 12px  — meta    */
  --t-sm: 0.8125rem;                                      /* 13px            */
  --t-base: clamp(0.9375rem, 0.9rem + 0.18vw, 1rem);      /* 15 → 16         */
  --t-lg: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);      /* 17 → 19         */
  --t-xl: clamp(1.25rem, 1.12rem + 0.6vw, 1.5rem);        /* 20 → 24         */
  --t-2xl: clamp(1.5rem, 1.3rem + 1vw, 2rem);             /* 24 → 32         */
  --t-3xl: clamp(1.875rem, 1.5rem + 1.8vw, 2.75rem);      /* 30 → 44         */
  --t-4xl: clamp(2.125rem, 1.5rem + 2.7vw, 3.5rem);       /* 34 → 56         */
  --t-5xl: clamp(2.5rem, 1.5rem + 4.4vw, 5rem);           /* 40 → 80         */
  --t-hero: clamp(2.75rem, 1.1rem + 6.1vw, 6.75rem);      /* 44 → 108        */

  --lead-tight: 1.04;
  --lead-snug: 1.18;
  --lead-normal: 1.5;
  --lead-relaxed: 1.65;

  --track-hero: -0.045em;
  --track-display: -0.035em;
  --track-title: -0.022em;
  --track-body: -0.011em;
  --track-wide: 0.16em;
  --track-wider: 0.34em;

  /* ---------- Espaçamento ---------- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.25rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-24: 6rem;

  /* Ritmo vertical das seções */
  --section-y: clamp(5rem, 9vw, 9.5rem);
  --section-y-lg: clamp(6.5rem, 12vw, 12rem);

  /* ---------- Layout ---------- */
  --shell: 1320px;
  --shell-narrow: 880px;
  --shell-wide: 1560px;
  --gutter: clamp(1.25rem, 4.5vw, 3.5rem);
  --header-h: 68px;

  /* ---------- Raios ---------- */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-2xl: 44px;
  --r-pill: 999px;

  /* ---------- Sombras (discretas — nada pesado) ---------- */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 18px 40px -22px rgba(0, 0, 0, 0.9);
  --shadow-lg: 0 40px 90px -50px rgba(0, 0, 0, 1);
  --shadow-accent: 0 20px 60px -30px var(--accent-glow);

  /* ---------- Movimento ---------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --dur-fast: 180ms;
  --dur: 320ms;
  --dur-slow: 640ms;
  --dur-reveal: 900ms;

  /* ---------- Camadas ---------- */
  --z-base: 1;
  --z-sticky: 50;
  /* O menu mobile fica ABAIXO do header de propósito: é o header que
     guarda o botão de fechar. A busca, que tem seu próprio Esc/ESC, cobre tudo. */
  --z-overlay: 80;
  --z-header: 100;
  --z-float: 200;
  --z-modal: 400;
}

/* Superfícies nomeadas — usadas por seções que invertem o tema */
.surface-dark {
  --surface: var(--ink-950);
  --on-surface-hi: var(--text-hi);
  --on-surface-mid: var(--text-mid);
  --on-surface-low: var(--text-low);
  --on-surface-line: var(--line);
}

.surface-light {
  --surface: var(--bone-050);
  --on-surface-hi: var(--text-inv-hi);
  --on-surface-mid: var(--text-inv-mid);
  --on-surface-low: #7a7a83;
  --on-surface-line: rgba(0, 0, 0, 0.1);
  background: var(--bone-050);
  color: var(--text-inv-hi);
}