/* ============================================================
   tokens.css
   Variáveis primitivas + semânticas + tema dark/light.
   Surfaces semânticas (--bg-page, --bg-section...) são as
   ÚNICAS usadas em sections/components. Primitivos ficam aqui.
   ============================================================ */

:root {
  /* ---------- COLOR PRIMITIVES ---------- */
  --c-black:        #08080A;
  --c-black-2:      #0C0C0F;
  --c-graphite:     #111114;
  --c-charcoal:     #1A1A1E;
  --c-shadow:       #050507;

  --c-snow:         #FFFFFF;
  --c-paper:        #E5E5E5;
  --c-mist:         #B8B8BD;
  --c-fog:          #6E6E76;
  --c-stone:        #3A3A40;

  --c-blue:         #1A3A8F;
  --c-blue-deep:    #0F255C;
  --c-blue-bright:  #4F8CFF;

  --c-gold:         #C9A96E;
  --c-gold-deep:    #A8844F;
  --c-gold-soft:    #E4C580;

  /* ---------- SEMANTIC SURFACES (DARK = DEFAULT) ---------- */
  --bg-page:       var(--c-black);
  --bg-section:    var(--c-black-2);
  --bg-elevated:   var(--c-graphite);
  --bg-card:       var(--c-charcoal);
  --bg-deep:       var(--c-shadow);

  --text-primary:   var(--c-snow);
  --text-secondary: var(--c-paper);
  --text-tertiary:  var(--c-mist);
  --text-muted:     var(--c-fog);

  --brand-primary: var(--c-blue);
  --brand-deep:    var(--c-blue-deep);
  --brand-bright:  var(--c-blue-bright);
  --brand-accent:  var(--c-gold);
  --brand-accent-deep: var(--c-gold-deep);
  --brand-accent-soft: var(--c-gold-soft);

  --border-soft:   rgba(255, 255, 255, 0.06);
  --border-medium: rgba(201, 169, 110, 0.28);
  --border-strong: var(--c-gold);

  --shadow-card:     0 12px 40px -12px rgba(0, 0, 0, 0.7);
  --shadow-elevated: 0 24px 60px -20px rgba(0, 0, 0, 0.85);
  --shadow-gold:     0 12px 36px -10px rgba(201, 169, 110, 0.35);

  --logo-filter: invert(1) brightness(1.4) saturate(0.6);

  /* ---------- TYPOGRAPHY ---------- */
  --font-display: 'Oswald', 'Bebas Neue', 'Impact', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --fs-xs:    clamp(0.75rem, 0.72rem + 0.15vw, 0.82rem);
  --fs-sm:    clamp(0.85rem, 0.82rem + 0.18vw, 0.92rem);
  --fs-base:  clamp(1rem, 0.96rem + 0.2vw, 1.06rem);
  --fs-md:    clamp(1.05rem, 1rem + 0.25vw, 1.18rem);
  --fs-lg:    clamp(1.2rem, 1.1rem + 0.5vw, 1.45rem);
  --fs-xl:    clamp(1.5rem, 1.25rem + 1.2vw, 2rem);
  --fs-2xl:   clamp(2rem, 1.6rem + 2vw, 3rem);
  --fs-3xl:   clamp(2.6rem, 2rem + 3vw, 4.4rem);
  --fs-4xl:   clamp(3rem, 2.2rem + 4vw, 5.6rem);

  --lh-tight:  1.05;
  --lh-snug:   1.2;
  --lh-base:   1.55;
  --lh-loose:  1.75;

  --tracking-tight:   -0.02em;
  --tracking-base:     0em;
  --tracking-wide:     0.04em;
  --tracking-wider:    0.12em;
  --tracking-widest:   0.22em;

  /* ---------- SPACING ---------- */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.25rem;
  --sp-6:  1.5rem;
  --sp-7:  2rem;
  --sp-8:  2.5rem;
  --sp-9:  3rem;
  --sp-10: 4rem;
  --sp-12: 5rem;
  --sp-14: 6.5rem;
  --sp-16: 8rem;

  --section-py:    clamp(4rem, 3rem + 4vw, 7rem);
  --container-max: 1240px;
  --container-px:  clamp(0.875rem, 0.5rem + 2vw, 2rem);

  /* ---------- RADIUS ---------- */
  --r-sm:   6px;
  --r-md:   12px;
  --r-lg:   18px;
  --r-xl:   28px;
  --r-pill: 999px;

  /* ---------- EASING ---------- */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  --dur-fast: 180ms;
  --dur-base: 320ms;
  --dur-slow: 600ms;

  /* ---------- Z-INDEX ---------- */
  --z-progress:    1100;
  --z-header:      1000;
  --z-mobile-nav:   900;
  --z-cookies:      800;
  --z-wa-float:     700;
  --z-tooltip:      600;

  /* ---------- AMBIENT GRAIN TEXTURE ---------- */
  --grain-tex: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22180%22%20height%3D%22180%22%3E%3Cfilter%20id%3D%22n%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.82%22%20numOctaves%3D%222%22%20stitchTiles%3D%22stitch%22%2F%3E%3CfeColorMatrix%20type%3D%22saturate%22%20values%3D%220%22%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20filter%3D%22url%28%23n%29%22%2F%3E%3C%2Fsvg%3E");
}

/* ============================================================
   LIGHT THEME OVERRIDE
   ============================================================ */
[data-theme="light"] {
  --bg-page:       #FAF8F3;
  --bg-section:    #F2EEE5;
  --bg-elevated:   #FFFFFF;
  --bg-card:       #F8F5EE;
  --bg-deep:       #E8E3D6;

  --text-primary:   #0F0F12;
  --text-secondary: #2A2A30;
  --text-tertiary:  #545459;
  --text-muted:     #82828A;

  --brand-accent:      #8C6B3A;
  --brand-accent-deep: #6B4F26;
  --brand-accent-soft: #B8923F;

  --border-soft:   rgba(15, 15, 18, 0.08);
  --border-medium: rgba(140, 107, 58, 0.32);
  --border-strong: #8C6B3A;

  --shadow-card:     0 12px 32px -10px rgba(15, 15, 18, 0.12);
  --shadow-elevated: 0 24px 48px -16px rgba(15, 15, 18, 0.18);
  --shadow-gold:     0 12px 32px -10px rgba(140, 107, 58, 0.28);

  --logo-filter: none;
}