/* ============================================================ BOOKSBYAMA — variables.css Single source of truth for all design tokens. Load this FIRST in every page . ============================================================ */ :root { /* ── Brand colours ────────────────────────────────────── */ --color-purple: #635DA9; --color-purple-dark: #4E4890; --color-purple-soft: #F2F1FA; --color-purple-tint: #E2E0F7; --color-gold: #FFC93B; --color-gold-deep: #C99300; --color-green: #51BB79; --color-green-soft: #E8F8EF; --color-coral: #F26B6C; --color-coral-soft: #FDECEC; --color-blue: #65A1D7; --color-blue-soft: #EAF4FB; /* ── Neutral / Semantic ───────────────────────────────── */ --color-bg: #F7F5FF; --color-surface: #FFFFFF; --color-border: #E6E4F2; --color-text: #2D2A4A; --color-muted: #6E6B8E; --color-light: #9B98B5; /* ── Legacy aliases (keep old pages working) ──────────── */ --purple: var(--color-purple); --purple-dark: var(--color-purple-dark); --purple-soft: var(--color-purple-soft); --purple-tint: var(--color-purple-tint); --gold: var(--color-gold); --gold-deep: var(--color-gold-deep); --green: var(--color-green); --green-soft: var(--color-green-soft); --coral: var(--color-coral); --coral-soft: var(--color-coral-soft); --blue: var(--color-blue); --blue-soft: var(--color-blue-soft); --bg: var(--color-bg); --bg-page: var(--color-bg); --bg-surface: var(--color-surface); --surface: var(--color-surface); --border: var(--color-border); --text-primary: var(--color-text); --text-muted: var(--color-muted); --text-light: var(--color-light); /* shorthand alias used across page CSS files */ --transition: var(--transition-base); /* ── Typography ───────────────────────────────────────── */ --font-head: 'Poppins', system-ui, -apple-system, sans-serif; --font-body: 'Inter', system-ui, -apple-system, sans-serif; --font-serif: 'Lora', Georgia, serif; /* Legacy alias used by style.css */ --font-heading: 'Poppins', system-ui, -apple-system, sans-serif; --text-xs: 0.72rem; /* 11.5px */ --text-sm: 0.82rem; /* 13px */ --text-base: 0.95rem; /* 15px */ --text-md: 1rem; /* 16px */ --text-lg: 1.125rem; /* 18px */ --text-xl: 1.25rem; /* 20px */ --text-2xl: 1.5rem; /* 24px */ --text-3xl: 1.875rem; /* 30px */ --text-4xl: 2.25rem; /* 36px */ --text-5xl: 3rem; /* 48px */ --leading-tight: 1.2; --leading-snug: 1.4; --leading-normal: 1.6; --leading-relaxed: 1.75; --leading-loose: 1.85; --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.04em; --tracking-wider: 0.08em; /* ── Spacing scale ────────────────────────────────────── */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; --space-32: 128px; /* ── Legacy spacing aliases ───────────────────────────── */ --space-xs: var(--space-1); --space-sm: var(--space-2); --space-md: var(--space-4); --space-lg: var(--space-6); --space-xl: var(--space-10); --space-2xl: var(--space-16); --space-3xl: var(--space-24); /* ── Border radius ────────────────────────────────────── */ --radius-xs: 4px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 20px; --radius-2xl: 24px; --radius-3xl: 28px; --radius-full: 9999px; /* ── Shadows ──────────────────────────────────────────── */ --shadow-xs: 0 1px 3px rgba(99, 93, 169, 0.06); --shadow-sm: 0 1px 4px rgba(99, 93, 169, 0.08); --shadow-md: 0 4px 20px rgba(99, 93, 169, 0.10); --shadow-lg: 0 8px 32px rgba(99, 93, 169, 0.13); --shadow-xl: 0 16px 48px rgba(99, 93, 169, 0.16); --shadow-2xl: 0 32px 80px rgba(45, 42, 74, 0.20); --shadow-card: 0 2px 20px rgba(99, 93, 169, 0.08); --shadow-float: 0 8px 32px rgba(45, 42, 74, 0.14); --shadow-phone: 0 32px 80px rgba(45, 42, 74, 0.22); /* ── Transitions ──────────────────────────────────────── */ --ease-default: cubic-bezier(0.4, 0, 0.2, 1); --ease-in: cubic-bezier(0.4, 0, 1, 1); --ease-out: cubic-bezier(0, 0, 0.2, 1); --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); --duration-fast: 150ms; --duration-base: 200ms; --duration-slow: 300ms; --duration-slower: 500ms; --transition-base: all var(--duration-base) var(--ease-default); --transition-fast: all var(--duration-fast) var(--ease-default); --transition-slow: all var(--duration-slow) var(--ease-default); --transition-color: color var(--duration-base) var(--ease-default), background-color var(--duration-base) var(--ease-default), border-color var(--duration-base) var(--ease-default); --transition-transform: transform var(--duration-base) var(--ease-default); /* ── Layout ───────────────────────────────────────────── */ --container-max: 1280px; --container-pad: 24px; --header-height: 72px; --section-pad-y: 96px; --section-pad-y-sm: 64px; /* ── Z-index scale ────────────────────────────────────── */ --z-below: -1; --z-base: 0; --z-raised: 10; --z-sticky: 20; --z-overlay: 100; --z-modal: 200; --z-toast: 300; --z-header: 1000; } /* ── Dark mode (optional future toggle) ──────────────────── */ @media (prefers-color-scheme: dark) { /* Reserved — BooksByAma is light-only for now */ } /* ── Reduced motion ──────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { :root { --duration-fast: 0ms; --duration-base: 0ms; --duration-slow: 0ms; --duration-slower: 0ms; } }