@layer tokens {
:root {
  /* ── Superfícies ─────────────────────────────────────────── */
  --color-bg-void:        #000000;
  --color-bg-panel:       #0a0a0a;
  --color-bg-cold:        #0a0a0a;
  --color-bg-warm:        #0d0d0d;
  --color-bg-deep:        #050505;
  --color-surface-card:   #121212;

  /* ── Texto ───────────────────────────────────────────────── */
  --color-text:           #f5f5f7;
  --color-text-2-cold:    #a1a1a6;
  --color-text-2-warm:    #a8a29a;
  --color-text-3-cold:    #86868b;
  --color-text-3-warm:    #8f8b7a; /* calibrado para passar em AA sobre fundo escuro — ver plano 19.1 */
  --color-text-soft:      #d9d4c4;
  --color-text-on-light:  #050505;

  /* ── Acentos — trocar estes 6 valores para rebrandar ─────── */
  --color-accent-cold:      #FFBF00;
  --color-accent-cold-rgb:  255 191 0;
  --color-accent-cold-deep: #7a5f00;
  --color-accent-warm:      #FFBF00;
  --color-accent-warm-rgb:  255 191 0;
  --color-accent-warm-deep: #7a5f00;

  --color-star:           #FFBF00;
  --color-danger:         #ff8f8f;

  /* ── Bordas e véus ────────────────────────────────────────── */
  --border-hairline:      1px solid rgb(255 255 255 / .05);
  --border-cold:          1px solid rgb(var(--color-accent-cold-rgb) / .15);
  --border-warm:          1px solid rgb(var(--color-accent-warm-rgb) / .15);

  /* ── Gradientes de título ────────────────────────────────── */
  --grad-title-cold: linear-gradient(180deg, #ffffff 0%, #a1a1a6 100%);
  --grad-title-warm: linear-gradient(180deg, #ffffff 0%, #d9d4c4 60%, #9a9488 100%);

  /* ── Tipografia ──────────────────────────────────────────── */
  --font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont,
                 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-black:    800;

  --font-size-2xs: 0.70rem;
  --font-size-xs:  0.75rem;
  --font-size-sm:  0.85rem;
  --font-size-md:  0.95rem;
  --font-size-base:1.05rem;
  --font-size-lg:  1.15rem;
  --font-size-xl:  1.30rem;
  --font-size-2xl: 2.00rem;
  --font-size-3xl: 2.50rem;

  --font-size-h1:      clamp(2.8rem, 6.5vw, 5.5rem);
  --font-size-h2-hero: clamp(3.0rem, 6.0vw, 4.5rem);
  --font-size-h2:      clamp(2.5rem, 4.0vw, 3.5rem);
  --font-size-h2-sm:   clamp(2.2rem, 4.0vw, 3.2rem);
  --font-size-h2-xs:   clamp(2.0rem, 3.5vw, 2.8rem);
  --font-size-h3:      1.35rem;

  --lh-tight:   1.05;
  --lh-heading: 1.10;
  --lh-snug:    1.40;
  --lh-normal:  1.50;
  --lh-relaxed: 1.60;

  --ls-tighter: -0.05em;
  --ls-tight:   -0.04em;
  --ls-snug:    -0.03em;
  --ls-normal:  -0.01em;
  --ls-wide:     0.05em;
  --ls-wider:    0.10em;
  --ls-widest:   0.15em;
  --ls-max:      0.20em;

  /* ── Espaçamento ─────────────────────────────────────────── */
  --space-3xs:   4px;
  --space-2xs:   6px;
  --space-xs:    8px;
  --space-sm:   12px;
  --space-md:   16px;
  --space-lg:   24px;
  --space-xl:   32px;
  --space-2xl:  40px;
  --space-3xl:  48px;
  --space-4xl:  64px;
  --space-5xl:  80px;
  --space-6xl: 100px;
  --space-7xl: 120px;
  --space-8xl: 140px;

  --section-py:        var(--space-7xl);
  --section-py-mobile: var(--space-5xl);
  --section-gutter:    var(--space-lg);

  /* ── Containers ──────────────────────────────────────────── */
  --container-xl: 1200px;
  --container-lg: 1000px;
  --container-md:  900px;
  --container-sm:  800px;
  --container-xs:  650px;
  --container-form:600px;

  /* ── Border radius ───────────────────────────────────────── */
  --radius-xs:   10px;
  --radius-sm:   12px;
  --radius-md:   16px;
  --radius-lg:   20px;
  --radius-xl:   24px;
  --radius-2xl:  28px;
  --radius-3xl:  32px;
  --radius-4xl:  40px;
  --radius-pill: 50px;
  --radius-full: 50%;

  /* ── Sombras ─────────────────────────────────────────────── */
  --shadow-sm:   0 10px 30px rgb(0 0 0 / .3);
  --shadow-md:   0 15px 35px rgb(0 0 0 / .4);
  --shadow-lg:   0 20px 40px rgb(0 0 0 / .5);
  --shadow-xl:   0 30px 60px rgb(0 0 0 / .6);

  --shadow-inset-top:  inset 0 1px 0 rgb(255 255 255 / .05);
  --shadow-inset-deep: inset 0 2px 10px rgb(0 0 0 / .5);

  --shadow-glow-cold:       0 15px 30px rgb(122 95 0 / .2);
  --shadow-glow-cold-hover: 0 25px 50px rgb(122 95 0 / .4);
  --shadow-glow-warm:       0 20px 50px rgb(122 95 0 / .3);
  --shadow-glow-warm-hover: 0 20px 40px rgb(122 95 0 / .5);

  /* ── Movimento ───────────────────────────────────────────── */
  --ease:        cubic-bezier(.16, 1, .3, 1);
  --ease-soft:   cubic-bezier(.2, .8, .2, 1);
  --ease-inout:  cubic-bezier(.4, 0, .6, 1);

  --dur-fast:   .3s;
  --dur-base:   .4s;
  --dur-slow:   .6s;
  --dur-slower: .8s;
  --dur-reveal: .9s;

  /* ── Ruído reutilizável ──────────────────────────────────── */
  --noise-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  /* ── Header ──────────────────────────────────────────────── */
  --header-offset: 96px;
}
}