/* ========================================================================== TOKENS — Conscious Tarot Design System ========================================================================== This file is the single source of truth for every design decision. No component or page file should hard-code a color, size, or timing value — it should reference a token from here. If a value doesn't exist yet, add it here first, then consume it. Organization: 1. Color 2. Typography 3. Spacing 4. Radius 5. Shadow 5.5. Gradients (v2) 6. Motion 7. Z-index 8. Container widths & breakpoints ========================================================================== */ :root { /* ------------------------------------------------------------------ */ /* 1. COLOR */ /* ------------------------------------------------------------------ */ /* Philosophy (v2): warmer, richer, more alive — premium wellness / modern spiritual, not corporate, not mystical cliché. Neutrals stay the base; THREE accents now exist, each with one deliberate job so they never compete: terracotta (CTAs/links), plum (depth/emphasis backgrounds), gold (rare premium highlight — used sparingly by design, not decoratively). Contrast ratios remain checked against WCAG AA regardless of richness. */ /* Neutrals — the paper (warmed slightly from v1) */ --color-paper: #FBF5EE; /* primary background */ --color-paper-deep: #F3E8DC; /* recessed / alternate section background */ --color-paper-raised: #FFFFFF; /* cards, raised surfaces on --color-paper */ /* Blush — new warm secondary background, for sections that want a softer, more romantic pause than paper-deep without going as dark as plum */ --color-blush: #F5E3DE; --color-blush-deep: #EDD0C8; /* borders/dividers within blush sections */ /* Plum — new dark, rich background for high-emotional-impact moments. Use LIGHT text on this background (--color-paper / --color-paper-deep), never --color-ink. Sparingly — 1–2 sections per page, not a recurring alternation partner. */ --color-plum: #3B2138; --color-plum-deep: #2A1727; /* darker variant, e.g. plum-on-plum borders */ --color-plum-tint: #E8DCE6; /* light plum wash — usable ON paper backgrounds */ /* Ink — text */ --color-ink: #2A2420; /* primary text — warm near-black, not pure black */ --color-ink-soft: #55493F; /* secondary text, captions on paper */ --color-ink-faint: #8A7C6E; /* tertiary text, disabled, placeholders */ /* Structural — borders, dividers, quiet lines (warmed to match paper) */ --color-line: #E8D8C8; /* hairline borders, dividers */ --color-line-strong: #D4B896; /* slightly more present border, e.g. focus outline base */ /* Accent (primary) — richer terracotta/rust, replaces v1's umber. Same role as before (links, primary CTA, focus rings) — the VALUE changed, the JOB didn't. Any component already using --color-accent inherits the new tone automatically. */ --color-accent: #290924 ; /* terracotta / rust — primary accent */ /* hover / active state of accent */ --color-accent-tint: #F3DCD0; /* accent at low opacity equivalent — subtle backgrounds/badges */ /* Accent (secondary) — plum, as a foreground/emphasis color (distinct from --color-plum above, which is a BACKGROUND). Use for emphasis text or small marks on paper backgrounds. */ --color-accent-plum: #3B2138; --color-accent-plum-deep: #2A1727; /* Accent (tertiary) — muted gold. RARE by design: premium highlight marks only (e.g. a single divider, a small icon stroke, a pull-quote mark). If gold starts appearing more than once or twice per page, that's a signal it's being overused, not a signal to add more gold tokens. ⚠️ ACCESSIBILITY: --color-gold measures ~2.6:1 on --color-paper — FAILS WCAG AA even for large text. Use it ONLY for non-text decorative marks (dividers, icon strokes, borders), never for text color. If gold text is genuinely needed, use --color-gold-deep (~4.0:1 — passes AA for large text ≥24px/19px-bold only, still not for body-size text). */ --color-gold: #B8935A; --color-gold-deep: #96733E; --color-gold-tint: #F0E4CE; /* Feedback — used only where functionally necessary (form errors etc.), desaturated to stay in the site's emotional register; never alarming */ --color-success: #5C6B4F; --color-error: #8C4A3B; /* Overlay */ --color-overlay: rgba(42, 36, 32, 0.45); /* modal/menu scrims — built from --color-ink */ /* ------------------------------------------------------------------ */ /* 2. TYPOGRAPHY */ /* ------------------------------------------------------------------ */ /* Three roles, deliberately not interchangeable: --font-display : headlines, section titles — carries emotion --font-body : paragraph copy — optimized for long-form reading --font-ui : nav, buttons, labels, captions, form chrome Fallback stacks are chosen to degrade gracefully in the same emotional register if the webfont fails to load. */ --font-display: 'Fraunces', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif; --font-body: 'Literata', 'Iowan Old Style', Georgia, 'Times New Roman', serif; --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* Type scale — base 18px, ~1.25 (major third) ratio. Base is larger than typical web default (16px) because this is a reading-first site; body copy should never feel like an afterthought. */ --text-xs: 0.75rem; /* 12px — captions, meta */ --text-sm: 0.889rem; /* 16px — small UI text */ --text-base: 1rem; /* 18px — body copy (root font-size set to 18px in base.css) */ --text-md: 1.25rem; /* 22.5px — lead paragraphs, pull quotes */ --text-lg: 1.563rem; /* 28px — small headings (h4) */ --text-xl: 1.953rem; /* 35px — h3 */ --text-2xl: 2.441rem; /* 44px — h2 */ --text-3xl: 3.052rem; /* 55px — h1 (mobile) */ --text-4xl: 3.815rem; /* 69px — h1 (desktop) */ --text-5xl: 4.768rem; /* 86px — hero display, used rarely */ /* Line height — generous, in service of "effortless reading" */ --leading-tight: 1.15; /* display headlines */ --leading-snug: 1.35; /* small headings */ --leading-normal: 1.6; /* body copy */ --leading-loose: 1.8; /* lead paragraphs, pull quotes */ /* Letter spacing */ --tracking-tight: -0.02em; /* large display type */ --tracking-normal: 0; --tracking-wide: 0.04em; /* small caps / eyebrows / UI labels */ /* Font weight */ --weight-regular: 400; --weight-medium: 500; --weight-semibold:600; /* ------------------------------------------------------------------ */ /* 3. SPACING */ /* ------------------------------------------------------------------ */ /* 8px base unit. Named, not numbered-only, so intent reads in markup (e.g. "space-section" vs just "space-12"). Whitespace is structural here, not incidental — treat these as load-bearing. */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.5rem; /* 24px */ --space-6: 2rem; /* 32px */ --space-7: 3rem; /* 48px */ --space-8: 4rem; /* 64px */ --space-9: 6rem; /* 96px */ --space-10: 8rem; /* 128px */ --space-11: 10rem; /* 160px */ /* Semantic aliases — use these in components/layout where possible */ --space-section-y: var(--space-10); /* vertical rhythm between major sections */ --space-section-y-sm: var(--space-8); /* tighter section spacing, mobile */ --space-content-gap: var(--space-5); /* gap between related content blocks */ --space-inline-gap: var(--space-3); /* gap between inline elements, e.g. nav items */ /* ------------------------------------------------------------------ */ /* 4. RADIUS */ /* ------------------------------------------------------------------ */ /* Deliberately restrained — this is a "paper" aesthetic, not a bubbly app UI. Radius is barely perceptible except on cards. */ --radius-none: 0; --radius-sm: 2px; /* inputs, small tags */ --radius-md: 4px; /* small UI chrome */ --radius-lg: 6px; /* cards, larger surfaces */ --radius-xl: 14px; /* v2: image frames, feature panels — new, larger surfaces wanting a softer premium edge */ --radius-button: 10px; /* v2: buttons — softly rounded, deliberately NOT --radius-full (pill). Per project direction: rounded, not pill-shaped. */ --radius-full: 999px; /* pills, avatar-style shapes only if ever needed — NOT used for buttons in v2 */ /* ------------------------------------------------------------------ */ /* 5. SHADOW */ /* ------------------------------------------------------------------ */ /* Minimal elevation system — a card should feel like a sheet of paper lifted slightly off the table, not a floating digital panel. Built from --color-ink so shadows stay warm, never cool/blue-grey. */ --shadow-sm: 0 1px 2px rgba(42, 36, 32, 0.06); --shadow-md: 0 4px 16px rgba(42, 36, 32, 0.08); --shadow-lg: 0 12px 32px rgba(42, 36, 32, 0.10); --shadow-nav: 0 6px 18px rgba(59, 33, 56, 0.15); /* v2.1 — Tantra threshold treatment: deeper than --shadow-lg, still warm/ink-based */ --shadow-threshold: 0 20px 50px rgba(42, 36, 32, 0.22); /* Accent-tinted glow — new in v2. A warmer, richer hover state for cards/images that want to feel premium rather than just "elevated." Built from --color-accent, not neutral ink — use where richness is wanted; --shadow-md/lg remain the default, quieter option. */ --shadow-accent-glow: 0 12px 28px rgba(181, 82, 46, 0.16); /* ------------------------------------------------------------------ */ /* 5.5. GRADIENTS (v2 — new) */ /* ------------------------------------------------------------------ */ /* Scope, by explicit project decision: hero backgrounds and photo overlays ONLY. Interactive elements (buttons, cards) use SOLID fills — gradients on clickable things read as "trying too hard" and were specifically ruled out. Do not apply these to .btn. */ --gradient-hero-warm: linear-gradient(135deg, var(--color-paper) 0%, var(--color-accent-tint) 45%, var(--color-blush-deep) 100%); /* Bottom-darken overlay for text-on-photo legibility — plum-tinted rather than neutral black, to stay in the site's warm/rich register even where an image needs a dark scrim. */ --gradient-overlay-warm: linear-gradient(180deg, rgba(59, 33, 56, 0) 0%, rgba(59, 33, 56, 0.55) 100%); --gradient-plum-deep: linear-gradient(160deg, var(--color-plum) 0%, var(--color-plum-deep) 100%); /* ------------------------------------------------------------------ */ /* 6. MOTION */ /* ------------------------------------------------------------------ */ /* Philosophy (Visual Constitution, Design Language): motion should "almost disappear" and "reward attention, not ask for it." Durations skew slightly longer than typical UI defaults, and easing avoids sharp/bouncy curves in favor of soft deceleration. */ --duration-fast: 150ms; /* micro-interactions: hover, focus */ --duration-base: 350ms; /* default transitions */ --duration-slow: 600ms; /* scroll-reveals, larger state changes */ --duration-ambient:1200ms; /* rare, ambient/embient motion only */ --ease-soft: cubic-bezier(0.25, 0.1, 0.25, 1); /* general default, gentle deceleration */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* reveals — decelerates smoothly, no overshoot */ --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1); /* state toggles (menu open/close) */ /* Standard composed transitions, for consistency across components */ --transition-color: color var(--duration-fast) var(--ease-soft), background-color var(--duration-fast) var(--ease-soft), border-color var(--duration-fast) var(--ease-soft); --transition-transform: transform var(--duration-base) var(--ease-out); --transition-opacity: opacity var(--duration-base) var(--ease-soft); /* ------------------------------------------------------------------ */ /* 7. Z-INDEX */ /* ------------------------------------------------------------------ */ /* A small, explicit scale prevents "z-index: 9999" arms races later. */ --z-base: 0; --z-raised: 10; /* cards with hover elevation */ --z-sticky: 100; /* sticky header/nav */ --z-overlay: 200; /* menu scrims, dropdowns */ --z-modal: 300; /* dialogs */ --z-toast: 400; /* highest — transient notices */ /* ------------------------------------------------------------------ */ /* 8. CONTAINER WIDTHS & BREAKPOINTS */ /* ------------------------------------------------------------------ */ /* Reading column is deliberately narrow — this is prose, not a dashboard. Wide container exists for section backgrounds / imagery only, and should rarely contain full-width text. */ --container-reading: 42rem; /* ~672px — long-form body copy, ~65-75ch at base size */ --container-narrow: 36rem; /* ~576px — forms, focused single-column content */ --container-content: 64rem; /* ~1024px — standard section content width */ --container-wide: 80rem; /* ~1280px — full section backgrounds, wide layouts */ --container-gutter: var(--space-5); /* default horizontal page padding, mobile */ --container-gutter-lg: var(--space-7); /* horizontal page padding, desktop */ } /* Breakpoints are used as SCSS-like reference values in comments since raw CSS cannot store them as usable variables inside @media queries. Keep this list authoritative — every @media query in the codebase should use one of these exact values. --bp-sm: 480px (large phones) --bp-md: 768px (tablets) --bp-lg: 1024px (small laptops) --bp-xl: 1280px (desktop) --bp-2xl: 1440px (wide desktop) */