/* ============================================================ Iglesia Cristiana Pentecostal "En La Mesa Con Jesús" Design tokens — Hum genre, tuned to brand (flame orange anchor) Every colour OKLCH. Every value referenced by name elsewhere. ============================================================ */ :root { /* ---- Paper & ink (warm anchor, hue ~55) ---- */ --color-paper: oklch(97.2% 0.012 85); /* warm cream — silk-adjacent */ --color-paper-2: oklch(94.5% 0.018 80); /* deeper cream for alt bands */ --color-paper-3: oklch(91.5% 0.022 78); /* card tint */ --color-rule: oklch(86% 0.020 75); /* hairlines */ --color-rule-2: oklch(78% 0.022 72); /* input borders */ --color-neutral: oklch(52% 0.030 60); /* secondary text */ --color-muted: oklch(42% 0.028 55); /* captions, helper text */ --color-ink: oklch(25% 0.035 50); /* warm brown-black */ --color-ink-2: oklch(33% 0.038 52); /* deepened ink */ /* ---- Accent: flame (from the logo) ---- */ --color-accent: oklch(56.5% 0.195 45); /* flame orange — 56.5% not 58%: lifts accent-ink on accent 4.36 -> 4.64 (AA), and accent-on-paper to 4.54 for large text. Hue and chroma untouched. */ --color-accent-ink: oklch(98% 0.008 85); /* text on flame fill — verified */ --color-accent-deep: oklch(46% 0.160 42); /* hover/active flame */ --color-focus: oklch(55% 0.180 48); /* focus ring — ≥3:1 on paper */ /* ---- Support hues (Hum multi-accent, used <3% of viewport) ---- */ --color-gold: oklch(62% 0.120 80); /* ring gold — detail only */ --color-pear: oklch(72% 0.130 120); /* soft green — success/celebration */ --color-sky: oklch(68% 0.090 230); /* calm blue — info/links secondary */ /* ---- Hero scene "La Mesa Larga" (illustrated, not photographic) ---- Dusk-lit gathering. Every colour is a sibling of the flame anchor so the illustration belongs to the same world as the rest of the site. */ --scene-sky-top: oklch(93% 0.030 78); --scene-sky-bottom: oklch(86% 0.055 62); --scene-figure: oklch(37% 0.045 50); /* warm brown silhouette, never black */ --scene-figure-b: oklch(43% 0.055 42); /* neighbour tone — warmer */ --scene-figure-c: oklch(33% 0.040 58); /* neighbour tone — deeper */ --scene-figure-hi: oklch(48% 0.055 48); /* heads read a shade lighter */ --scene-figure-back: oklch(58% 0.040 55); /* back row, away from the light */ --scene-cloth-hi: oklch(97.5% 0.010 85); --scene-cloth-lo: oklch(90% 0.018 78); --scene-cloth-shadow: oklch(84% 0.030 72); /* under the table overhang */ --scene-floor: oklch(80% 0.045 60); --scene-warm: oklch(78% 0.130 62); /* ambient bloom over the gathering */ --scene-dish: oklch(78% 0.100 72); --scene-runner: oklch(66% 0.130 45); /* terracotta sibling of the flame */ --scene-edge: oklch(76% 0.035 68); --scene-wire: oklch(54% 0.030 60); --scene-bulb: oklch(88% 0.150 88); --scene-plate: oklch(99% 0.005 85); --scene-bread: oklch(74% 0.080 65); --scene-grape: oklch(46% 0.090 300); --scene-wheat: oklch(70% 0.110 85); --scene-jar: oklch(51% 0.090 45); --scene-wax: oklch(95% 0.018 85); --scene-dove: oklch(98% 0.006 85); /* ---- Semantic ---- */ --color-error: oklch(52% 0.190 25); --color-success: oklch(50% 0.130 145); /* ---- On-dark text & overlays (photo folds, ink bands) ---- */ --color-paper-hi: oklch(94% 0.012 85); /* caption sub-text on photos */ --color-on-ink: oklch(82% 0.020 75); /* secondary text on ink bands */ --color-on-ink-mid: oklch(80% 0.020 75); /* helper text on ink bands */ --color-on-ink-soft: oklch(76% 0.020 75); /* notes on ink bands */ --color-on-ink-faint: oklch(72% 0.020 75); /* legal line on ink footer */ --color-ink-card: oklch(29% 0.038 52); /* form card on ink band */ --color-ink-card-rule: oklch(38% 0.035 52); /* hairline on ink card / footer */ --overlay-scrim: linear-gradient(to top, oklch(20% 0.03 50 / 0.55) 0%, transparent 42%); --shadow-photo: 0 1px 12px oklch(15% 0.02 50 / 0.45); --shadow-photo-soft: 0 1px 8px oklch(15% 0.02 50 / 0.5); --shadow-logo: 0 4px 24px oklch(15% 0.02 50 / 0.35); --backdrop-modal: oklch(18% 0.03 50 / 0.82); /* ---- Typography ---- */ --font-display: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif; --font-body: "Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif; --font-verse: "Newsreader", Georgia, serif; --text-xs: 0.8125rem; /* 13px — captions, helper */ --text-sm: 0.9375rem; /* 15px — secondary */ --text-base: 1.0625rem; /* 17px — body */ --text-lg: 1.25rem; --text-xl: 1.5rem; --text-2xl: clamp(1.6rem, 1.2rem + 1.6vw, 2.25rem); --text-3xl: clamp(2rem, 1.5rem + 2.6vw, 3.25rem); --text-display: clamp(2.5rem, 1.6rem + 4.4vw, 5.25rem); /* 21–50 char heroes */ --text-verse: clamp(1.8rem, 1.3rem + 2.4vw, 3rem); /* ---- Spacing (4pt scale) ---- */ --space-3xs: 0.125rem; --space-2xs: 0.25rem; --space-xs: 0.5rem; --space-sm: 0.75rem; --space-md: 1rem; --space-lg: 1.5rem; --space-xl: 2.5rem; --space-2xl: 4rem; --space-3xl: 6rem; --space-4xl: 9rem; /* ---- Radii (playful: 12px cards, 8px inputs, 999 pills) ---- */ --radius-card: 12px; --radius-input: 8px; --radius-pill: 999px; /* ---- Motion ---- */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in: cubic-bezier(0.7, 0, 0.84, 0); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --dur-micro: 120ms; --dur-short: 220ms; --dur-long: 420ms; /* ---- Depth ---- */ --shadow-whisper: 0 1px 2px oklch(25% 0.03 50 / 0.05); --shadow-lift: 0 8px 24px -10px oklch(45% 0.10 50 / 0.18); /* Card that must hold its edge against BOTH cream and a photograph. --shadow-lift is too soft over a photo; --color-rule measures 1.41:1 against paper, so a hairline border cannot do this work alone. */ --shadow-card: 0 2px 6px oklch(20% 0.03 50 / 0.16), 0 18px 44px -18px oklch(20% 0.03 50 / 0.34); /* ---- Z scale ---- */ --z-base: 1; --z-raised: 10; --z-dropdown: 100; --z-sticky: 200; --z-modal: 400; --z-toast: 500; /* ---- Page geometry ---- */ --page-max: 72rem; --page-gutter: clamp(1rem, 4vw, 4rem); }