/* ============================================================ UNITED JUNTOS — DESIGN TOKENS (tokens.css) v1.0 · Single Source of Truth ------------------------------------------------------------ The ONE file every United Juntos project points at. Import it first, then build with the var(--uj-*) tokens below. Brand decision (locked): the "Papel Picado" system documented here SUPERSEDES the legacy Squarespace look (blue/teal/gold + Space Grotesk/Raleway). Build everything new from these tokens. Fonts (load before this file or alongside it): Bricolage Grotesque — display / headings Source Sans 3 — body / UI @import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,600;12..96,700;12..96,800&family=Source+Sans+3:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap'); ============================================================ */ :root { /* ---------- 1 · BRAND PALETTE (raw, logo-true) ---------- */ --uj-cobalt: #24529F; /* primary — header, nav, links, headings */ --uj-cobalt-deep: #1C417F; /* cobalt hover / pressed */ --uj-marigold: #ECB340; /* CTA highlight — Donate / Attend (FILL only) */ --uj-marigold-deep: #D89E2C; /* marigold hover / pressed */ --uj-coral: #DA5F55; /* secondary accent — decorative / large only */ --uj-coral-deep: #AC3E35; /* TEXT-SAFE coral twin — small text, errors (darkened 2026-07: 5.6:1 on cream, 5.0:1 on hero #FCEAB9; was #C94A40 at 4.3:1) */ --uj-sky: #97C9EA; /* soft accent — resource feel (FILL only) */ --uj-sage: #74B974; /* growth accent — decorative / large only */ --uj-sage-deep: #2E7D5B; /* TEXT-SAFE sage twin — links, success, meta */ /* ---------- neutrals ---------- */ --uj-cream: #FBF7EE; /* primary background (warm off-white) */ --uj-cream-2: #F3E7CE; /* deeper warm field / gradients */ --uj-surface: #FFFFFF; /* cards & raised surfaces */ --uj-ink: #1F2A37; /* body text (13.6:1 on cream — AAA) */ --uj-navy: #1A2740; /* darkest text — required on marigold/sky */ --uj-line: #E7DCC4; /* hairlines / borders on cream */ --uj-muted: #6B5C3E; /* muted body text on cream (still AA) */ /* ---------- 2 · SEMANTIC TOKENS (use these in product code) ---------- */ --uj-bg: var(--uj-cream); --uj-bg-alt: var(--uj-cream-2); --uj-text: var(--uj-ink); --uj-text-muted: var(--uj-muted); --uj-text-invert: #FFFFFF; --uj-border: var(--uj-line); --uj-primary: var(--uj-cobalt); /* primary brand surface */ --uj-primary-text: #FFFFFF; --uj-primary-hover: var(--uj-cobalt-deep); --uj-cta: var(--uj-marigold); /* highest-priority action */ --uj-cta-text: var(--uj-navy); --uj-cta-hover: var(--uj-marigold-deep); --uj-link: var(--uj-cobalt); --uj-link-hover: var(--uj-coral-deep); --uj-focus: var(--uj-cobalt); /* focus ring color */ --uj-focus-ring: 0 0 0 3px rgba(36,82,159,.40); --uj-error: var(--uj-coral-deep); /* never the only signal — pair w/ icon+text */ --uj-success: var(--uj-sage-deep); --uj-info: var(--uj-cobalt); /* ---------- 3 · TYPOGRAPHY ---------- */ --uj-font-display: "Bricolage Grotesque", system-ui, sans-serif; --uj-font-body: "Source Sans 3", system-ui, sans-serif; --uj-w-regular: 400; --uj-w-medium: 500; --uj-w-semi: 600; --uj-w-bold: 700; --uj-w-black: 800; /* mobile-first fluid scale (min → max via clamp) */ --uj-text-h1: clamp(2.25rem, 1.6rem + 3.2vw, 3.5rem); /* 36 → 56 */ --uj-text-h2: clamp(1.75rem, 1.4rem + 1.8vw, 2.625rem); /* 28 → 42 */ /* fluid below H2 too — min = comfortable mobile, max = prior fixed size */ --uj-text-h3: clamp(1.25rem, 1.16rem + 0.4vw, 1.375rem); /* 20 → 22 */ --uj-text-h4: clamp(1.0625rem, 1.03rem + 0.16vw, 1.125rem); /* 17 → 18 */ --uj-text-body: clamp(1rem, 0.98rem + 0.1vw, 1.0625rem); /* 16 → 17 */ --uj-text-sm: clamp(0.875rem, 0.86rem + 0.08vw, 0.9375rem); /* 14 → 15 */ --uj-text-cap: clamp(0.78rem, 0.77rem + 0.06vw, 0.8125rem); /* 12.5 → 13 */ --uj-lh-tight: 1.1; --uj-lh-snug: 1.25; --uj-lh-body: 1.62; --uj-tracking-cap: 0.08em; /* ---------- 4 · SPACING (4px base) ---------- */ --uj-space-1: 4px; --uj-space-2: 8px; --uj-space-3: 12px; --uj-space-4: 16px; --uj-space-5: 24px; --uj-space-6: 32px; --uj-space-7: 48px; --uj-space-8: 64px; --uj-space-9: 96px; /* ---------- 5 · RADII ---------- */ --uj-r-sm: 8px; --uj-r-md: 14px; --uj-r-lg: 20px; --uj-r-xl: 28px; --uj-r-pill: 999px; /* ---------- 6 · SHADOWS (warm-tinted) ---------- */ --uj-shadow-sm: 0 6px 16px -12px rgba(60,40,10,.5); --uj-shadow-md: 0 18px 40px -34px rgba(60,40,10,.7); --uj-shadow-lg: 0 30px 70px -34px rgba(60,40,10,.7); /* ---------- 7 · LAYOUT & GRID ---------- */ --uj-maxw: 1180px; /* default content container */ --uj-maxw-narrow: 760px; /* prose / article width */ --uj-maxw-wide: 1360px; /* full-bleed sections */ --uj-gutter: 24px; /* grid gutter / column gap */ --uj-gutter-lg: 32px; /* desktop gutter */ --uj-tap-min: 48px; /* minimum interactive tap target */ --uj-bilingual-grow: 1.25; /* allow ~25% width growth for ES strings */ /* Breakpoints — CSS vars can't be used inside @media, so these px values ARE the standard. Use them verbatim in media queries. sm 480 · md 768 · lg 1024 · xl 1280 */ --uj-bp-sm: 480px; --uj-bp-md: 768px; --uj-bp-lg: 1024px; --uj-bp-xl: 1280px; /* ---------- 8 · MOTION ---------- */ --uj-dur-fast: 120ms; /* hovers, taps */ --uj-dur-base: 200ms; /* most transitions */ --uj-dur-slow: 360ms; /* panels, modals, entrances */ --uj-ease: cubic-bezier(.4, 0, .2, 1); /* standard */ --uj-ease-out: cubic-bezier(.16, 1, .3, 1); /* entrances (settle) */ --uj-ease-in: cubic-bezier(.4, 0, 1, 1); /* exits */ --uj-lift: translateY(-2px); /* button/card hover lift */ } /* ============================================================ OPTIONAL BASE — comment out if your project sets its own. Gives a correct starting point: cream bg, ink text, the fonts. ============================================================ */ .uj-base { background: var(--uj-bg); color: var(--uj-text); font-family: var(--uj-font-body); font-size: var(--uj-text-body); line-height: var(--uj-lh-body); -webkit-font-smoothing: antialiased; } .uj-base h1, .uj-base h2, .uj-base h3, .uj-base h4 { font-family: var(--uj-font-display); line-height: var(--uj-lh-tight); letter-spacing: -0.02em; margin: 0; } /* Universal focus-visible — accessibility is non-negotiable */ .uj-base :focus-visible, .uj-focusable:focus-visible { outline: 3px solid var(--uj-focus); outline-offset: 2px; }