/* ============================================================================
   SIDE EMPREENDIMENTOS — Design Tokens · V2 (cinematic / photographic)
   Warm-charcoal chrome that lets real architectural photography lead.
   Palette: warm charcoal · ivory · stone · brand amber-gold
   ========================================================================== */

:root {
  /* ----- Core surfaces (warm cinematic dark) ----- */
  --void:        #0B0D11;   /* page base — deep warm charcoal */
  --abyss:       #0F1217;   /* near-black */
  --surface:     #14181F;   /* panels */
  --surface-2:   #1B2029;   /* raised panels */
  --char:        #070809;   /* deepest (scrims) */

  /* ----- Ivory / stone (text, edges) ----- */
  --ivory:       #F4F0E8;   /* warm-white headlines */
  --stone:       #CBC6BC;   /* primary body */
  --stone-soft:  #9C988E;   /* secondary */
  --stone-dim:   #76736B;   /* captions (AA on dark) */
  --line:        rgba(255,255,255,0.10);   /* hairlines */
  --line-soft:   rgba(255,255,255,0.05);

  /* ----- Brand gold (official SIDE yellow #f7b500) ----- */
  --gold:        #F7B500;
  --gold-bright: #FFD24D;
  --gold-deep:   #B88600;
  --gold-glow:   rgba(247, 181, 0, 0.40);

  /* ----- Glassmorphism (dark glass over imagery) ----- */
  --glass-bg:        rgba(14, 17, 22, 0.55);
  --glass-bg-strong: rgba(12, 14, 18, 0.78);
  --glass-border:    rgba(255, 255, 255, 0.12);
  --glass-border-lit:rgba(255, 255, 255, 0.22);
  --glass-hi:        rgba(255, 255, 255, 0.22);
  --glass-blur:      18px;
  --glass-blur-soft: 10px;

  /* ----- Semantic text ----- */
  --text-hi:   var(--ivory);
  --text:      var(--stone);
  --text-soft: var(--stone-soft);
  --text-dim:  var(--stone-dim);

  /* ----- Fluid type scale ----- */
  --fs-overline: clamp(0.62rem, 0.55rem + 0.3vw, 0.78rem);
  --fs-caption:  clamp(0.74rem, 0.7rem + 0.2vw, 0.86rem);
  --fs-body:     clamp(0.98rem, 0.92rem + 0.3vw, 1.15rem);
  --fs-lead:     clamp(1.15rem, 1rem + 0.7vw, 1.65rem);
  --fs-h4:       clamp(1.3rem, 1.1rem + 1vw, 1.95rem);
  --fs-h3:       clamp(1.9rem, 1.4rem + 2.2vw, 3.2rem);
  --fs-h2:       clamp(2.6rem, 1.7rem + 4.4vw, 6rem);
  --fs-h1:       clamp(3rem, 1.4rem + 8.5vw, 11rem);
  --fs-mega:     clamp(3.8rem, 0.5rem + 16vw, 20rem);

  /* ----- Spacing scale ----- */
  --sp-1: 0.5rem;  --sp-2: 1rem;   --sp-3: 1.5rem;  --sp-4: 2.5rem;
  --sp-5: 4rem;    --sp-6: 6rem;   --sp-7: 9rem;    --sp-8: 14rem;
  --gutter: clamp(1.4rem, 5vw, 7rem);
  --section-pad: clamp(5rem, 12vh, 11rem);
  --maxw: 1680px;
  --measure: 60ch;

  /* ----- Radius ----- */
  --r-sm: 8px; --r-md: 14px; --r-lg: 20px; --r-xl: 30px; --r-pill: 999px;

  /* ----- Premium easing ----- */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.83, 0, 0.17, 1);
  --ease-soft:   cubic-bezier(0.33, 1, 0.68, 1);
  --ease-back:   cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ----- Durations ----- */
  --t-fast: 0.35s; --t-med: 0.7s; --t-slow: 1.2s; --t-cine: 1.8s;

  /* ----- Elevation ----- */
  --shadow-soft: 0 24px 60px -24px rgba(0, 0, 0, 0.8);
  --shadow-deep: 0 50px 120px -34px rgba(0, 0, 0, 0.9);
  --shadow-gold: 0 18px 50px -16px var(--gold-glow);

  /* ----- Z layers ----- */
  --z-bg: 0; --z-content: 10; --z-nav: 100; --z-overlay: 1000;

  /* ----- Fonts ----- */
  --font-display: "Cormorant Garamond", "Times New Roman", serif;
  --font-grotesk: "Space Grotesk", "Inter", system-ui, sans-serif;
  --font-mono:    "Space Grotesk", ui-monospace, monospace;
  --font-logo:    "Saira", "Space Grotesk", system-ui, sans-serif;
  --tracking-wide: 0.3em;
  --tracking-mid:  0.14em;
}