/* ============================================================ COLORS — Spinnerbooth Deep marine navy + warm champagne gold. Elegant, event/wedding. Base scales first, then semantic aliases. ============================================================ */ :root { /* --- Navy / brand blue scale (cool, marine) --- */ --navy-50: #eef2fb; --navy-100: #dbe3f6; --navy-200: #b6c6ec; --navy-300: #889fdd; --navy-400: #5a76cb; --navy-500: #3a55b4; /* primary action */ --navy-600: #2c4196; --navy-700: #243478; --navy-800: #1b2858; --navy-900: #131c3e; /* deep surfaces */ --navy-950: #0a1027; /* ink / darkest */ /* --- Sky accent (luminous, for highlights & focus) --- */ --sky-300: #7cc2ff; --sky-400: #4aa6ff; --sky-500: #1f8bff; /* --- Champagne gold (premium accent) --- */ --gold-200: #f4e6c4; --gold-300: #ecd49b; --gold-400: #e0bd72; --gold-500: #cfa450; /* primary gold */ --gold-600: #b0853a; /* --- Cool neutrals (slightly blue-tinted grays) --- */ --gray-0: #ffffff; --gray-50: #f6f8fc; --gray-100: #eef1f8; --gray-200: #e1e6f0; --gray-300: #ccd3e2; --gray-400: #9aa4bd; --gray-500: #6f7a96; --gray-600: #4e5773; --gray-700: #394164; --gray-800: #232a47; --gray-900: #141a31; /* --- Semantic status --- */ --green-500: #1f9d6b; --green-50: #e6f6ef; --amber-500: #e0a13a; --amber-50: #fbf2df; --red-500: #e0484d; --red-50: #fbe9e9; /* ============================================================ SEMANTIC ALIASES — use these in components ============================================================ */ /* Brand */ --brand: var(--navy-500); --brand-strong: var(--navy-700); --brand-ink: var(--navy-950); --accent: var(--gold-500); --accent-soft: var(--gold-300); --spark: var(--sky-400); /* Surfaces (light theme) */ --surface-page: var(--gray-50); --surface-card: var(--gray-0); --surface-sunken: var(--gray-100); --surface-inverse: var(--navy-950); --surface-overlay: rgba(10, 16, 39, 0.55); /* Text */ --text-strong: var(--navy-950); --text-body: var(--gray-700); --text-muted: var(--gray-500); --text-faint: var(--gray-400); --text-on-brand: #ffffff; --text-on-accent: var(--navy-950); --text-inverse: var(--gray-50); /* Borders & lines */ --border-subtle: var(--gray-200); --border-default: var(--gray-300); --border-strong: var(--gray-400); --border-brand: var(--navy-500); /* Interactive states */ --focus-ring: var(--sky-400); --hover-veil: rgba(10, 16, 39, 0.04); --press-veil: rgba(10, 16, 39, 0.08); /* Status semantic */ --success: var(--green-500); --success-soft: var(--green-50); --warning: var(--amber-500); --warning-soft: var(--amber-50); --danger: var(--red-500); --danger-soft: var(--red-50); } /* ============================================================ DARK GALLERY THEME — photos in focus, navy backdrop, gold/sky accents. Apply with or any [data-theme="dark"] scope. ============================================================ */ [data-theme="dark"] { --surface-page: var(--navy-950); --surface-card: var(--navy-900); --surface-sunken: #0d1430; --surface-inverse: var(--gray-0); --surface-overlay: rgba(4, 7, 20, 0.7); --text-strong: #f3f6ff; --text-body: #c2cbe6; --text-muted: #8b96b8; --text-faint: #5f6a8c; --text-inverse: var(--navy-950); --border-subtle: rgba(255, 255, 255, 0.07); --border-default: rgba(255, 255, 255, 0.12); --border-strong: rgba(255, 255, 255, 0.22); --brand: var(--sky-400); --brand-strong: var(--sky-500); --hover-veil: rgba(255, 255, 255, 0.06); --press-veil: rgba(255, 255, 255, 0.12); }