/* ═══════════════════════════════════════════════════════
   DESIGN TOKENS — Casttini · Coleção Elementi
   Deriva de DIRECAO_DE_ARTE.md — conceito: "A matéria antes do móvel."
   Arquétipo: minimal-luxe editorial, temperatura quente.
   Valores extraídos do Figma (node 3432:37, canvas 1500×9485).
   ═══════════════════════════════════════════════════════ */

:root {

  /* ─── CORES ───────────────────────────────────────────
     Paleta 100% do design. Sem gradiente, sem transparência
     decorativa: campos chapados que se sucedem.            */

  /* Marca */
  --color-ardosia:        #3F4856;  /* fundo da seção de conceito */
  --color-taupe:          #BBA691;  /* fundo dos ambientes; texto sobre ardósia */
  --color-marrom:         #705D51;  /* texto padrão sobre claro */
  --color-nevoa:          #DFDFDF;  /* fundo dos acabamentos */

  /* Derivadas — hover/estados. Mantidas na mesma família, sem saltos de matiz */
  --color-marrom-hover:   #5A4A41;
  --color-taupe-hover:    #A8927B;
  --color-ardosia-hover:  #333A45;

  /* Neutras */
  --color-bg:             #FFFFFF;  /* header e rodapé — o design usa branco puro */
  --color-ink:            #111111;  /* texto institucional do rodapé */
  --color-ink-strong:     #000000;  /* logo */
  --color-gray-300:       #C4C4C4;  /* separadores */
  --color-border:         rgb(112 93 81 / 0.18);
  --color-border-light:   rgb(255 255 255 / 0.16);

  /* ─── AJUSTE DE CONTRASTE (WCAG AA) ───
     Três pares do Figma não alcançam 4,5:1 no texto de corpo. Os tons
     abaixo mantêm matiz e saturação da paleta e só descem/sobem a
     luminosidade até o mínimo necessário. Cada um traz o valor original
     ao lado — para fidelidade absoluta ao Figma, troque de volta.

       marrom sobre taupe   #705D51 → #483C34   2,66 → 4,55
       cinza sobre branco   #9D9D9D → #767676   2,71 → 4,54
       taupe sobre ardósia  #BBA691 → #C5B3A1   3,95 → 4,55

     Onde o par já passa, a cor do Figma fica intacta: #705D51 sobre a
     névoa #DFDFDF dá 4,67 e não foi tocado.                            */
  --color-marrom-sobre-taupe: #483C34;   /* original do Figma: #705D51 */
  --color-taupe-texto:        #C5B3A1;   /* original do Figma: #BBA691 */
  --color-gray-400:           #767676;   /* original do Figma: #9D9D9D */

  /* Papéis semânticos */
  --color-text:           var(--color-marrom);
  --color-text-inverse:   var(--color-taupe-texto);
  --color-overlay:        rgb(17 17 17 / 0.92);   /* modal de vídeo */
  --color-scrim:          rgb(63 72 86 / 0.28);   /* véu do hero */


  /* ─── TIPOGRAFIA ──────────────────────────────────────
     Sailec em tudo. Escala deliberadamente contida:
     o maior texto do design tem 25px. Quem grita são as
     fotos e os campos de cor.                              */

  --font-body: 'Sailec', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-heading: var(--font-body);

  /* Escala fluida — ancorada nos valores reais do Figma @1500px.
     O 2º valor usa vw para acompanhar o container até 1500px.   */
  --text-spec:   clamp(0.5625rem, 0.67vw, 0.625rem);   /*  9 → 10px  BP | Laca Acetinada */
  --text-xs:     clamp(0.6875rem, 0.8vw,  0.75rem);    /* 11 → 12px  labels de amostra    */
  --text-sm:     clamp(0.75rem,   0.87vw, 0.8125rem);  /* 12 → 13px  corpo                */
  --text-base:   clamp(0.8125rem, 1vw,    0.9375rem);  /* 13 → 15px  parágrafo conceito   */
  --text-md:     clamp(1rem,      1.2vw,  1.125rem);   /* 16 → 18px  rodapé               */
  --text-lg:     clamp(1.0625rem, 1.4vw,  1.3125rem);  /* 17 → 21px  nome do acabamento   */
  --text-xl:     clamp(1.125rem,  1.33vw, 1.25rem);    /* 18 → 20px  título de ambiente   */
  --text-2xl:    clamp(1.25rem,   1.67vw, 1.5625rem);  /* 20 → 25px  headline de seção    */

  /* Pesos — ver DESIGN_SYSTEM.md: Regular e Black não vieram nos assets */
  --font-thin:      100;
  --font-light:     300;
  --font-regular:   400;   /* servido por Sailec Light */
  --font-medium:    500;
  --font-bold:      700;   /* usado onde o design pede Black */

  /* Entrelinhas — generosas, de catálogo impresso */
  --leading-none:    1;
  --leading-tight:   1.15;
  --leading-snug:    1.3;
  --leading-normal:  1.54;   /* 13/20 — corpo de ambiente */
  --leading-relaxed: 1.67;   /* 15/25 — parágrafo de conceito */
  --leading-loose:   2;

  /* Tracking */
  --tracking-tight:  -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-wider:  0.08em;
  --tracking-widest: 0.24em;   /* "C O L E Ç Ã O", "M A T É R I A" */


  /* ─── ESPAÇAMENTOS ────────────────────────────────────
     O vazio é estrutural neste projeto. Seções longas,
     blocos isolados.                                       */

  --space-1:  0.25rem;   --space-2:  0.5rem;    --space-3:  0.75rem;
  --space-4:  1rem;      --space-5:  1.25rem;   --space-6:  1.5rem;
  --space-8:  2rem;      --space-10: 2.5rem;    --space-12: 3rem;
  --space-14: 3.5rem;    --space-16: 4rem;      --space-20: 5rem;
  --space-24: 6rem;      --space-28: 7rem;      --space-32: 8rem;
  --space-40: 10rem;     --space-48: 12rem;

  --section-padding-y: clamp(var(--space-20), 9vw, var(--space-40));
  --section-padding-x: clamp(var(--space-5), 5vw, var(--space-10));


  /* ─── BORDAS ──────────────────────────────────────────
     Sistema reto. Só o botão de play é circular — porque
     é assim no design.                                     */

  --radius-none: 0;
  --radius-sm:   2px;
  --radius-full: 9999px;

  --border-hairline: 1px solid var(--color-border);


  /* ─── SOMBRAS ─────────────────────────────────────────
     Praticamente inexistentes. A sombra das amostras vem
     rasterizada no PNG exportado do Figma — é sombra
     fotográfica, não CSS.                                  */

  --shadow-none:   none;
  --shadow-sample: 0 18px 36px -18px rgb(63 72 86 / 0.34);
  --shadow-modal:  0 40px 80px -24px rgb(0 0 0 / 0.55);


  /* ─── MOTION ──────────────────────────────────────────
     Movimento de assentamento, não de entrada.
     Curva assinatura: expo.out — começa rápido, desacelera
     longamente, como objeto pesado sendo apoiado.          */

  --ease-signature: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out:       cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:    cubic-bezier(0.65, 0, 0.35, 1);
  --ease-linear:    linear;

  --duration-fast:    220ms;
  --duration-base:    420ms;
  --duration-slow:    900ms;
  --duration-slower:  1200ms;
  --duration-slowest: 1600ms;   /* momento-assinatura do lettering */

  --transition-fast: var(--duration-fast) var(--ease-out);
  --transition-base: var(--duration-base) var(--ease-signature);
  --transition-slow: var(--duration-slow) var(--ease-signature);


  /* ─── LAYOUT ──────────────────────────────────────────
     Traduz o canvas de 1500px do Figma. A coluna de
     conteúdo ocupa 26,07% → 73,47% da largura.             */

  --container:       1500px;
  --container-text:  47.4%;     /* 711/1500 — a coluna editorial */
  --content-start:   26.07%;    /* x=391 no Figma */
  --content-end:     73.47%;    /* x=1102 no Figma */

  --header-height:   89px;

  /* Z-index */
  --z-base:     0;
  --z-raised:   10;
  --z-sticky:   30;
  --z-header:   80;
  --z-overlay:  90;
  --z-modal:    100;
}


/* ─── FONTES ────────────────────────────────────────────
   Sailec — assets do cliente, convertidos TTF → WOFF2.
   ⚠️ Regular (400 romano) e Black (900) não foram entregues.
   Mapeamento em DESIGN_SYSTEM.md.                          */

@font-face {
  font-family: 'Sailec';
  src: url('../fonts/sailec-thin.woff2') format('woff2');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Sailec';
  src: url('../fonts/sailec-light.woff2') format('woff2');
  font-weight: 300 400;   /* cobre o Regular ausente */
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Sailec';
  src: url('../fonts/sailec-medium.woff2') format('woff2');
  font-weight: 500 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Sailec';
  src: url('../fonts/sailec-bold.woff2') format('woff2');
  font-weight: 700 900;   /* cobre o Black ausente */
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Sailec';
  src: url('../fonts/sailec-italic.woff2') format('woff2');
  font-weight: 300 400;
  font-style: italic;
  font-display: swap;
}