/* =====================================================================
   LAMAS DESTILARIA — TOKENS
   Gerado a partir das Figma Variables do arquivo
   "Lamas Destilaria — Ecommerce" (LTAVVh06I315DtDsEzSLjO) em 10/09/2026.
   Fonte da verdade: Figma. Não editar valores à mão aqui — mudar no
   Figma e regenerar.
   Convenção de nome: color/bg/base (Figma) → --color-bg-base (CSS).
   Tema: [data-theme="dark"] em qualquer elemento troca o modo daquele
   bloco para baixo (equivalente ao "modo explícito" do Figma).
   ===================================================================== */

:root {
  /* ---------- Primitives / Color (não usar direto em componente) ---------- */
  --primitive-black: #000000;
  --primitive-white: #FFFFFF;
  --primitive-off-white: #EFEBE5;
  --primitive-off-white-tint: #F7F5F2;
  --primitive-gold: #BA975C;
  --primitive-gold-dark: #896E4A;
  --primitive-grey-200: #D9D9D9;
  --primitive-grey-400: #A3A3A3;
  --primitive-grey-500: #8C8C8C;
  --primitive-grey-600: #595959;
  --primitive-grey-700: #2E2E2E;
  --primitive-grey-800: #1F1F1F;
  --primitive-grey-900: #141414;
  --primitive-black-40: rgb(0 0 0 / 0.4);
  --primitive-red-light: #C0392B;
  --primitive-red-dark: #FF4F33;
  --primitive-green-light: #3F7D4F;
  --primitive-green-dark: #4ADE9A;
  --primitive-amber-light: #92650E;
  --primitive-amber-dark: #E8B84B;

  /* ---------- Primitives / Spacing (base 4) ---------- */
  --space-0: 0px;   --space-1: 4px;   --space-2: 8px;   --space-3: 12px;
  --space-4: 16px;  --space-5: 20px;  --space-6: 24px;  --space-8: 32px;
  --space-9: 36px;  --space-10: 40px; --space-11: 44px; --space-12: 48px;
  --space-14: 56px; --space-16: 64px; --space-20: 80px; --space-24: 96px;
  --space-32: 128px; --space-36: 144px;

  /* ---------- Spacing (semânticos) ---------- */
  --space-control-pad-x-sm: var(--space-4);
  --space-control-pad-x-md: var(--space-6);
  --space-control-pad-x-lg: var(--space-8);
  --space-control-gap-sm: var(--space-2);
  --space-control-gap-md: var(--space-2);
  --space-control-gap-lg: var(--space-3);
  --space-inset-tag-x: var(--space-2);
  --space-inset-tag-y: var(--space-1);
  --space-inset-card: var(--space-6);
  --space-field-pad-x-sm: var(--space-3);
  --space-field-pad-x-md: var(--space-4);
  --space-field-pad-x-lg: var(--space-5);
  --space-field-stack-gap: var(--space-2);
  --space-stack-xs: var(--space-2);
  --space-stack-sm: var(--space-3);
  --space-stack-md: var(--space-4);
  --space-stack-lg: var(--space-6);
  --space-layout-block-gap: var(--space-10);
  --space-layout-margin-mobile: var(--space-4);
  --space-layout-margin-desktop: var(--space-24);
  --space-layout-gutter-mobile: var(--space-4);
  --space-layout-gutter-desktop: var(--space-6);
  --space-layout-section-y-mobile: var(--space-8);
  --space-layout-section-y-desktop: var(--space-12);
  --space-layout-media-section-y: var(--space-36);

  /* ---------- Sizes ---------- */
  --size-control-sm: var(--space-9);
  --size-control-md: var(--space-11);
  --size-control-lg: var(--space-14);
  --size-icon-sm: var(--space-4);
  --size-icon-md: var(--space-5);
  --size-icon-lg: var(--space-6);
  --size-toggle-track: var(--space-12);
  --size-toggle-knob: var(--space-5);
  --size-border-hairline: 1px;
  --size-border-focus: 2px;
  --size-layout-max-width: 1248px;
  --size-layout-content-column: 470px;
  --size-card-product: 294px;
  --size-card-testimonial: 364px;

  /* ---------- Primitives / Radius ---------- */
  --radius-none: 0px; --radius-xs: 2px; --radius-sm: 6px; --radius-md: 8px;
  --radius-lg: 10px; --radius-xl: 14px; --radius-2xl: 18px; --radius-3xl: 22px;
  --radius-4xl: 26px; --radius-full: 999px;

  /* ---------- Radius (semânticos): "quanto mais longe da página, mais redondo" ---------- */
  --radius-media: var(--radius-none);
  --radius-button-squared: var(--radius-sm);
  --radius-field: var(--radius-md);
  --radius-surface: var(--radius-lg);
  --radius-floating: var(--radius-xl);
  --radius-overlay: var(--radius-2xl);
  --radius-button: var(--radius-full);
  --radius-tag: var(--radius-full);
  --radius-pill: var(--radius-full);

  /* ---------- Typography ---------- */
  --font-family-display: "arpona", "Spectral", Georgia, serif;
  --font-family-body: "Work Sans", system-ui, sans-serif;
  --font-family-mono: "IBM Plex Mono", ui-monospace, monospace;
  --font-weight-light: 300; --font-weight-regular: 400; --font-weight-medium: 500;
  --font-weight-semibold: 600; --font-weight-bold: 700;
  --font-size-2xs: 10px; --font-size-xs: 12px; --font-size-sm: 14px; --font-size-base: 16px;
  --font-size-lg: 18px; --font-size-xl: 20px; --font-size-2xl: 24px; --font-size-3xl: 30px;
  --font-size-4xl: 36px; --font-size-5xl: 48px;
}

