/* ═══════════════════════════════════════════
   DESIGN TOKENS — Maren Lindqvist Portfolio
   Cinematic darkroom: dark base, warm gold,
   editorial serif + clean grotesk
   ═══════════════════════════════════════════ */

:root {
  /* ── Palette ── */
  --fundo:         #0a0a0a;
  --superficie:    #141414;
  --superficie-2:  #1e1e1e;
  --texto:         #e8e4df;
  --texto-suave:   #9a9590;
  --accent:        #c9a84c;
  --accent-hover:  #dbb95d;
  --borda:         #2a2826;
  --borda-suave:   #1f1d1b;
  --erro:          #c45c4a;
  --sucesso:       #5a9e6f;

  /* ── Type scale (major third — 1.25) ── */
  --font-display:  "Palatino Linotype", Palatino, Georgia, "Iowan Old Style", serif;
  --font-body:     "Helvetica Neue", Helvetica, Arial, "Noto Sans", sans-serif;
  --font-mono:     "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;

  --fs-xs:    0.75rem;   /* 12px */
  --fs-sm:    0.875rem;  /* 14px */
  --fs-base:  1rem;      /* 16px */
  --fs-md:    1.125rem;  /* 18px */
  --fs-lg:    1.375rem;  /* 22px */
  --fs-xl:    1.75rem;   /* 28px */
  --fs-2xl:   2.25rem;   /* 36px */
  --fs-3xl:   3rem;      /* 48px */
  --fs-hero:  clamp(2.5rem, 6vw, 5rem);

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-bold:    700;

  --lh-tight:   1.15;
  --lh-snug:    1.3;
  --lh-normal:  1.6;

  --ls-tight:  -0.02em;
  --ls-normal:  0;
  --ls-wide:    0.08em;
  --ls-ultra:   0.18em;

  /* ── Spacing (4px base) ── */
  --sp-1:  0.25rem;   /* 4 */
  --sp-2:  0.5rem;    /* 8 */
  --sp-3:  0.75rem;   /* 12 */
  --sp-4:  1rem;      /* 16 */
  --sp-5:  1.5rem;    /* 24 */
  --sp-6:  2rem;      /* 32 */
  --sp-7:  2.5rem;    /* 40 */
  --sp-8:  3rem;      /* 48 */
  --sp-9:  4rem;      /* 64 */
  --sp-10: 5rem;      /* 80 */
  --sp-11: 6rem;      /* 96 */
  --sp-12: 8rem;      /* 128 */

  /* ── Radius ── */
  --ra-sm:  3px;
  --ra-md:  6px;
  --ra-lg:  10px;

  /* ── Motion ── */
  --dur-fast:   150ms;
  --dur-normal: 300ms;
  --dur-slow:   500ms;
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* ── Breakpoints (used as reference — use in @media) ── */
  /* --bp-sm:  36rem;   576px  */
  /* --bp-md:  48rem;   768px  */
  /* --bp-lg:  64rem;  1024px  */
  /* --bp-xl:  80rem;  1280px  */

  /* ── Layout ── */
  --max-w:      72rem;   /* 1152px */
  --max-w-text: 40rem;   /* 640px  */
  --nav-h:      4rem;
  --gutter:     clamp(1rem, 4vw, 3rem);
}