/* ==========================================================================
   CASA PIETRA — DESIGN TOKENS
   Fonte: Figma "🎨 Style Guide" (node 704:172)
   Todos os valores vêm do style guide. Desvios estão comentados com [DESVIO].
   ========================================================================== */

:root {
  /* ------------------------------------------------------------------
     COR — Brand
     ------------------------------------------------------------------ */
  --color-primary: #91714d;
  --color-primary-tint-1: #c8b8a6;
  --color-primary-shade-1: #483826;
  /* [DESVIO] "Brand/Secondary" existe nas variáveis do arquivo e é usada na
     seção do Grupo Impper, mas não aparece na página de style guide, que só
     lista primary, tint 1 e shade 1. */
  --color-secondary: #565448;

  /* ------------------------------------------------------------------
     COR — Neutral
     ------------------------------------------------------------------ */
  --color-white: #ffffff;
  --color-gray-100: #d9d9d9;
  --color-gray-200: #e9ecef;
  --color-gray-300: #dee2e6;
  --color-gray-400: #bfc1bc;
  --color-gray-500: #7f8379;
  --color-gray-600: #5d6059;
  --color-gray-700: #3f413c;
  --color-gray-800: #3e3d38;
  --color-gray-900: #2b2a24;
  --color-black: #000000;

  /* ------------------------------------------------------------------
     COR — Light and Dark
     ------------------------------------------------------------------ */
  --color-light: #f8f9fa;
  --color-dark: #212529;

  /* ------------------------------------------------------------------
     COR — Feedback
     ------------------------------------------------------------------ */
  --color-danger: #dc3545;
  --color-warning: #ffc107;
  --color-success: #198754;

  /* ------------------------------------------------------------------
     COR — Aplicação semântica
     ------------------------------------------------------------------ */
  --color-text: var(--color-gray-900);
  --color-text-muted: var(--color-gray-600);
  --color-text-invert: var(--color-white);
  --color-bg: var(--color-light);
  --color-bg-invert: var(--color-dark);
  --color-border: var(--color-gray-300);
  --color-focus: var(--color-primary);

  /* [DESVIO] Cor do texto do botão sólido, medida pixel a pixel no botão
     CONTATO do header. Não corresponde a nenhum token da paleta — o mais
     próximo é gray-900 (#2B2A24). Mantida exata para não alterar o design.
     Contraste sobre gray-100: 8.7:1 (aprova AA). */
  --color-button-solid-text: #343533;

  /* ------------------------------------------------------------------
     SOMBRA
     Figma: DROP_SHADOW #00000080 (alpha 50%)
     ------------------------------------------------------------------ */
  --shadow-sm: 0 4px 8px 0 rgba(0, 0, 0, 0.5);
  --shadow-default: 0 8px 24px 0 rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 16px 32px 0 rgba(0, 0, 0, 0.5);

  /* ------------------------------------------------------------------
     TIPOGRAFIA — Font Family
     [DESVIO] O Figma escreve `script` como fallback genérico do
     $font-family-01. `script` não existe em CSS; o equivalente válido
     é `cursive`.
     ------------------------------------------------------------------ */
  --font-family-01: "Quentin", cursive;
  --font-family-02: "Bodoni Moda", serif;
  --font-family-03: "Geologica", sans-serif;

  /* ------------------------------------------------------------------
     TIPOGRAFIA — Font Weight
     [DESVIO] O style guide lista só 4 pesos nomeados e nenhum valor
     numérico, mas o text style "Heading 3" referencia
     $font-weight-semibold. Semibold (600) foi adicionado à escala —
     as fontes são variáveis, então não custa arquivo extra.
     ------------------------------------------------------------------ */
  --font-weight-extralight: 200;
  /* [DESVIO] Também fora da escala original. As legendas da galeria de
     diferenciais usam Geologica Light. Mesma justificativa do semibold. */
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* ------------------------------------------------------------------
     TIPOGRAFIA — Font Size (📱 mobile / MD herda mobile)
     Sobrescrito em LG (1366px) e XL (1920px) no fim do arquivo.
     ------------------------------------------------------------------ */
  --font-size-xs: 0.75rem;    /* 12px */
  --font-size-sm: 0.875rem;   /* 14px */
  --font-size-base: 1rem;     /* 16px */
  --font-size-lg: 1.125rem;   /* 18px */
  --font-size-xl: 1.25rem;    /* 20px */
  --font-size-xxl: 1.5rem;    /* 24px */
  /* [DESVIO] "Heading 5" existe nos text styles usados nas telas, mas não na
     escala de Font Size do style guide. Bodoni Moda Regular 32 / lh 1.2 / ls 0.
     Fica FIXO em 32px: os artboards mobile e desktop usam o mesmo valor, então
     não há como inferir crescimento em XL sem inventar. */
  --h5-font-size: 2rem;       /* 32px, fixo */
  --h4-font-size: 1.75rem;    /* 28px */
  --h3-font-size: 2.25rem;    /* 36px */
  --h2-font-size: 2.25rem;    /* 36px */
  --h1-font-size: 2.75rem;    /* 44px */

  /* [DESVIO] Escala dos títulos de destaque em Quentin. Os artboards mobile
     usam 40px, tamanho que não existe na escala (h1=44, h2=36). Criado a
     pedido do cliente para manter o Figma ao pé da letra sem distorcer a
     escala. Usado pelo título do hero e pelos títulos de seção.
     40px mobile/MD · 48px LG · 64px XL */
  --display-font-size: 2.5rem; /* 40px */

  /* ------------------------------------------------------------------
     TIPOGRAFIA — Line Height
     ------------------------------------------------------------------ */
  --line-height-sm: 1;
  --line-height-default: 1.2;
  --line-height-md: 1.4;

  /* ------------------------------------------------------------------
     TIPOGRAFIA — Letter Spacing
     ------------------------------------------------------------------ */
  --letter-spacing-sm: -0.01em;
  --letter-spacing-default: 0;
  --letter-spacing-md: 0.1em;

  /* ------------------------------------------------------------------
     BORDER RADIUS
     ------------------------------------------------------------------ */
  --border-radius-none: 0px;
  --border-radius-xs: 8px;
  --border-radius-sm: 12px;
  --border-radius-default: 16px;
  --border-radius-lg: 48px;
  --border-radius-pill: 500px;
  --border-radius-circular: 50%;

  /* ------------------------------------------------------------------
     BORDER WIDTH
     ------------------------------------------------------------------ */
  --border-width-none: 0px;
  --border-width-default: 1px;
  --border-width-md: 2px;

  /* ------------------------------------------------------------------
     OPACITY LEVELS
     ------------------------------------------------------------------ */
  --opacity-level-default: 1;
  --opacity-level-semi-opaque: 0.8;
  --opacity-level-intense: 0.64;
  --opacity-level-medium: 0.5;
  --opacity-level-light: 0.32;
  --opacity-level-lighter: 0.24;
  --opacity-level-faint: 0.16;
  --opacity-level-semi-transparent: 0.08;
  --opacity-level-none: 0;

  /* ------------------------------------------------------------------
     SHADE LEVELS (mistura com preto)
     Utilitários de sobreposição. Não confundir com a cor de marca
     "Primary + Shade 1" (#483826), que é um valor fixo — veja o
     comentário em [DESVIO] no README do design system.
     ------------------------------------------------------------------ */
  --shade-level-1: 0.16;
  --shade-level-2: 0.24;
  --shade-level-3: 0.32;
  --shade-level-4: 0.4;

  /* ------------------------------------------------------------------
     TINT LEVELS (mistura com branco)
     ------------------------------------------------------------------ */
  --tint-level-1: 0.16;
  --tint-level-2: 0.24;
  --tint-level-3: 0.32;
  --tint-level-4: 0.4;

  /* ------------------------------------------------------------------
     GRID SYSTEM — SM (mobile, base)
     Figma: 360px · 4 colunas · container 100% · padding 16 · gap 16
     ------------------------------------------------------------------ */
  --grid-columns: 4;
  --grid-gap: 16px;
  --container-padding: 16px;
  --container-max: 100%;

  /* ------------------------------------------------------------------
     BREAKPOINTS (referência — media queries não leem var())
     SM 360 · MD 768 · LG 1366 · XL 1920
     ------------------------------------------------------------------ */
  --breakpoint-sm: 360px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1366px;
  --breakpoint-xl: 1920px;

  /* ------------------------------------------------------------------
     MOTION
     ------------------------------------------------------------------ */
  --transition-fast: 150ms ease;
  --transition-default: 250ms ease;
  --transition-slow: 400ms ease;
}

