/* ============================================================================ ALEXANDRA CASONI — CLUB A · DESIGN SYSTEM tokens.css — Design tokens (the single source of truth) PROVENANCE (nothing here is invented): - Colors sampled directly from the guide deck "JORNADA - PROPOSTA DE VALOR CLUB A 2026.pdf" and cross-checked against her live site CSS (alecasoni.com.br) which defines these as OKLCH tokens. • terracotta (signature surface) = #CF4520 ≈ oklch(55% .13 38) on site • gold / ochre = #CBA052 ≈ oklch(78% .085 78) • cream (light surface) = #F1F1DE ≈ oklch(97.5% .012 80) - Fonts confirmed from her site: Cormorant Garamond (serif) + Inter (sans). "Fraunces" is added only as the high-impact display face that matches the warm, retro-editorial headline treatment used in the deck (JORNADA, Camada, "transformação real"). It is documented as a marketing display face, not as an official logo font. The real wordmark/CLUB A mark are used as image assets. ========================================================================== */ :root { /* ----- BRAND PRIMITIVES ------------------------------------------------ */ /* Terracotta — the signature. The dominant surface in ~half of all slides. */ --t-terracotta: #CF4520; /* signature / hero surface */ --t-terracotta-600: #BC3E1D; /* pressed / deeper */ --t-terracotta-700: #A8381B; /* deep accents */ --t-brick: #8E3A24; /* darkest band (Camada 1, panels) */ --t-terracotta-soft: #DD8364; /* tints, soft fills */ /* Gold / Ochre — accent, watermark, "metal" sheen. */ --t-gold: #CBA052; --t-gold-soft: #E0C089; --t-gold-deep: #A87C34; --t-gold-pale: #EAD9B0; /* Cream / Sand — warm ivory surfaces. */ --t-cream: #F1F1DE; /* primary light surface */ --t-cream-2: #EAE7D2; /* alt section */ --t-sand: #E2DBC4; /* deeper neutral, dividers */ /* Ink — warm near-black for text on light. */ --t-ink: #2A1A12; --t-ink-2: #4B362B; /* secondary text on cream */ --t-ink-muted: #6E574A; /* muted / captions */ --t-near-black: #160F0B; /* dark surface (rare) */ /* ----- SEMANTIC: LIGHT SURFACE (default, cream) ------------------------ */ --bg: var(--t-cream); --bg-alt: var(--t-cream-2); --surface: #F7F6EC; --fg: var(--t-ink); --fg-soft: var(--t-ink-2); --fg-muted: var(--t-ink-muted); --accent: var(--t-terracotta); --accent-ink: var(--t-cream); /* text on terracotta */ --line: color-mix(in srgb, var(--t-ink) 14%, transparent); --line-strong: color-mix(in srgb, var(--t-ink) 26%, transparent); /* ----- TYPOGRAPHY ------------------------------------------------------ */ --font-display: "Fraunces", "Cormorant Garamond", Georgia, serif; /* impact */ --font-serif: "Cormorant Garamond", Georgia, "Times New Roman", serif; --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; /* Fluid type scale (min 360px → max 1440px). 1.250 major-third-ish ramp. */ --fs-eyebrow: clamp(0.72rem, 0.66rem + 0.28vw, 0.84rem); --fs-sm: clamp(0.84rem, 0.80rem + 0.20vw, 0.94rem); --fs-body: clamp(1.00rem, 0.96rem + 0.30vw, 1.18rem); --fs-lead: clamp(1.18rem, 1.06rem + 0.62vw, 1.55rem); --fs-h6: clamp(1.05rem, 0.98rem + 0.40vw, 1.30rem); --fs-h5: clamp(1.30rem, 1.16rem + 0.70vw, 1.75rem); --fs-h4: clamp(1.60rem, 1.34rem + 1.20vw, 2.40rem); --fs-h3: clamp(2.05rem, 1.62rem + 2.00vw, 3.40rem); --fs-h2: clamp(2.05rem, 1.55rem + 2.30vw, 3.50rem); --fs-h1: clamp(2.30rem, 1.60rem + 3.10vw, 4.50rem); --fs-display: clamp(2.60rem, 1.70rem + 4.40vw, 6.00rem); --lh-tight: 0.98; --lh-snug: 1.08; --lh-head: 1.14; --lh-body: 1.62; --lh-relaxed: 1.78; --tracking-display: -0.018em; --tracking-tight: -0.01em; --tracking-wide: 0.02em; --tracking-eyebrow: 0.26em; /* deco-condensed wordmark feel for labels */ --tracking-kicker: 0.42em; /* ----- SPACING (4px base) ---------------------------------------------- */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem; --sp-8: 4rem; --sp-9: 6rem; --sp-10: 8rem; /* Fluid section rhythm */ --section-y: clamp(4rem, 2.4rem + 7vw, 9rem); --gutter: clamp(1.15rem, 0.5rem + 3vw, 3rem); /* ----- LAYOUT ---------------------------------------------------------- */ --container: 1240px; --container-md: 1040px; --container-sm: 760px; --container-xs: 600px; /* ----- RADII ----------------------------------------------------------- */ --r-xs: 4px; --r-sm: 8px; --r-md: 14px; --r-lg: 22px; --r-xl: 34px; --r-pill: 999px; /* ----- BORDERS --------------------------------------------------------- */ --bw-hair: 1px; --bw-line: 1.5px; /* the "linha técnica" weight in the deck */ /* ----- SHADOWS (warm-tinted, never grey/blue) -------------------------- */ --shadow-xs: 0 1px 2px rgba(42, 26, 18, 0.06); --shadow-sm: 0 4px 14px -6px rgba(42, 26, 18, 0.16); --shadow-md: 0 16px 40px -18px rgba(42, 26, 18, 0.28); --shadow-lg: 0 34px 70px -28px rgba(42, 26, 18, 0.40); --shadow-terra: 0 24px 60px -22px rgba(207, 69, 32, 0.46); /* ----- MOTION ---------------------------------------------------------- */ --dur-1: 160ms; /* micro (hover) */ --dur-2: 320ms; /* default */ --dur-3: 620ms; /* reveal */ --dur-4: 1000ms; /* draw line / count */ --dur-5: 1600ms; /* slow ambient sheen */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* expo-out, premium */ --ease-inout: cubic-bezier(0.65, 0, 0.35, 1); --ease-soft: cubic-bezier(0.33, 0.9, 0.3, 1); /* ----- Z-INDEX --------------------------------------------------------- */ --z-base: 1; --z-deco: 2; --z-content: 3; --z-nav: 50; --z-overlay: 80; --z-top: 100; } /* ---- DARK / TERRACOTTA SURFACE THEME ------------------------------------ Applied with .surface--terra (mid sections) or .surface--ink (rare). These recolor the semantic tokens so any component drops onto a terracotta panel and reads correctly — mirroring the deck's cream-slide / terracotta-slide alternation. */ .surface--terra { --bg: var(--t-terracotta); --bg-alt: var(--t-terracotta-600); --surface: var(--t-terracotta-600); --fg: var(--t-cream); --fg-soft: color-mix(in srgb, var(--t-cream) 86%, var(--t-gold)); --fg-muted: color-mix(in srgb, var(--t-cream) 82%, var(--t-terracotta)); --accent: var(--t-gold); --accent-ink: var(--t-ink); --line: color-mix(in srgb, var(--t-cream) 20%, transparent); --line-strong: color-mix(in srgb, var(--t-cream) 34%, transparent); color: var(--fg); background: var(--bg); } .surface--brick { --bg: var(--t-brick); --bg-alt: #7d3220; --surface: #7d3220; --fg: var(--t-cream); --fg-soft: var(--t-gold-soft); --fg-muted: color-mix(in srgb, var(--t-cream) 80%, var(--t-brick)); --accent: var(--t-gold); --accent-ink: var(--t-ink); --line: color-mix(in srgb, var(--t-cream) 18%, transparent); --line-strong: color-mix(in srgb, var(--t-cream) 30%, transparent); color: var(--fg); background: var(--bg); } .surface--gold { --bg: var(--t-gold); --bg-alt: var(--t-gold-deep); --surface: var(--t-gold-soft); --fg: #4a330e; --fg-soft: #5c410f; --fg-muted: color-mix(in srgb, #4a330e 66%, var(--t-gold)); --accent: var(--t-terracotta); --accent-ink: var(--t-cream); --line: color-mix(in srgb, #4a330e 20%, transparent); --line-strong: color-mix(in srgb, #4a330e 34%, transparent); color: var(--fg); background: var(--bg); } .surface--cream-2 { background: var(--t-cream-2); } /* Respect reduced motion globally (durations collapse). */ @media (prefers-reduced-motion: reduce) { :root { --dur-1: 1ms; --dur-2: 1ms; --dur-3: 1ms; --dur-4: 1ms; --dur-5: 1ms; } }