/* * ╔══════════════════════════════════════════════════════╗ * ║ SEMENTES DE FÉ — DESIGN TOKENS ║ * ║ 01-tokens.css ║ * ║ ║ * ║ Single source of truth for all visual decisions. ║ * ║ Never hardcode values — always reference a token. ║ * ╚══════════════════════════════════════════════════════╝ */ :root { /* ───────────────────────────────────────── * COLOR PALETTE * Named after natural/biblical references. * Drawn from warm earth, forest, candlelight. * ───────────────────────────────────────── */ /* Greens — faith, growth, life */ --clr-forest-900: #0F2318; --clr-forest-800: #1C3D2C; --clr-forest-700: #244D37; --clr-forest-600: #2E6444; --clr-forest-500: #3A7A55; /* primary brand green */ --clr-forest-400: #5A9B73; --clr-forest-300: #7DB891; --clr-forest-200: #B2D4BD; --clr-forest-100: #DFF0E6; --clr-forest-50: #EFF7F2; /* Golds — light, wisdom, value */ --clr-gold-900: #7A5C00; --clr-gold-700: #A07A0A; --clr-gold-500: #C49A28; /* primary accent gold */ --clr-gold-400: #D4B045; --clr-gold-300: #E4C86A; --clr-gold-200: #F0D68A; --clr-gold-100: #FAF0C8; --clr-gold-50: #FEFAED; /* Earth — warmth, groundedness, trust */ --clr-soil-900: #1A0E06; --clr-soil-800: #2C1A0E; /* primary dark text */ --clr-soil-700: #4A2C18; --clr-soil-600: #6B4228; --clr-soil-500: #8B5E3C; --clr-soil-400: #A87A58; --clr-soil-300: #C49A80; --clr-soil-200: #DEC0A8; /* Parchment — warmth, history, authenticity */ --clr-parchment-900: #C8B89A; --clr-parchment-700: #DDD0B8; --clr-parchment-500: #EDE3D0; --clr-parchment-300: #F5EFE2; --clr-parchment-100: #FAF6EE; /* page background */ --clr-parchment-50: #FDFBF7; /* Pure */ --clr-white: #FFFFFF; --clr-black: #000000; /* ───────────────────────────────────────── * SEMANTIC COLOR ASSIGNMENTS * Map raw palette to interface roles. * Change meaning here, not in components. * ───────────────────────────────────────── */ --color-bg: var(--clr-parchment-100); --color-bg-subtle: var(--clr-parchment-300); --color-bg-raised: var(--clr-parchment-50); --color-bg-dark: var(--clr-forest-800); --color-bg-darker: var(--clr-forest-900); --color-bg-warm: var(--clr-gold-100); --color-bg-warm-mid: var(--clr-gold-200); --color-text: var(--clr-soil-800); --color-text-secondary:var(--clr-soil-600); --color-text-muted: var(--clr-soil-400); --color-text-inverse: var(--clr-parchment-100); --color-text-inverse-muted: var(--clr-forest-200); --color-brand: var(--clr-forest-500); --color-brand-dark: var(--clr-forest-800); --color-brand-light: var(--clr-forest-100); --color-accent: var(--clr-gold-500); --color-accent-light: var(--clr-gold-200); --color-accent-warm: var(--clr-gold-100); --color-border: rgba(44, 26, 14, 0.10); --color-border-mid: rgba(44, 26, 14, 0.16); --color-border-dark: rgba(255,255,255, 0.12); /* ───────────────────────────────────────── * TYPOGRAPHY * Three font roles — never mix arbitrarily. * Display → headlines, large statements * Body → paragraphs, UI, labels * Accent → emotional pull-quotes only * ───────────────────────────────────────── */ --font-display: 'Baloo 2', 'Trebuchet MS', sans-serif; --font-body: 'Nunito', 'Helvetica Neue', sans-serif; --font-accent: 'Caveat', cursive; /* Scale — Major Third (×1.25) */ --text-2xs: 0.512rem; --text-xs: 0.64rem; --text-sm: 0.8rem; --text-base: 1rem; --text-md: 1.25rem; --text-lg: 1.563rem; --text-xl: 1.953rem; --text-2xl: 2.441rem; --text-3xl: 3.052rem; --text-4xl: 3.815rem; --text-hero: clamp(2.2rem, 5vw, 3.8rem); /* Weights — Baloo 2 max is 800, Nunito goes to 900 */ --weight-light: 400; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-black: 800; /* Line heights — adjusted for Baloo 2's taller x-height */ --leading-none: 1; --leading-tight: 1.2; --leading-snug: 1.38; --leading-normal: 1.58; --leading-relaxed:1.74; --leading-loose: 1.9; /* Letter spacing */ /* Adjusted for Baloo 2 — rounded fonts need less negative tracking */ --tracking-tightest: -0.01em; --tracking-tight: -0.005em; --tracking-normal: 0; --tracking-wide: 0.05em; --tracking-wider: 0.09em; --tracking-widest: 0.14em; /* ───────────────────────────────────────── * SPACING * 4px base unit — multiples of 4. * ───────────────────────────────────────── */ --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: 80px; --space-10: 96px; --space-11: 128px; --space-12: 160px; /* ───────────────────────────────────────── * LAYOUT * ───────────────────────────────────────── */ --container-sm: 560px; --container-md: 760px; --container-lg: 960px; --container-xl: 1120px; --container-full:100%; --section-padding-y: var(--space-10); --section-padding-x: var(--space-5); /* ───────────────────────────────────────── * BORDER RADIUS * ───────────────────────────────────────── */ --radius-xs: 4px; --radius-sm: 8px; --radius-md: 14px; --radius-lg: 20px; --radius-xl: 28px; --radius-2xl: 40px; --radius-full: 9999px; /* ───────────────────────────────────────── * SHADOWS * Tinted with soil color for warmth. * Never use pure black shadows. * ───────────────────────────────────────── */ --shadow-xs: 0 1px 3px rgba(44, 26, 14, 0.08); --shadow-sm: 0 2px 8px rgba(44, 26, 14, 0.09); --shadow-md: 0 4px 18px rgba(44, 26, 14, 0.11); --shadow-lg: 0 8px 32px rgba(44, 26, 14, 0.13); --shadow-xl: 0 16px 48px rgba(44, 26, 14, 0.16); --shadow-2xl: 0 24px 64px rgba(44, 26, 14, 0.2); --shadow-green-md: 0 6px 24px rgba(58, 122, 85, 0.32); --shadow-green-lg: 0 12px 40px rgba(58, 122, 85, 0.38); /* ───────────────────────────────────────── * TRANSITIONS * ───────────────────────────────────────── */ --ease-out: cubic-bezier(0.0, 0.0, 0.2, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --duration-fast: 150ms; --duration-normal: 260ms; --duration-slow: 420ms; --duration-slower: 600ms; /* ───────────────────────────────────────── * Z-INDEX SCALE * ───────────────────────────────────────── */ --z-below: -1; --z-base: 0; --z-raised: 10; --z-sticky: 50; --z-overlay: 100; --z-modal: 200; --z-toast: 300; }