/* ==========================================================================
JABALÍ — DESIGN TOKENS · "Monte Claro"
Single source of truth for color, type, space, sizing, motion.
Link before any page styles:
Naming: --jb--. Raw palette at top, semantic aliases below.
Audited from index.html (home page) — the canonical reference.
========================================================================== */
:root {
/* ---------------------------------------------------------------- COLOR */
/* Raw palette */
--jb-oxblood: #4f0d00; /* primary brand */
--jb-oxblood-deep: #380900;
--jb-oxblood-soft: #6a282c;
--jb-cream: #ece8e4;
--jb-soil: #e9e6e1; /* light page ground */
--jb-soil-deep: #e2ded7; /* alternating section ground */
--jb-ink: #1c1714; /* near-black text */
--jb-white: #ffffff;
/* Semantic — surfaces */
--jb-surface: var(--jb-soil); /* default page background */
--jb-surface-alt: var(--jb-soil-deep); /* alternating section (e.g. extras) */
--jb-surface-invert: var(--jb-oxblood); /* immersive bands: hero, marquee, closing */
/* Semantic — text on light */
--jb-text: var(--jb-ink); /* primary: titles, body, labels, numerals */
--jb-text-soft: rgba(28,23,20,0.62); /* secondary: descriptions, captions */
--jb-text-faint: rgba(28,23,20,0.40); /* tertiary: disabled, hatch labels */
--jb-line: rgba(28,23,20,0.18); /* borders, dividers (default) */
--jb-line-soft: rgba(28,23,20,0.12); /* subtle dividers */
/* Semantic — text on oxblood / dark */
--jb-on-invert: var(--jb-cream);
--jb-on-invert-soft: rgba(236,232,228,0.82);
--jb-on-invert-faint: rgba(236,232,228,0.50);
/* Semantic — accent (use sparingly) */
--jb-accent: var(--jb-oxblood); /* immersive bands, hover, focus, key numerals */
--jb-watermark: rgba(79,13,0,0.10); /* faint oxblood index numerals behind headings */
/* Texture & placeholder (image fallbacks) */
--jb-hatch: repeating-linear-gradient(45deg, rgba(0,0,0,0.035) 0 12px, rgba(0,0,0,0.06) 12px 24px);
--jb-hatch-soft: repeating-linear-gradient(45deg, rgba(255,255,255,0.04) 0 12px, rgba(255,255,255,0.07) 12px 24px);
--jb-ph-line: rgba(0,0,0,0.15); /* placeholder frame border */
--jb-ph-label: rgba(0,0,0,0.45); /* placeholder hatch label */
--jb-surface-blur: rgba(233,230,225,0.92); /* sticky bar over content (soil @92%) */
/* ----------------------------------------------------------------- TYPE */
--jb-font-display: "Space Grotesk", "Space Mono", system-ui, sans-serif; /* headings, numerals, buttons */
--jb-font-mono: "Space Mono", ui-monospace, "SFMono-Regular", Menlo, monospace; /* body, eyebrows, UI */
/* Scale — fluid (clamp min→max in px noted) */
--jb-t-wordmark: clamp(4.5rem, 26vw, 22rem); /* 72 → 352 hero wordmark */
--jb-t-display-xl: clamp(2.5rem, 8vw, 4.5rem); /* 40 → 72 closing headline */
--jb-t-display-l: clamp(2rem, 6vw, 3.5rem); /* 32 → 56 section H2 */
--jb-t-numeral-xl: clamp(5rem, 16vw, 12rem); /* 80 → 192 watermark index */
--jb-t-marquee: clamp(1.25rem, 4vw, 2.25rem); /* 20 → 36 marquee */
--jb-t-lead: clamp(1rem, 2vw, 1.25rem); /* 16 → 20 intro / lead copy */
/* Scale — fixed */
--jb-t-mark: 4.5rem; /* 72 footer cursive logo (sizes the mark by height) */
--jb-t-nav: clamp(0.625rem, 2.3vw, 0.75rem); /* 10→12 top eyebrow nav */
--jb-t-h3: 1.75rem; /* 28 card title */
--jb-t-h4: 1.5rem; /* 24 bundle / feature title */
--jb-t-num: 2.5rem; /* 40 card index numeral */
--jb-t-price: 1.125rem; /* 18 price emphasis */
--jb-t-body: 1rem; /* 16 body */
--jb-t-sm: 0.875rem; /* 14 small body, descriptions, specs */
--jb-t-label: 0.75rem; /* 12 eyebrows, labels, legal, captions */
/* Letter-spacing */
--jb-ls-tight: -0.01em; /* large display */
--jb-ls-snug: 0.02em; /* marquee */
--jb-ls-button: 0.04em;
--jb-ls-spec: 0.08em;
--jb-ls-legal: 0.12em;
--jb-ls-eyebrow: 0.16em; /* sub-labels, footer headings */
--jb-ls-eyebrow-wide: 0.30em; /* section labels */
/* Line-height */
--jb-lh-hero: 0.82; /* wordmark */
--jb-lh-display: 0.95; /* H2 / closing */
--jb-lh-tight: 1; /* card titles, numerals */
--jb-lh-body: 1.5; /* base body, footer links */
--jb-lh-relaxed: 1.55; /* lead, descriptions */
--jb-lh-airy: 2.1; /* ritual mantra (closing) */
/* ---------------------------------------------------------------- SPACE */
/* 4px grid — every padding/margin/gap lands here */
--jb-s1: 0.25rem; /* 4 */
--jb-s2: 0.5rem; /* 8 */
--jb-s3: 0.75rem; /* 12 */
--jb-s4: 1rem; /* 16 */
--jb-s5: 1.25rem; /* 20 */
--jb-s6: 1.5rem; /* 24 card padding */
--jb-s7: 1.75rem; /* 28 */
--jb-s8: 2rem; /* 32 */
--jb-s9: 2.25rem; /* 36 */
--jb-s10: 2.5rem; /* 40 */
--jb-s11: 2.75rem; /* 44 */
--jb-s12: 3rem; /* 48 */
--jb-s14: 3.5rem; /* 56 */
--jb-s16: 4rem; /* 64 section vertical rhythm */
--jb-s18: 4.5rem; /* 72 spec/price label column */
--jb-s20: 5rem; /* 80 closing band */
--jb-s21: 5.25rem; /* 84 card description min-height */
/* --------------------------------------------------------------- LAYOUT */
--jb-maxw: 1280px; /* content max width */
--jb-gutter: 1.25rem; /* 20 page side padding */
--jb-bp: 768px; /* single mobile → desktop breakpoint */
--jb-touch: 44px; /* minimum touch target */
/* ------------------------------------------------------- BORDER / RADIUS */
--jb-border: 1px solid var(--jb-line);
--jb-border-soft: 1px solid var(--jb-line-soft);
--jb-radius: 0; /* sharp UI shapes — the system is square */
--jb-radius-mark: 6px; /* brandmark — the only rounded exception */
/* ---------------------------------------------------------- INTERACTION */
--jb-hover: var(--jb-ink); /* hover ground on light surfaces */
--jb-hover-invert: var(--jb-white); /* hover ground on oxblood */
--jb-disabled: var(--jb-text-faint); /* disabled text / border */
--jb-disabled-opacity: 0.40; /* disabled control */
--jb-ring: 2px solid var(--jb-ink); /* focus ring on light */
--jb-ring-invert: 2px solid var(--jb-cream); /* focus ring on oxblood */
--jb-ring-offset: 3px;
/* --------------------------------------------------------------- MOTION */
--jb-ease: 0.15s ease; /* transform / background / color */
--jb-lift: translateY(-2px); /* button hover */
--jb-marquee-dur: 30s; /* marquee drift */
}