/* ===================================================================== PRIMO — Horno & Café Colors + Type foundation Use this single file for all base tokens. Semantic vars below. ===================================================================== */ /* ---------- Webfont: Cowboyslang Expanded (display) ---------- */ @font-face { font-family: "Cowboyslang"; src: url("./fonts/CowboyslangW00-Expanded.ttf") format("truetype"); font-weight: 400 900; font-style: normal; font-display: swap; } /* ---------- Google Font pairings (see README — substitution flag) ---------- Lora — warm, Italian-feeling serif for tagline / accents DM Sans — neutral body sans, friendly proportions */ @import url("https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&display=swap"); :root { /* ============ BRAND PALETTE (from brief) ============ */ --primo-red: #c9473b; /* tomate / primary brand */ --primo-pink: #e7bbb1; /* salsa rosa / cream-pink */ --primo-green: #304f3d; /* horno verde / forest */ --primo-cream: #f6efe6; /* paper warm white */ --primo-white: #ffffff; /* ============ EXTENDED NEUTRALS ============ */ --ink-900: #1c1612; /* near black, warm */ --ink-700: #3b302a; --ink-500: #6b5e54; --ink-300: #b5a89c; --ink-100: #e8dfd4; /* ============ TINTS / SHADES (for hover, surfaces) ============ */ --red-700: #a83729; /* press / hover-dark */ --red-500: #c9473b; /* base */ --red-300: #e08376; /* tint */ --red-100: #f4d8d3; --green-700: #213829; --green-500: #304f3d; --green-300: #6b8a78; --green-100: #d3decf; --pink-500: #e7bbb1; --pink-300: #f1d4cd; --pink-100: #f8e9e4; /* ============ SEMANTIC COLORS ============ */ --fg-1: var(--ink-900); /* primary text */ --fg-2: var(--ink-700); /* secondary text */ --fg-3: var(--ink-500); /* tertiary / meta */ --fg-on-dark: var(--primo-cream); --fg-on-red: var(--primo-cream); --fg-on-green: var(--primo-cream); --fg-accent: var(--primo-red); --fg-brand: var(--primo-green); --bg-1: var(--primo-cream); /* main canvas */ --bg-2: var(--primo-white); --bg-3: var(--pink-100); --bg-inverse: var(--primo-green); --bg-accent: var(--primo-red); --bg-soft: var(--primo-pink); --border-1: rgba(28, 22, 18, 0.12); --border-2: rgba(28, 22, 18, 0.20); --border-strong: var(--primo-green); /* ============ STATUS (derived; warm palette) ============ */ --status-success: #4f7a4a; --status-warning: #d89b3d; --status-error: #b3392d; --status-info: #5a7da1; /* ============ TYPE SCALE (use semantic vars below) ============ */ --font-display: "Cowboyslang", "Alfa Slab One", "Cooper Black", Georgia, serif; --font-serif: "Lora", "Caladea", Georgia, "Times New Roman", serif; --font-sans: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* Sizes — fluid-friendly base, deck/marketing scale */ --fs-display-xl: clamp(56px, 9vw, 144px); --fs-display-l: clamp(44px, 6vw, 96px); --fs-display-m: clamp(36px, 4.5vw, 72px); --fs-h1: clamp(36px, 4vw, 56px); --fs-h2: clamp(28px, 2.8vw, 40px); --fs-h3: 22px; --fs-h4: 18px; --fs-body-lg: 18px; --fs-body: 16px; --fs-body-sm: 14px; --fs-meta: 12px; --fs-eyebrow: 12px; /* Tracking + leading */ --lh-display: 0.95; --lh-heading: 1.1; --lh-body: 1.55; --lh-tight: 1.2; --tr-display: -0.01em; --tr-eyebrow: 0.14em; --tr-tight: -0.02em; /* ============ SPACING (8px base, friendly 4px steps) ============ */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px; /* ============ RADII ============ */ --radius-xs: 4px; --radius-sm: 8px; --radius-md: 14px; /* default cards */ --radius-lg: 22px; --radius-xl: 32px; --radius-pill: 999px; /* ============ SHADOWS — warm, soft, paper-feel ============ */ --shadow-sm: 0 1px 2px rgba(28,22,18,0.06), 0 1px 1px rgba(28,22,18,0.04); --shadow-md: 0 6px 14px -6px rgba(28,22,18,0.18), 0 2px 4px -2px rgba(28,22,18,0.08); --shadow-lg: 0 20px 40px -16px rgba(28,22,18,0.28), 0 6px 12px -8px rgba(28,22,18,0.14); --shadow-inner: inset 0 0 0 1px rgba(28,22,18,0.10); /* Brand accent shadow (red glow, used sparingly on CTAs) */ --shadow-red: 0 6px 0 -1px var(--red-700); /* ============ MOTION ============ */ --ease-out: cubic-bezier(.2,.7,.2,1); --ease-in-out: cubic-bezier(.65,.05,.36,1); --dur-fast: 140ms; --dur-base: 220ms; --dur-slow: 420ms; } /* ===================================================================== SEMANTIC TYPE — use these classes directly on elements ===================================================================== */ .t-display-xl, .t-display-l, .t-display-m, h1.display, h2.display { font-family: var(--font-display); font-weight: 400; /* Cowboyslang is already heavy */ line-height: var(--lh-display); letter-spacing: var(--tr-display); color: var(--fg-brand); text-wrap: balance; } .t-display-xl { font-size: var(--fs-display-xl); } .t-display-l { font-size: var(--fs-display-l); } .t-display-m { font-size: var(--fs-display-m); } h1, .t-h1 { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-h1); line-height: var(--lh-heading); letter-spacing: var(--tr-display); color: var(--fg-brand); text-wrap: balance; } h2, .t-h2 { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-h2); line-height: var(--lh-heading); color: var(--fg-brand); text-wrap: balance; } h3, .t-h3 { font-family: var(--font-serif); font-weight: 600; font-size: var(--fs-h3); line-height: var(--lh-tight); color: var(--fg-1); } h4, .t-h4 { font-family: var(--font-sans); font-weight: 600; font-size: var(--fs-h4); line-height: var(--lh-tight); color: var(--fg-1); letter-spacing: 0; } p, .t-body { font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--fg-2); text-wrap: pretty; } .t-body-lg { font-size: var(--fs-body-lg); line-height: var(--lh-body); } .t-body-sm { font-size: var(--fs-body-sm); line-height: var(--lh-body); } .t-tagline { font-family: var(--font-serif); font-style: italic; font-weight: 500; color: var(--fg-brand); } .t-eyebrow { font-family: var(--font-sans); font-size: var(--fs-eyebrow); letter-spacing: var(--tr-eyebrow); text-transform: uppercase; font-weight: 600; color: var(--fg-accent); } .t-meta { font-family: var(--font-sans); font-size: var(--fs-meta); color: var(--fg-3); letter-spacing: 0.02em; } code, .t-mono { font-family: var(--font-mono); font-size: 0.92em; background: var(--bg-3); padding: 0.1em 0.35em; border-radius: var(--radius-xs); color: var(--fg-1); }