/* ========================================================================== TOKENS — Custom Art Framing, Inc. Single source of truth. Re-theme the entire site from this file. Palette sampled directly from the logo: · plaque black #231F20 -> --ink family · ampersand gold #CDBF48 -> --gilt family All text pairings verified >= 4.5:1 (WCAG AA). ========================================================================== */ :root { /* ---- Core palette ---------------------------------------------------- */ --ink-900: #0E0D10; /* deepest chapter background */ --ink: #1A1719; /* logo black, dark sections */ --ink-700: #2A262A; /* raised dark surfaces */ --bone: #F6F2EA; /* page background — warm, never pure white */ --bone-200: #EFEADF; /* alternating band */ --linen: #E8E0D0; /* mat-board surfaces, card fills */ --paper: #FFFDF9; /* elevated card on bone */ --gilt: #CDBF48; /* logo ampersand — decor + text ON DARK ONLY */ --gilt-soft: #E3D97F; /* highlight edge of gilt gradients */ --brass: #A38F2E; /* mid-tone, gradient partner */ --gilt-deep: #6E6519; /* accent TEXT on light (5.33:1 on bone) */ --slate: #33313A; /* body text on light (11.45:1 on bone) */ --mist: #6F6B63; /* muted/meta on light (4.78:1 on bone) */ --mist-dark: #A9A49A; /* muted on ink (7.1:1 on ink) */ --rose: #A8442B; /* signal: badges, sale flags (5.31:1 on bone) */ --rose-soft: #C9705A; /* rose on dark backgrounds */ --green: #2F6B4F; /* open-now / success */ --whatsapp: #25D366; --line: rgba(26, 23, 25, 0.12); /* hairline on light */ --line-strong: rgba(26, 23, 25, 0.22); --line-dark: rgba(205, 191, 72, 0.20); /* hairline on ink */ /* ---- Semantic aliases ------------------------------------------------ */ --bg: var(--bone); --surface: var(--paper); --text: var(--slate); --text-muted: var(--mist); --accent: var(--gilt); --accent-text: var(--gilt-deep); /* ---- Gradients ------------------------------------------------------- */ --grad-gilt: linear-gradient(100deg, var(--brass) 0%, var(--gilt) 38%, var(--gilt-soft) 52%, var(--gilt) 66%, var(--brass) 100%); --grad-ink: linear-gradient(165deg, var(--ink) 0%, var(--ink-900) 100%); --grad-sheen: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.28) 46%, rgba(255,255,255,.06) 54%, transparent 70%); --grad-fade: linear-gradient(180deg, rgba(246,242,234,0) 0%, var(--bone) 82%); /* ---- Typography ------------------------------------------------------ */ --font-display: "Playfair Display", "Iowan Old Style", Georgia, serif; --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --fs-eyebrow: 0.75rem; --fs-xs: 0.8125rem; --fs-sm: 0.9375rem; --fs-base: clamp(1rem, 0.35vw + 0.92rem, 1.0625rem); --fs-lg: clamp(1.125rem, 0.6vw + 1rem, 1.3125rem); --fs-h4: clamp(1.15rem, 0.7vw + 1rem, 1.4rem); --fs-h3: clamp(1.4rem, 1.1vw + 1.1rem, 1.95rem); --fs-h2: clamp(2rem, 3vw + 1.1rem, 3.4rem); --fs-h1: clamp(2.6rem, 5.4vw + 0.6rem, 5.25rem); --fs-display: clamp(3rem, 8vw + 0.5rem, 7.5rem); --lh-tight: 1.06; --lh-heading: 1.14; --lh-body: 1.72; --tracking-eyebrow: 0.2em; --measure: 68ch; /* ---- Spacing (8px scale) -------------------------------------------- */ --sp-1: 8px; --sp-2: 16px; --sp-3: 24px; --sp-4: 32px; --sp-5: 40px; --sp-6: 56px; --sp-7: 72px; --sp-8: 104px; --sp-9: 136px; --sp-10: 168px; --section-y: clamp(76px, 9.5vw, 152px); --gutter: clamp(20px, 4vw, 48px); --container: 1320px; --container-narrow: 880px; /* ---- Radii ----------------------------------------------------------- */ --r-frame: 2px; /* frames stay sharp — gallery-correct */ --r-sm: 6px; --r-md: 12px; --r-lg: 18px; --r-xl: 26px; --r-pill: 999px; /* ---- Elevation — always multi-layer --------------------------------- */ --shadow-sm: 0 1px 2px rgba(14,13,16,.05), 0 2px 6px rgba(14,13,16,.05); --shadow-md: 0 1px 2px rgba(14,13,16,.04), 0 4px 10px rgba(14,13,16,.06), 0 12px 24px rgba(14,13,16,.06); --shadow-frame: 0 1px 2px rgba(14,13,16,.05), 0 4px 10px rgba(14,13,16,.06), 0 16px 32px rgba(14,13,16,.08), 0 40px 80px rgba(14,13,16,.10), inset 0 1px 0 rgba(255,255,255,.55); --shadow-lift: 0 2px 4px rgba(14,13,16,.06), 0 8px 18px rgba(14,13,16,.08), 0 28px 52px rgba(14,13,16,.12), 0 60px 110px rgba(14,13,16,.14), inset 0 1px 0 rgba(255,255,255,.6); --shadow-gilt: 0 2px 8px rgba(163,143,46,.22), 0 10px 28px rgba(163,143,46,.20); /* ---- Glass ----------------------------------------------------------- */ --glass-bg: rgba(246, 242, 234, .78); --glass-border: rgba(255, 255, 255, .62); --glass-blur: blur(22px) saturate(1.35); --glass-bg-dark: rgba(20, 18, 21, .62); --glass-border-dark: rgba(205, 191, 72, .22); /* ---- Motion ---------------------------------------------------------- */ --ease-out: cubic-bezier(.16, 1, .3, 1); --ease-inout: cubic-bezier(.65, 0, .35, 1); --ease-back: cubic-bezier(.34, 1.56, .64, 1); --t-fast: 180ms; --t-base: 260ms; --t-slow: 420ms; --t-reveal: 700ms; --t-image: 800ms; /* ---- Z-index scale --------------------------------------------------- */ --z-base: 1; --z-raised: 5; --z-sticky: 10; --z-header: 20; --z-mobilebar:30; --z-menu: 300; --z-modal: 999; --z-toast: 9999; /* ---- Layout helpers -------------------------------------------------- */ --header-h: 76px; --topbar-h: 40px; } /* Dark chapters flip the semantic aliases for anything nested inside. */ .on-ink { --bg: var(--ink); --surface: var(--ink-700); --text: #EFEBE2; --text-muted: var(--mist-dark); --accent-text: var(--gilt); --line: var(--line-dark); --line-strong: rgba(205, 191, 72, .34); --glass-bg: var(--glass-bg-dark); --glass-border:var(--glass-border-dark); }