/* ---------- Color (semânticos) — modo Light ---------- */
:root, [data-theme="light"] {
  --color-bg-base: var(--primitive-white);
  --color-bg-deep: var(--primitive-off-white);
  --color-surface-default: var(--primitive-off-white);
  --color-surface-alt: var(--primitive-off-white-tint);
  --color-surface-inverse: var(--primitive-black);
  --color-surface-inverse-alt: var(--primitive-grey-900);
  --color-border-default: var(--primitive-grey-200);
  --color-border-strong: var(--primitive-grey-500);
  --color-text-primary: var(--primitive-black);
  --color-text-secondary: var(--primitive-grey-600);
  --color-text-disabled: var(--primitive-grey-500);
  --color-text-on-inverse: var(--primitive-white);
  --color-text-on-inverse-muted: var(--primitive-grey-400);
  --color-text-on-media: var(--primitive-white);
  --color-overlay-media: var(--primitive-black-40);
  --color-accent-signature: var(--primitive-gold);
  --color-accent-signature-text-safe: var(--primitive-gold-dark);
  --color-accent-on-accent: var(--primitive-black);
  --color-focus-ring: var(--primitive-gold-dark);
  --color-action-primary-bg: var(--primitive-black);
  --color-action-primary-bg-hover: var(--primitive-grey-700);
  --color-action-on-primary: var(--primitive-white);
  --color-action-quiet-bg: var(--primitive-off-white);
  --color-action-disabled-bg: var(--primitive-off-white);
  --color-action-disabled-text: var(--primitive-grey-500);
  --color-feedback-danger: var(--primitive-red-light);
  --color-feedback-success: var(--primitive-green-light);
  --color-feedback-warning: var(--primitive-amber-light);
  --color-feedback-on-feedback: var(--primitive-white);
  color-scheme: light;
}

