/* ==========================================================================
   Kassab's — Design tokens
   Paleta extraída da logo (dourado gradiente + vermelho) e das fotos de
   produto (fundo bordô escuro). Tudo o mais no site deriva daqui.
   ========================================================================== */

:root {
	/* ---- Marca -------------------------------------------------------- */
	--k-gold-100: #FBEFCE;
	--k-gold-200: #F2D278;
	--k-gold-300: #DDAE45;
	--k-gold-400: #C8952B;   /* dourado principal */
	--k-gold-500: #A2751C;
	--k-gold-600: #74530F;

	--k-red-300:  #F04B4B;
	--k-red-400:  #D61313;   /* vermelho da marca, já usado no site */
	--k-red-500:  #A80E0E;
	--k-red-600:  #7A0A0A;

	/* ---- Neutros escuros (base do site) -------------------------------- */
	--k-ink-900:  #080506;   /* fundo mais escuro */
	--k-ink-800:  #0E090A;
	--k-ink-700:  #150E10;
	--k-ink-600:  #1E1416;
	--k-wine-800: #2A0C11;   /* bordô das fotos de produto */
	--k-wine-700: #3B0D12;
	--k-wine-600: #4E1219;

	/* ---- Neutros claros ------------------------------------------------ */
	--k-cream:    #F8F3E9;
	--k-sand:     #E8DFCF;
	--k-muted:    #B3A79A;
	--k-muted-2:  #857A70;
	--k-line:     rgba(248, 243, 233, .12);
	--k-line-2:   rgba(248, 243, 233, .06);

	/* ---- Papéis semânticos --------------------------------------------- */
	--k-bg:            var(--k-ink-900);
	--k-bg-alt:        var(--k-ink-700);
	--k-surface:       rgba(248, 243, 233, .04);
	--k-surface-hover: rgba(248, 243, 233, .07);
	--k-text:          var(--k-cream);
	--k-text-soft:     var(--k-muted);
	--k-accent:        var(--k-gold-400);
	--k-accent-soft:   var(--k-gold-200);

	--k-gold-grad: linear-gradient(135deg, var(--k-gold-500) 0%, var(--k-gold-200) 45%, var(--k-gold-300) 70%, var(--k-gold-500) 100%);
	--k-red-grad:  linear-gradient(135deg, var(--k-red-400) 0%, var(--k-red-500) 100%);

	/* ---- Tipografia ---------------------------------------------------- */
	--k-font-display: 'Sora', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
	--k-font-body:    'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;

	/* Escala fluida: cresce de 360px a 1440px de viewport */
	--k-fs-xs:   clamp(0.75rem,  0.72rem + 0.15vw, 0.8125rem);
	--k-fs-sm:   clamp(0.875rem, 0.85rem + 0.15vw, 0.9375rem);
	--k-fs-base: clamp(1rem,     0.96rem + 0.2vw,  1.0625rem);
	--k-fs-md:   clamp(1.125rem, 1.06rem + 0.3vw,  1.25rem);
	--k-fs-lg:   clamp(1.3rem,   1.18rem + 0.55vw, 1.625rem);
	--k-fs-xl:   clamp(1.6rem,   1.38rem + 1vw,    2.25rem);
	--k-fs-2xl:  clamp(2rem,     1.6rem + 1.8vw,   3rem);
	--k-fs-3xl:  clamp(2.4rem,   1.8rem + 2.7vw,   4rem);
	--k-fs-4xl:  clamp(2.8rem,   1.9rem + 4vw,     5.25rem);

	--k-lh-tight: 1.08;
	--k-lh-snug:  1.25;
	--k-lh-base:  1.65;

	--k-ls-tight: -0.02em;
	--k-ls-wide:  0.12em;

	/* ---- Espaçamento ---------------------------------------------------- */
	--k-space-1:  0.25rem;
	--k-space-2:  0.5rem;
	--k-space-3:  0.75rem;
	--k-space-4:  1rem;
	--k-space-5:  1.5rem;
	--k-space-6:  2rem;
	--k-space-7:  3rem;
	--k-space-8:  4rem;
	--k-space-9:  6rem;

	/* Ritmo vertical das seções */
	--k-section-y: clamp(3.5rem, 2rem + 6vw, 7.5rem);

	/* ---- Layout ---------------------------------------------------------- */
	--k-container:      1200px;
	--k-container-wide: 1400px;
	--k-container-pad:  clamp(1.125rem, 0.6rem + 2.2vw, 2.5rem);
	--k-header-h:       76px;

	/* ---- Formas ----------------------------------------------------------- */
	--k-radius-sm: 8px;
	--k-radius:    14px;
	--k-radius-lg: 22px;
	--k-radius-xl: 32px;
	--k-radius-pill: 999px;

	/* ---- Sombras ---------------------------------------------------------- */
	--k-shadow-sm: 0 2px 8px rgba(0, 0, 0, .35);
	--k-shadow:    0 12px 32px rgba(0, 0, 0, .45);
	--k-shadow-lg: 0 28px 64px rgba(0, 0, 0, .55);
	--k-glow-gold: 0 10px 40px rgba(200, 149, 43, .28);
	--k-glow-red:  0 10px 40px rgba(214, 19, 19, .3);

	/* ---- Movimento --------------------------------------------------------- */
	--k-ease:  cubic-bezier(.22, .8, .3, 1);
	--k-dur:   .38s;
	--k-dur-sm: .22s;

	/* ---- Camadas ----------------------------------------------------------- */
	--k-z-header:  900;
	--k-z-float:   950;
	--k-z-bar:     940;
	--k-z-overlay: 1000;
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--k-dur: .01ms;
		--k-dur-sm: .01ms;
	}
}