/* * ═══════════════════════════════════════════════════════════════════ * DIJITALBUM DESIGN TOKENS — theme.css * * Single source of truth for brand colours, typography, spacing * and shadows. Link this file in any HTML page or @import it in * any stylesheet to get the full token set. * * Note: Google Fonts (Nunito + Playfair Display) must be loaded * separately via tags in your HTML . * ═══════════════════════════════════════════════════════════════════ */ :root { /* ── Colours ──────────────────────────────────────────────────── */ --rose: #D4847A; --rose-dark: #B85F54; --rose-light: #E8A89F; --rose-muted: rgba(212,132,122,0.09); --green: #6BAE8A; --green-bg: #EDF7F2; --cream: #FDF6F0; --cream-d: #F7EDE5; --blush: #FAE8E6; --white: #FFFCFA; --text: #3D2B26; --text-mid: #7A574F; --text-soft: #B8958F; --border: rgba(212,132,122,0.18); --border-m: rgba(212,132,122,0.28); /* ── Typography ──────────────────────────────────────────────── */ --font-sans: "Nunito", -apple-system, BlinkMacSystemFont, sans-serif; --font-serif: "Playfair Display", Georgia, serif; --font-heading: "Playfair Display", Georgia, serif; --font-body: "Nunito", -apple-system, BlinkMacSystemFont, sans-serif; /* ── Radius ──────────────────────────────────────────────────── */ --radius-sm: 12px; --radius-md: 16px; --radius-lg: 22px; --radius-xl: 28px; --radius-pill: 100px; --radius: 22px; /* alias → --radius-lg */ /* ── Shadows ─────────────────────────────────────────────────── */ --shadow-soft: 0 4px 20px rgba(61,43,38,0.06); --shadow-card: 0 3px 14px rgba(61,43,38,0.05); --shadow-cta: 0 8px 28px rgba(212,132,122,0.42); --shadow-modal: 0 24px 60px rgba(61,43,38,0.2); /* Aliases — kept for backward-compatibility with existing components */ --shadow-sm: 0 3px 14px rgba(61,43,38,0.05); /* → --shadow-card */ --shadow-md: 0 4px 20px rgba(61,43,38,0.06); /* → --shadow-soft */ --shadow-lg: 0 24px 60px rgba(61,43,38,0.2); /* → --shadow-modal */ /* ── Gradients ───────────────────────────────────────────────── */ --grad-hero: linear-gradient(160deg,#FAE8E6 0%,#FDF6F0 65%); --grad-cta: linear-gradient(160deg,#FAE8E6 0%,#FDF6F0 60%); --grad-dark: linear-gradient(135deg,#3D2B26 0%,#5a3530 100%); --grad-blossom: linear-gradient(135deg,#f9c5d1,#e8879a,#c96080); --grad-ivory: linear-gradient(135deg,#f0ebe0,#e0d0b8,#c8b898); --grad-sage: linear-gradient(135deg,#c8d8c0,#a0b898,#7a9870); --grad-midnight: linear-gradient(135deg,#3a3050,#5a4878,#7a6098); /* ── Legacy aliases ──────────────────────────────────────────── */ /* These allow older app pages and landing-enhancements.js to keep using their existing variable names without any JS/HTML changes. */ --bg: #FDF6F0; /* → --cream */ --surface: #FFFCFA; /* → --white */ --surface-warm: #F7EDE5; /* → --cream-d */ --primary: #D4847A; /* → --rose */ --primary-color: #D4847A; /* → --rose (styles.css compat) */ --primary-dark: #B85F54; /* → --rose-dark */ --primary-light: #E8A89F; /* → --rose-light */ --primary-muted: rgba(212,132,122,0.09); /* → --rose-muted */ --primary-border: rgba(212,132,122,0.18); /* → --border */ --text-secondary: #7A574F; /* → --text-mid */ --text-muted: #B8958F; /* → --text-soft */ --border-light: #FAE8E6; /* → --blush */ }