/* ---------- Color (semânticos) — modo Dark ---------- */
[data-theme="dark"] {
  --color-bg-base: var(--primitive-black);
  --color-bg-deep: var(--primitive-black);
  --color-surface-default: var(--primitive-grey-900);
  --color-surface-alt: var(--primitive-grey-800);
  --color-surface-inverse: var(--primitive-white);
  --color-surface-inverse-alt: var(--primitive-grey-200);
  --color-border-default: var(--primitive-grey-700);
  --color-border-strong: var(--primitive-grey-500);
  --color-text-primary: var(--primitive-white);
  --color-text-secondary: var(--primitive-grey-400);
  --color-text-disabled: var(--primitive-grey-600);
  --color-text-on-inverse: var(--primitive-black);
  --color-text-on-inverse-muted: var(--primitive-grey-600);
  --color-text-on-media: var(--primitive-white);
  --color-overlay-media: var(--primitive-black-40);
  --color-accent-signature: var(--primitive-gold);
  --color-accent-signature-text-safe: var(--primitive-gold);
  --color-accent-on-accent: var(--primitive-black);
  --color-focus-ring: var(--primitive-gold);
  --color-action-primary-bg: var(--primitive-white);
  --color-action-primary-bg-hover: var(--primitive-off-white);
  --color-action-on-primary: var(--primitive-black);
  --color-action-quiet-bg: var(--primitive-grey-800);
  --color-action-disabled-bg: var(--primitive-grey-900);
  --color-action-disabled-text: var(--primitive-grey-600);
  --color-feedback-danger: var(--primitive-red-dark);
  --color-feedback-success: var(--primitive-green-dark);
  --color-feedback-warning: var(--primitive-amber-dark);
  --color-feedback-on-feedback: var(--primitive-white);
  color-scheme: dark;
}

/* ---------- Estilos de texto (mobile-first; desktop ≥ 1024px) ----------
   Cada classe = um par Mobile/Desktop do Figma. Ver tabela na seção Tipografia. */
.t-headline     { font-family: var(--font-family-display); font-weight: 400; font-size: 30px; line-height: 1.1; }
.t-heading-xl   { font-family: var(--font-family-display); font-weight: 400; font-size: 24px; line-height: 1.1; }
.t-heading-lg   { font-family: var(--font-family-display); font-weight: 400; font-size: 20px; line-height: 1.2; text-transform: uppercase; }
.t-heading-md   { font-family: var(--font-family-display); font-weight: 400; font-size: 18px; line-height: 1.2; }
.t-heading-sm   { font-family: var(--font-family-display); font-weight: 400; font-size: 16px; line-height: 1.2; }
.t-sub-headline { font-family: var(--font-family-body); font-weight: 400; font-size: 18px; line-height: 1.6; }
.t-body         { font-family: var(--font-family-body); font-weight: 400; font-size: 16px; line-height: 1.6; }
.t-body-sm      { font-family: var(--font-family-body); font-weight: 400; font-size: 14px; line-height: 1.4; }
.t-caption      { font-family: var(--font-family-body); font-weight: 400; font-size: 12px; line-height: 1.4; letter-spacing: 0.02em; }
.t-overline     { font-family: var(--font-family-body); font-weight: 500; font-size: 12px; line-height: 1.2; letter-spacing: 0.12em; text-transform: uppercase; }
.t-label        { font-family: var(--font-family-body); font-weight: 500; font-size: 14px; line-height: 1.2; letter-spacing: 0.02em; }
.t-button       { font-family: var(--font-family-body); font-weight: 600; font-size: 14px; line-height: 1;   letter-spacing: 0.08em; text-transform: uppercase; }
.t-price-lg     { font-family: var(--font-family-body); font-weight: 600; font-size: 16px; line-height: 1.2; }
.t-price        { font-family: var(--font-family-body); font-weight: 600; font-size: 14px; line-height: 1.2; }
.t-price-strike { font-family: var(--font-family-body); font-weight: 400; font-size: 14px; line-height: 1.2; text-decoration: line-through; }
@media (min-width: 1024px) {
  .t-headline   { font-size: 48px; line-height: 1; }
  .t-heading-xl { font-size: 36px; line-height: 1.1; }
  .t-heading-lg { font-size: 30px; line-height: 1.1; }
  .t-heading-md { font-size: 24px; line-height: 1.2; }
  .t-heading-sm { font-family: var(--font-family-body); font-size: 20px; line-height: 1.2; } /* ⚠ ver Pendências */
  .t-price-lg   { font-size: 20px; }
}