/*
 * Fratelli design tokens
 * -----------------------------------------------------------------------------
 * Lifted verbatim from the approved design prototype
 * (Fratelli Website (standalone).html :root blocks). Single source of truth for
 * colour, type, spacing, motion. Everything downstream — custom.css, the
 * kooka_* WPBakery elements, PDP/PLP CSS — references these, never raw hex.
 * Loaded first (include/enqueue.php), ahead of custom.css.
 */

:root {

	/* ---- Palette: neutrals -------------------------------------------------- */
	--ink-950:  #141311;
	--ink-900:  #1c1a17;
	--ink-800:  #262420;
	--ink-700:  #38352f;
	--ink-600:  #524d44;
	--warm-500: #7d766a;
	--warm-400: #a39c8d;
	--warm-300: #c7c0b0;
	--ivory-200:#e9e4d8;
	--ivory-100:#f2efe7;
	--paper:    #faf8f3;
	--white:    #ffffff;

	/* ---- Palette: garnet (primary accent) --------------------------------- */
	--garnet-900:#5c1212;
	--garnet-700:#7a1717;
	--garnet-600:#8c1c1c;
	--garnet-500:#a3271f;
	--garnet-400:#c2453a;

	/* ---- Palette: brass (metal accent) ----------------------------------- */
	--brass-700:#8a6b3d;
	--brass-600:#a17f4a;
	--brass-500:#b08d57;
	--brass-400:#c7a86f;
	--brass-300:#dfc796;

	/* ---- Palette: steel (cool neutral, spec/UI) ------------------------- */
	--steel-600:#787c80;
	--steel-500:#9a9d9f;
	--steel-400:#bcbfc0;
	--steel-300:#d8dad9;

	/* ---- Status ------------------------------------------------------------ */
	--success:#3f6b4a;
	--warning:#a3671f;
	--error:  var(--garnet-600);
	--info:   #3d5a6c;

	/* ---- Semantic: backgrounds ------------------------------------------- */
	--bg-page:          var(--ivory-100); /* #f2efe7 — page / header ground */
	--bg-surface:       var(--paper);
	--bg-surface-raised:var(--white);
	--bg-inverse:       var(--ink-950);
	--bg-inverse-raised:var(--ink-800);

	/* ---- Semantic: text ------------------------------------------------- */
	--text-primary:          var(--ink-950);
	--text-secondary:        var(--ink-700);
	--text-muted:            var(--warm-500);
	--text-on-inverse:       var(--ivory-100);
	--text-on-inverse-muted: var(--warm-400);
	--text-accent:           var(--garnet-600);
	--text-brass:            var(--brass-600);

	/* ---- Semantic: borders & accents ---------------------------------- */
	--border-default: var(--warm-300);
	--border-strong:  var(--ink-800);
	--border-inverse: rgba(242,239,231,.18);
	--accent-primary:        var(--garnet-600);
	--accent-primary-hover:  var(--garnet-700);
	--accent-primary-active: var(--garnet-900);
	--accent-metal:          var(--brass-500);
	--focus-ring:            var(--garnet-600);

	/* ---- Typography ---------------------------------------------------- */
	--font-sans:"Helvetica Neue","Helvetica",Arial,sans-serif;
	--display-weight:700;
	--body-weight:400;
	--medium-weight:500;
	--light-weight:300;
	--tracking-tight: -0.01em;
	--tracking-normal:0;
	--tracking-wide:  .04em;
	--tracking-wider: .12em;
	--tracking-widest:.22em;
	--text-display-xl:clamp(3rem, 6vw, 6.5rem);
	--text-display-lg:clamp(2.5rem, 4.5vw, 4.5rem);
	--text-display-md:clamp(2rem, 3.2vw, 3.25rem);
	--text-h1:2.25rem;
	--text-h2:1.75rem;
	--text-h3:1.375rem;
	--text-h4:1.125rem;
	--text-body-lg:1.125rem;
	--text-body:1rem;
	--text-body-sm:.875rem;
	--text-caption:.75rem;
	--text-eyebrow:.75rem;
	--lh-tight:1.05;
	--lh-snug:1.2;
	--lh-normal:1.5;
	--lh-relaxed:1.7;

	/* ---- Spacing ----------------------------------------------------- */
	--space-1:4px;
	--space-2:8px;
	--space-3:12px;
	--space-4:16px;
	--space-5:20px;
	--space-6:24px;
	--space-8:32px;
	--space-10:40px;
	--space-12:48px;
	--space-16:64px;
	--space-20:80px;
	--space-24:96px;
	--space-32:128px;
	--space-40:160px;

	/* ---- Radius ---------------------------------------------------- */
	--radius-xs:2px;
	--radius-sm:3px;
	--radius-md:4px;
	--radius-lg:6px;
	--radius-pill:999px;

	/* ---- Elevation ---------------------------------------------- */
	--shadow-sm:0 1px 2px rgba(20,19,17,.08);
	--shadow-md:0 4px 16px rgba(20,19,17,.10);
	--shadow-lg:0 16px 48px rgba(20,19,17,.16);
	--shadow-inverse:0 1px 0 rgba(255,255,255,.06) inset;

	/* ---- Motion ---------------------------------------------- */
	--ease-standard:cubic-bezier(.4,0,.2,1);
	--ease-out:cubic-bezier(0,0,.2,1);
	--duration-fast:120ms;
	--duration-base:220ms;
	--duration-slow:400ms;

	/* ---- Layout ------------------------------------------- */
	--container-max:1440px;
	--container-pad:clamp(24px, 5vw, 80px);
}