/* =========================================================================== Guatazales · Color System · aligned to the official brandbook ("Cromatismo") Core palette (brandbook): verde bosque #465733 · oliva/lima viva #C4BC50 · crema #F7F5E9 · carbón #222221. Forest green is the PRIMARY identity colour; lima is the vivid "naturaleza viva" accent. Honey is kept as the product / commerce accent (the brand's mieles), wine is reserved for LITHA. Raw scales are tuned around the brandbook anchors; reference the SEMANTIC aliases (--color-primary, --surface-page, --text-strong…) in components. =========================================================================== */ :root { /* ---- Bosque · Forest-olive green (PRIMARY BRAND · brandbook #465733) ----- */ --bosque-100: #E6E9D8; --bosque-200: #CCD3B2; --bosque-300: #A7B381; --bosque-400: #7B8D54; --bosque-500: #5A6E3C; --bosque-600: #465733; /* ← brand primary (brandbook) */ --bosque-700: #394627; --bosque-800: #2B351D; --bosque-900: #1C2413; /* ---- Oliva · Lima viva — vivid living green (brandbook #C4BC50) ---------- */ --oliva-100: #F2EFCF; --oliva-200: #E7E2AA; --oliva-300: #D6CF7E; --oliva-400: #C4BC50; /* ← "naturaleza viva" accent (brandbook) */ --oliva-500: #A39C3F; --oliva-600: #7F7A31; --oliva-700: #5D5926; /* ---- Miel · Honey — product / commerce accent (the mieles) -------------- */ --honey-100: #FBF1D8; --honey-200: #F7E2B0; --honey-300: #F0C879; --honey-400: #E6AE3F; --honey-500: #D9971F; --honey-600: #C8861E; /* ← commerce / CTA accent */ --honey-700: #9C6711; --honey-800: #6F4A0E; --honey-900: #4A3209; /* ---- Vino · Burgundy — reserved for LITHA (honeywine) & "gusto" --------- */ --vino-200: #E2C5D0; --vino-300: #C68FA4; --vino-400: #A4587A; --vino-500: #8A3D5D; --vino-600: #783048; --vino-700: #5F2539; --vino-800: #481B2B; /* ---- Terracota · Earth — quiet "tacto" / soil accent ------------------- */ --terracota-100: #F1DBCD; --terracota-200: #E2BBA3; --terracota-300: #D0977A; --terracota-400: #BC744E; --terracota-500: #A85B33; --terracota-600: #8C4726; --terracota-700: #6E3720; /* ---- Neutrals · warm paper & near-neutral ink (brandbook crema/carbón) -- */ --blanco: #FFFFFF; --marfil-50: #FBFAF1; /* card / raised paper */ --crema-100: #F7F5E9; /* page paper (brandbook) */ --crema-200: #EFECDA; --arena-300: #E3DCC6; /* hairline / divider */ --arena-400: #D0C8AC; --carbon-300: #8A887C; /* subtle text */ --carbon-500: #585649; /* muted / secondary text */ --carbon-700: #2F2E29; /* body text */ --carbon-900: #222221; /* strong / headings / ink (brandbook) */ /* ======================================================================= Semantic aliases — reference THESE in components, not raw scales above. ======================================================================= */ /* Brand · primary identity = forest green; accent = honey (commerce) */ --color-primary: var(--bosque-600); --color-primary-strong: var(--bosque-700); --color-primary-soft: var(--bosque-100); --color-on-primary: var(--crema-100); --color-lima: var(--oliva-400); /* vivid "naturaleza viva" */ --color-brand: var(--honey-600); /* commerce / CTA accent */ --color-brand-strong: var(--honey-700); --color-brand-soft: var(--honey-100); --color-forest: var(--bosque-600); --color-olive: var(--oliva-500); --color-wine: var(--vino-600); /* LITHA */ --color-earth: var(--terracota-500); /* Text */ --text-strong: var(--carbon-900); --text-body: var(--carbon-700); --text-muted: var(--carbon-500); --text-subtle: var(--carbon-300); --text-inverse: var(--marfil-50); --text-primary: var(--bosque-700); /* forest identity text (eyebrows, links) */ --text-brand: var(--honey-700); /* commerce accent text (prices) */ --text-on-forest: var(--crema-100); /* Surfaces */ --surface-page: var(--crema-100); --surface-card: var(--marfil-50); --surface-raised: var(--blanco); --surface-sunken: var(--crema-200); --surface-forest: var(--bosque-600); --surface-lima: var(--oliva-400); --surface-wine: var(--vino-600); --surface-honey: var(--honey-600); --surface-inverse: var(--carbon-900); /* Borders */ --border-subtle: var(--arena-300); --border-strong: var(--arena-400); --border-primary: var(--bosque-600); --border-brand: var(--honey-600); --border-forest: var(--bosque-600); /* Focus ring */ --ring-brand: color-mix(in oklab, var(--bosque-600) 55%, transparent); /* Status (kept warm + earthy, never neon) */ --status-success: var(--bosque-500); --status-warning: var(--honey-600); --status-danger: var(--terracota-600); --status-info: var(--oliva-600); } /* =========================================================================== Guatazales · Typography · aligned to the brandbook Display (Grovana → Petrona) sets the artisanal, editorial voice. Text (Everett → Hanken Grotesk) carries body & UI. Condensed (Etna → Saira Condensed) is reserved for the regenerative seal & lockups. Calm rhythm. =========================================================================== */ :root { /* Families — brand face in comments, shipped substitute in the stack */ --font-display: 'Petrona', Georgia, 'Times New Roman', serif; /* Grovana */ --font-body: 'Hanken Grotesk', system-ui, -apple-system, sans-serif; /* Everett */ --font-condensed: 'Saira Condensed', 'Oswald', 'Arial Narrow', sans-serif; /* Etna Condensed */ --font-mono: 'Spline Sans Mono', ui-monospace, 'SF Mono', monospace; /* Optical / variable axis defaults (ignored by substitute, kept for Grovana) */ --display-soft: 0; /* @kind other */ --display-wonk: 0; /* @kind other */ /* Type scale — fluid, calm. Major-third-ish, anchored to a serene base. */ --text-2xs: 0.75rem; /* 12 · legal / micro labels */ --text-xs: 0.8125rem; /* 13 · eyebrow / meta */ --text-sm: 0.9375rem; /* 15 · captions, UI small */ --text-base: 1.0625rem; /* 17 · body default */ --text-md: 1.1875rem; /* 19 · lead paragraph */ --text-lg: 1.375rem; /* 22 · large body / small headings */ --text-xl: 1.75rem; /* 28 · h4 */ --text-2xl: 2.25rem; /* 36 · h3 */ --text-3xl: 3rem; /* 48 · h2 */ --text-4xl: clamp(2.75rem, 4.5vw, 4.25rem); /* h1 */ --text-5xl: clamp(3.5rem, 7vw, 6.5rem); /* hero display */ --text-6xl: clamp(4.5rem, 11vw, 9.5rem); /* poster / cover */ /* Weights */ --weight-light: 300; --weight-regular: 400; --weight-medium: 500; --weight-semibold:600; --weight-bold: 700; /* Line heights */ --leading-tight: 1.04; /* display headlines */ --leading-snug: 1.18; /* sub-heads */ --leading-normal: 1.45; /* UI */ --leading-relaxed: 1.7; /* long-form body */ /* Letter spacing */ --tracking-tight: -0.02em; --tracking-snug: -0.01em; --tracking-normal: 0; --tracking-wide: 0.08em; /* eyebrows */ --tracking-wider: 0.18em; /* small-caps labels */ /* Semantic roles */ --heading-family: var(--font-display); --heading-weight: var(--weight-semibold); --heading-tracking: var(--tracking-tight); --eyebrow-family: var(--font-body); --eyebrow-tracking: var(--tracking-wider); } /* =========================================================================== Guatazales · Spacing & layout 8px base with a gentle scale. The river is unhurried — whitespace is generous. =========================================================================== */ :root { --space-0: 0; --space-1: 0.25rem; /* 4 */ --space-2: 0.5rem; /* 8 */ --space-3: 0.75rem; /* 12 */ --space-4: 1rem; /* 16 */ --space-5: 1.5rem; /* 24 */ --space-6: 2rem; /* 32 */ --space-7: 2.5rem; /* 40 */ --space-8: 3rem; /* 48 */ --space-9: 4rem; /* 64 */ --space-10: 5rem; /* 80 */ --space-11: 6.5rem; /* 104 */ --space-12: 8rem; /* 128 — section rhythm */ --space-13: 11rem; /* 176 — chapter breaks */ /* Layout */ --container-max: 1200px; /* @kind spacing */ --container-prose: 64ch; /* @kind spacing */ --container-wide: 1440px; /* @kind spacing */ --gutter: clamp(1.25rem, 5vw, 4rem); /* @kind spacing */ /* Section vertical rhythm */ --section-y: clamp(4rem, 9vw, 8rem); /* @kind spacing */ --section-y-lg: clamp(6rem, 13vw, 11rem); /* @kind spacing */ } /* =========================================================================== Guatazales · Radius, elevation & motion Soft, hand-shaped corners. Shadows are warm & low — light through honey, never cold grey. Motion is calm: long eases, gentle fade-ups, no bounce. =========================================================================== */ :root { /* ---- Radius — organic, never sharp ------------------------------------- */ --radius-xs: 4px; --radius-sm: 8px; --radius-md: 14px; --radius-lg: 22px; --radius-xl: 32px; --radius-2xl: 44px; --radius-pill: 999px; --radius-card: var(--radius-lg); /* ---- Elevation — warm, soft, low-contrast ------------------------------ */ --shadow-xs: 0 1px 2px rgba(74, 50, 9, 0.06); --shadow-sm: 0 2px 6px rgba(74, 50, 9, 0.08); --shadow-md: 0 8px 22px -8px rgba(58, 40, 12, 0.16); --shadow-lg: 0 20px 48px -16px rgba(48, 34, 10, 0.22); --shadow-xl: 0 36px 80px -28px rgba(40, 28, 8, 0.28); /* image-frame ring: thin warm line + soft lift, like a mounted print */ --shadow-frame: 0 1px 0 rgba(255,255,255,0.5) inset, 0 18px 50px -22px rgba(48, 34, 10, 0.34); --shadow-focus: 0 0 0 3px var(--ring-brand); /* ---- Motion ------------------------------------------------------------ */ --ease-calm: cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */ --ease-river: cubic-bezier(0.45, 0, 0.15, 1); /* @kind other */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */ --dur-fast: 160ms; /* @kind other */ --dur-base: 280ms; /* @kind other */ --dur-slow: 520ms; /* @kind other */ --dur-reveal: 900ms; /* @kind other */ --hover-lift: -2px; /* @kind other */ }