/* ============================================================
   leroulevis — TOKENS (landing page)
   Herdado do design system: SOMENTE cores, tipografia e tratamento
   de imagem. Nenhum componente/layout do DS foi reaproveitado.
   ============================================================ */

/* Webfonts da marca */
@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@0,6..96,400..900;1,6..96,400..900&family=Inter:wght@400;500;600;700;800;900&display=swap');

:root {
  /* --- Paleta bruta da marca --- */
  --petrol:        #1A2326;
  --warm-white:    #F2EFEA;
  --slate:         #5C696E;
  --sand:          #DACEBD;
  --copper:        #BF755A;

  /* --- Escala petrol (tinta / type) --- */
  --petrol-900:    #10171A;
  --petrol-850:    #151D20;
  --petrol-800:    #1A2326;
  --petrol-700:    #212C30;
  --petrol-600:    #28353A;
  --petrol-500:    #33444A;
  --petrol-400:    #415359;

  /* --- Escala warm white --- */
  --white-100:     #F7F5F1;
  --white-200:     #F2EFEA;
  --white-300:     #DDD8CF;
  --ink-muted:     #B7B2A8;

  /* --- Escala sand / champagne (superfícies) --- */
  --sand-100:      #F4EEE3;
  --sand-200:      #ECE3D5;
  --sand-300:      #E6DDCF;
  --sand-400:      #DACEBD;
  --sand-500:      #C3B49E;
  --sand-600:      #AC9C84;

  /* --- Escala slate --- */
  --slate-300:     #97A4A9;
  --slate-400:     #77868C;
  --slate-500:     #5C696E;

  /* --- Escala copper / terracota --- */
  --copper-300:    #D49277;
  --copper-400:    #BF755A;
  --copper-500:    #A75F47;
  --copper-600:    #8C4E3A;

  /* === ALIASES SEMÂNTICOS === */
  --surface-canvas:   var(--sand-400);
  --surface-deep:     var(--sand-500);
  --surface-card:     var(--sand-200);
  --surface-raised:   var(--sand-100);
  --surface-hover:    #FBF7EF;
  --surface-editorial: var(--sand-400);

  --text-primary:     var(--petrol-800);
  --text-heading:     var(--petrol-900);
  --text-secondary:   var(--slate-500);
  --text-support:     var(--copper-500);
  --text-muted:       var(--slate-400);
  --text-on-copper:   var(--white-100);

  --accent:           var(--copper-500);
  --accent-hover:     var(--copper-600);
  --accent-press:     var(--copper-600);
  --accent-quiet:     rgba(191, 117, 90, 0.12);

  --border-hairline:  rgba(26, 35, 38, 0.12);
  --border-soft:      rgba(26, 35, 38, 0.18);
  --border-strong:    rgba(26, 35, 38, 0.28);
  --rule-accent:      var(--copper-500);

  --glass-sand:       rgba(244, 238, 227, 0.72);
  --focus-ring:       0 0 0 2px var(--surface-canvas), 0 0 0 4px var(--copper-500);

  /* === TIPOGRAFIA === */
  --font-display: "Bodoni Moda", "Didot", "Times New Roman", serif;
  --font-body:    "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-number:  "Inter", "Helvetica Neue", Arial, sans-serif;

  --w-display-regular: 500;
  --w-display-medium:  600;
  --w-display-bold:    700;
  --w-body-regular:    400;
  --w-body-medium:     500;
  --w-body-semibold:   600;
  --w-number-hero:     800;
  --w-number-bold:     700;

  --fs-hero:      clamp(3.25rem, 9vw, 8rem);
  --fs-display-1: clamp(2.6rem, 6vw, 5rem);
  --fs-display-2: clamp(2rem, 4.5vw, 3.4rem);
  --fs-title:     clamp(1.5rem, 3vw, 2rem);
  --fs-bignum:    clamp(2.8rem, 7vw, 5.5rem);
  --fs-heading:   1.5rem;
  --fs-subhead:   1.25rem;
  --fs-body-lg:   1.125rem;
  --fs-body:      1rem;
  --fs-caption:   0.875rem;
  --fs-label:     0.75rem;

  --lh-tight:   1.02;
  --lh-display: 1.06;
  --lh-snug:    1.25;
  --lh-body:    1.6;

  --ls-display:  -0.01em;
  --ls-hero:     -0.02em;
  --ls-body:      0em;
  --ls-eyebrow:   0.34em;
  --ls-caps:      0.12em;

  /* === TRATAMENTO EDITORIAL DE IMAGEM === */
  --grain-texture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --grain-size:    240px;
  --grain-opacity: 0.5;

  --light-leak: linear-gradient(180deg, rgba(120,70,40,0.16), rgba(20,12,8,0) 40%),
                radial-gradient(80% 60% at 78% 8%, rgba(214,150,96,0.30), transparent 55%);
  --light-leak-soft: radial-gradient(70% 50% at 50% 14%, rgba(214,150,96,0.20), transparent 60%);
  --light-leak-center: radial-gradient(70% 50% at 50% 18%, rgba(214,150,96,0.22), transparent 60%);

  --photo-grade-warm:  contrast(1.04) brightness(0.96) saturate(1.02);
  --photo-grade-tonal: grayscale(0.4) sepia(0.25) contrast(1.04);
  --photo-grade-ghost: grayscale(0.2) contrast(1.02);

  --scrim-cover:  linear-gradient(90deg, var(--sand-400) 0%, var(--sand-400) 38%, rgba(218,206,189,0.55) 50%, rgba(218,206,189,0) 66%);
  --scrim-cover-base: linear-gradient(0deg, rgba(218,206,189,0.92) 0%, rgba(218,206,189,0) 46%);
  --scrim-bottom-deep: linear-gradient(0deg, rgba(16,23,26,0.85) 0%, rgba(16,23,26,0) 55%);
  --scrim-portrait: linear-gradient(180deg, rgba(120,70,40,0.14) 0%, rgba(16,23,26,0) 45%, rgba(16,23,26,0.52) 100%);

  --vignette:      inset 0 0 200px 60px rgba(16,23,26,0.26);
  --vignette-soft: inset 0 0 150px 40px rgba(16,23,26,0.16);

  --ghost-opacity: 0.13;
  --ghost-mask:    linear-gradient(90deg, transparent, #000 60%);

  /* sombras suaves (lift de cards) */
  --shadow-float: 0 24px 60px -28px rgba(16,23,26,0.45);
  --shadow-card:  0 12px 32px -20px rgba(16,23,26,0.40);

  /* layout */
  --maxw: 1200px;
  --gutter: clamp(20px, 5vw, 64px);
  --radius: 14px;
}