/* ==========================================================================
   MD — 768px
   [DESVIO] Breakpoint não existe no Figma. Definido a pedido do cliente:
   8 colunas · container 100% · padding 24 · gap 24.
   Tipografia herda os tamanhos de mobile (decisão aprovada).
   ========================================================================== */
@media (min-width: 768px) {
  :root {
    --grid-columns: 8;
    --grid-gap: 24px;
    --container-padding: 24px;
    --container-max: 100%;
  }
}

/* ==========================================================================
   LG — 1366px (Notebook)
   Figma: 12 colunas · container 1120px · padding 0 · gap 32
   ========================================================================== */
@media (min-width: 1366px) {
  :root {
    --grid-columns: 12;
    --grid-gap: 32px;
    --container-padding: 0px;
    --container-max: 1120px;

    --font-size-xs: 0.75rem;    /* 12px */
    --font-size-sm: 0.875rem;   /* 14px */
    --font-size-base: 1rem;     /* 16px */
    --font-size-lg: 1.125rem;   /* 18px */
    --font-size-xl: 1.25rem;    /* 20px */
    --font-size-xxl: 1.5rem;    /* 24px */
    --h4-font-size: 2rem;       /* 32px */
    --h3-font-size: 2.25rem;    /* 36px */
    --h2-font-size: 2.5rem;     /* 40px */
    --h1-font-size: 3rem;       /* 48px */

    --display-font-size: 3rem; /* 48px */
  }
}

/* ==========================================================================
   XL — 1920px (Desktop)
   Figma: 12 colunas · container 1440px · padding 0 · gap 32
   ========================================================================== */
@media (min-width: 1920px) {
  :root {
    --grid-columns: 12;
    --grid-gap: 32px;
    --container-padding: 0px;
    --container-max: 1440px;

    --font-size-xs: 1rem;       /* 16px */
    --font-size-sm: 1.125rem;   /* 18px */
    --font-size-base: 1.25rem;  /* 20px */
    --font-size-lg: 1.5rem;     /* 24px */
    --font-size-xl: 1.75rem;    /* 28px */
    --font-size-xxl: 2rem;      /* 32px */
    --h4-font-size: 2.75rem;    /* 44px */
    --h3-font-size: 2.75rem;    /* 44px */
    --h2-font-size: 3.5rem;     /* 56px */
    --h1-font-size: 4rem;       /* 64px */

    --display-font-size: 4rem; /* 64px */
  }
}