/* ============================================================
   TOKENS — fonte única de verdade.
   Variáveis de cor extraídas via get_variable_defs do Figma.
   Tipografia e espaçamento derivados do design context (Hero node 1:2388).
   NUNCA hardcode esses valores em outros arquivos CSS.
   ============================================================ */

:root {

  /* ── CORES (variáveis canônicas do Figma) ───────────────── */
  --color-sakura:    #FAC4D4;   /* Pink Sakura  — destaque/acento */
  --color-washi:     #F5F0E8;   /* Washi        — texto principal  */
  --color-sumi:      #16110F;   /* Sumi         — fundo base / texto escuro */
  --color-tsutsuji:  #E66578;   /* Pink Tsutsuji — acento secundário */
  --color-hinomaru:  #D7142B;   /* Hinomaru Red — badge de resultado (Portfolio) */

  /* ── CORES SEMÂNTICAS (compostas dos tokens canônicos) ─── */
  --color-bg:              var(--color-sumi);
  --color-bg-nav:          rgba(44, 38, 36, 0.48);   /* navbar glass — alpha reduzido para blur visível */
  --color-bg-overlay:      rgba(22, 17, 15, 0.55);
  --color-bg-overlay-heavy:rgba(22, 17, 15, 0.80);
  --color-surface:         #2C2B2A;                  /* superfície de card escura (Portfolio) / mídia */
  --color-surface-deep:    #1B1817;                  /* superfície de card mais escura (Equipe) */
  --color-stroke:          #525252;                  /* traço/borda neutra sobre superfícies escuras */

  --color-text:            var(--color-washi);
  --color-text-muted:      rgba(245, 240, 232, 0.60); /* washi 60% — body copy da Hero */
  --color-text-dim:        rgba(245, 240, 232, 0.30);

  /* Sobre superfície CLARA (washi) — ex.: Rodapé */
  --color-ink-muted:       rgba(22, 17, 15, 0.60);    /* sumi 60% — texto secundário no claro */
  --color-border-ink:      rgba(22, 17, 15, 0.30);    /* borda sutil sobre o claro */
  --color-field:           #D9D0C2;                   /* campo de formulário (input newsletter) */
  --color-icon-box:        #232323;                   /* chip escuro de ícone social */

  --color-accent:          var(--color-sakura);
  --color-accent-strong:   var(--color-tsutsuji);

  --color-border:          rgba(245, 240, 232, 0.12);
  --color-border-accent:   rgba(250, 196, 212, 0.30);

  /* Gradiente hero (extraído do node 1:2389) */
  --gradient-hero-fade: linear-gradient(
    to bottom,
    rgba(22, 17, 15, 0) 36.633%,
    #16110F 94.141%
  );

  /* ── TIPOGRAFIA ─────────────────────────────────────────── */
  /* Famílias (extraídas do design context Hero) */
  --font-heading:  'Stage Grotesk', sans-serif;
  --font-body:     'Stage Grotesk', sans-serif;
  --font-display:  'Kawara', 'Stage Grotesk', sans-serif;   /* display decorativa */

  /* Pesos */
  --font-weight-regular: 400;
  --font-weight-medium:  500;
  --font-weight-bold:    700;

  /* Escala de tamanhos (medidos no Figma) */
  --font-size-xs:   0.75rem;    /* 12px */
  --font-size-sm:   0.875rem;   /* 14px — legenda japonesa */
  --font-size-base: 1rem;       /* 16px — nav / body copy */
  --font-size-lg:   1.125rem;   /* 18px */
  --font-size-xl:   1.25rem;    /* 20px */
  --font-size-2xl:  1.5rem;     /* 24px */
  --font-size-3xl:  2rem;       /* 32px */
  --font-size-4xl:  2.5rem;     /* 40px */
  --font-size-5xl:  3rem;       /* 48px */
  --font-size-6xl:  4.5rem;     /* 72px — headline Hero */

  /* Line-heights */
  --line-height-tight:   1.034;  /* valor exato do Figma (headings) */
  --line-height-snug:    1.2;    /* body copy Hero */
  --line-height-normal:  1.5;
  --line-height-relaxed: 1.7;

  /* Letter-spacing */
  --letter-spacing-tight:  -0.02em;
  --letter-spacing-normal:  0;
  --letter-spacing-wide:    0.08em;
  --letter-spacing-wider:   0.15em;  /* textos em japonês */

  /* ── ESPAÇAMENTO (escala 8px, medições do Figma) ────────── */
  --space-1:   0.25rem;   /*  4px */
  --space-2:   0.5rem;    /*  8px */
  --space-3:   0.75rem;   /* 12px */
  --space-2-5: 0.625rem;  /* 10px — padding do nav pill / gap botão CTA */
  --space-4:   1rem;      /* 16px */
  --space-4-5: 1.125rem;  /* 18px — gap entre itens do nav (Figma) */
  --space-5:   1.25rem;   /* 20px */
  --space-6:   1.5rem;    /* 24px — gap headline parts */
  --space-8:   2rem;      /* 32px — gap CTA elements */
  --space-10:  2.5rem;    /* 40px */
  --space-12:  3rem;      /* 48px */
  --space-16:  4rem;      /* 64px */
  --space-20:  5rem;      /* 80px */
  --space-24:  6rem;      /* 96px */
  --space-28:  7rem;      /* 112px — ~padding vertical hero (110px) */
  --space-40:  10rem;     /* 160px — gap headline ↔ CTA no Figma */
  --space-50:  12.5rem;   /* 200px — gap nav ↔ texto no Figma */

  /* ── LAYOUT ─────────────────────────────────────────────── */
  --container-max:    1280px;   /* largura do grid no Figma (1280px centrado em 1920px) */
  --container-narrow:  800px;
  --container-pad-x: clamp(1.25rem, 5vw, 6rem);   /* padding lateral responsivo */

  /* ── BORDAS ─────────────────────────────────────────────── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-xl:   24px;     /* mídia de card */
  --radius-2xl:  32px;     /* card grande (Portfolio / Serviços) */
  --radius-pill: 9999px;   /* nav bar e botões — border-radius: 1000px no Figma */

  /* ── SOMBRAS ─────────────────────────────────────────────── */
  --shadow-sm:   0 1px 4px  rgba(0, 0, 0, 0.35);
  --shadow-md:   0 4px 16px rgba(0, 0, 0, 0.50);
  --shadow-lg:   0 16px 48px rgba(0, 0, 0, 0.60);
  --shadow-glow: 0 0 32px  rgba(250, 196, 212, 0.18); /* sakura glow */

  /* ── TRANSIÇÕES ─────────────────────────────────────────── */
  --transition-fast:   150ms ease;
  --transition-base:   300ms ease;
  --transition-slow:   500ms ease;
  --transition-spring: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Z-INDEX ─────────────────────────────────────────────── */
  --z-bg:      0;
  --z-content: 10;
  --z-nav:     100;
  --z-overlay: 200;
  --z-modal:   300;
}