/* ==========================================================================
IGUANA BLEU · DESIGN TOKENS · v1.0 (2026-09-14)
Source of truth: "Final de Manual de Marca Iguana Bleu.pdf" (Sept 2026).
[M] = defined in the brand manual (do not change)
[D] = digital extension derived from the manual (web, email, social)
========================================================================== */
/* Fonts ------------------------------------------------------------------ */
/* Production web: load from Google Fonts (both are OFL, free for commercial use)
Local files: ../assets/fonts/ */
:root {
/* ---- Color · primary [M] --------------------------------------------- */
--ib-hueso: #F1F0EB; /* Bone. Default background. Never pure white. 60% */
--ib-arena: #E7DFD4; /* Sand. Second background, separates blocks. 22% */
--ib-grafito: #494E51; /* Graphite. Text, logo, line. Replaces black. 8% */
/* ---- Color · accents [M] (10% total, never all three in one small piece) */
--ib-barro: #BEA893; /* Clay. Volcanic earth, wood, coffee. */
--ib-azul-niebla: #ACBDC5; /* Mist blue. The "Bleu". Nothing more saturated. */
--ib-salvia: #B7C4B2; /* Sage. Highlands of Rancho Bravo. */
/* ---- Color · text [M] ------------------------------------------------- */
--ib-text: var(--ib-grafito);
--ib-text-note: #6E7377; /* Notes, allergens, credits only. */
--ib-text-inverse: var(--ib-hueso);
/* ---- Color · UI roles [D] -------------------------------------------- */
--ib-bg: var(--ib-hueso);
--ib-bg-alt: var(--ib-arena);
--ib-bg-emphasis: var(--ib-grafito);
--ib-rule: rgba(73, 78, 81, 0.18); /* hairline, graphite at 18% */
--ib-rule-strong: var(--ib-grafito);
--ib-focus: var(--ib-grafito);
/* ---- Typography · families [M] ---------------------------------------- */
--ib-font-serif: "Instrument Serif", Georgia, "Times New Roman", serif;
--ib-font-sans: "Work Sans", "Helvetica Neue", Arial, sans-serif;
/* ---- Typography · weights [M] ---------------------------------------- */
--ib-serif-regular: 400; /* + italic. The serif has no other weights. */
--ib-sans-extralight: 200; /* only >= 24px on light backgrounds */
--ib-sans-light: 300; /* DEFAULT body weight */
--ib-sans-regular: 400; /* emphasis inside a paragraph, names in lists */
--ib-sans-medium: 500; /* uppercase tracked labels only */
/* ---- Typography · hierarchy [M] (fluid between manual min and max) ---- */
--ib-display-size: clamp(3.625rem, 2.9rem + 2.6vw, 5.75rem); /* 58→92px. Keep display headlines to 2–4 words */
--ib-display-lh: 1.05;
--ib-display-ls: -0.01em;
--ib-h1-size: clamp(2.25rem, 2rem + 0.8vw, 2.75rem); /* 36→44px */
--ib-h1-lh: 1.15;
--ib-h1-ls: -0.01em;
--ib-h2-size: clamp(1.5rem, 1.35rem + 0.5vw, 1.75rem); /* 24→28px [D] drink names, card titles */
--ib-h2-lh: 1.2;
--ib-lead-size: clamp(1.375rem, 1.3rem + 0.3vw, 1.625rem); /* 22→26px */
--ib-lead-lh: 1.55;
--ib-body-size: clamp(1rem, 0.95rem + 0.2vw, 1.25rem); /* 16→20px */
--ib-body-lh: 1.7;
--ib-measure: 68ch; /* 60–75 characters */
--ib-label-size: 0.8125rem; /* 13px (12–14) */
--ib-label-ls: 0.2em;
--ib-label-lh: 1.4;
--ib-note-size: 0.9375rem; /* 15px (14–15) */
--ib-note-lh: 1.6;
/* ---- Spacing [D] · 4px base, geometric-ish ---------------------------- */
--ib-space-1: 0.25rem; /* 4 */
--ib-space-2: 0.5rem; /* 8 */
--ib-space-3: 0.75rem; /* 12 */
--ib-space-4: 1rem; /* 16 */
--ib-space-5: 1.5rem; /* 24 */
--ib-space-6: 2rem; /* 32 */
--ib-space-7: 3rem; /* 48 */
--ib-space-8: 4rem; /* 64 */
--ib-space-9: 6rem; /* 96 */
--ib-space-10: 8rem; /* 128 */
--ib-space-11: 10rem; /* 160 */
--ib-section-y: clamp(4rem, 2rem + 8vw, 10rem); /* 64 → 160 */
--ib-gutter-x: clamp(1.25rem, 0.5rem + 3vw, 4rem); /* 20 → 64 */
/* ---- Layout [D] ------------------------------------------------------- */
--ib-container: 75rem; /* 1200px */
--ib-container-wide: 90rem; /* 1440px, full-bleed imagery sections */
--ib-grid-cols: 12;
--ib-grid-gap: clamp(1rem, 0.5rem + 1.5vw, 1.5rem);
/* ---- Shape & surface [D] ---------------------------------------------- */
--ib-radius: 0; /* flat, matte, architectural */
--ib-radius-round: 50%; /* only for isotype avatar crops */
--ib-border: 1px;
--ib-shadow: none; /* the brand has no shadows, glows or gradients */
/* ---- Motion [D] ------------------------------------------------------- */
--ib-ease: cubic-bezier(0.25, 0.1, 0.25, 1);
--ib-dur-fast: 200ms;
--ib-dur: 450ms;
--ib-dur-slow: 800ms;
/* ---- Logo [M] ---------------------------------------------------------- */
--ib-logo-min-screen: 140px; /* full lockup width, 1x */
--ib-isotype-min-screen: 48px;
}
/* Base styles [M]+[D] ------------------------------------------------------ */
.ib-display { font-family: var(--ib-font-serif); font-weight: 400; font-size: var(--ib-display-size); line-height: var(--ib-display-lh); letter-spacing: var(--ib-display-ls); }
.ib-h1 { font-family: var(--ib-font-serif); font-weight: 400; font-size: var(--ib-h1-size); line-height: var(--ib-h1-lh); letter-spacing: var(--ib-h1-ls); }
.ib-h2 { font-family: var(--ib-font-serif); font-weight: 400; font-size: var(--ib-h2-size); line-height: var(--ib-h2-lh); }
.ib-lead { font-family: var(--ib-font-sans); font-weight: 300; font-size: var(--ib-lead-size); line-height: var(--ib-lead-lh); }
.ib-body { font-family: var(--ib-font-sans); font-weight: 300; font-size: var(--ib-body-size); line-height: var(--ib-body-lh); max-width: var(--ib-measure); }
.ib-label { font-family: var(--ib-font-sans); font-weight: 500; font-size: var(--ib-label-size); line-height: var(--ib-label-lh); letter-spacing: var(--ib-label-ls); text-transform: uppercase; }
.ib-note { font-family: var(--ib-font-sans); font-weight: 300; font-size: var(--ib-note-size); line-height: var(--ib-note-lh); color: var(--ib-text-note); }