/* ============================================================ * Semantic color roles — theme-aware. USE THESE in designs. * Light values live in :root; dark overrides in [data-theme="dark"]. * Set data-theme="auto" to follow the OS (prefers-color-scheme). * * The system has TWO semantic states (success, danger). There is * deliberately NO dedicated warning color — it doesn't exist in the * source files; use --color-danger or --color-primary instead. * ============================================================ */ @import url("./palette.css"); :root { /* Surfaces & background */ --color-bg: var(--gray-100); /* page background */ --color-surface: var(--white); /* cards, sheets */ --color-surface-subtle: var(--gray-50); /* nested / secondary surface */ --color-surface-sunken: var(--gray-150); /* inputs, wells */ --color-surface-tinted: var(--blue-tint-2);/* cool-tinted card / section bg */ /* Text */ --color-text-primary: var(--gray-1000); --color-text-secondary: var(--gray-650); --color-text-tertiary: var(--gray-550); --color-text-disabled: var(--gray-400); --color-text-on-primary: var(--white); /* Borders & dividers */ --color-border: var(--gray-300); --color-border-subtle: rgba(0, 0, 0, 0.08); --color-divider: rgba(0, 0, 0, 0.06); /* Brand / primary action */ --color-primary: var(--blue-primary); --color-primary-hover: var(--blue-bright); --color-primary-pressed: var(--blue-deep); --color-primary-soft: var(--blue-tint); /* tinted button bg */ --color-primary-subtle: var(--blue-tint-2); /* Semantic states (success + danger only) */ --color-success: var(--green-500); --color-success-soft: var(--green-tint); --color-danger: var(--red-coral); --color-danger-soft: #FFECEC; --color-info: var(--blue-sky); /* informational accent */ /* Partner brand — Nobu Bank card green (integration surfaces only) */ --color-nobu: var(--nobu-green); /* Coupon / warm sub-theme (voucher cards — coupon product only) */ --color-coupon-bg: var(--cream-100); --color-coupon-bg-grad: linear-gradient(135deg, var(--peach-grad-start), var(--peach-grad-end)); --color-coupon-text: var(--brown-900); --color-coupon-accent: var(--brown-700); --color-coupon-amount: var(--red-coral); --color-coupon-status: var(--red-coral); /* "to use" badge */ /* Overlays / scrims (glass + modal) */ --color-scrim: rgba(0, 0, 0, 0.40); /* modal backdrop */ --color-scrim-light: rgba(0, 0, 0, 0.20); --color-glass: rgba(255, 255, 255, 0.88); /* frosted surface */ --color-glass-border: rgba(255, 255, 255, 0.45); } /* ---- Dark theme ---- */ [data-theme="dark"] { --color-bg: var(--gray-1000); --color-surface: var(--gray-900); --color-surface-subtle: #1F1F26; --color-surface-sunken: #15151A; --color-surface-elevated: var(--slate-800); --color-surface-tinted: rgba(120, 162, 252, 0.10); --color-text-primary: rgba(255, 255, 255, 0.88); --color-text-secondary: rgba(255, 255, 255, 0.65); --color-text-tertiary: rgba(255, 255, 255, 0.45); --color-text-disabled: rgba(255, 255, 255, 0.35); --color-border: rgba(255, 255, 255, 0.12); --color-border-subtle: rgba(255, 255, 255, 0.08); --color-divider: rgba(255, 255, 255, 0.08); --color-primary: var(--blue-bright); --color-primary-hover: var(--blue-light); --color-primary-soft: rgba(10, 105, 254, 0.20); --color-primary-subtle: rgba(10, 105, 254, 0.12); --color-success-soft: rgba(20, 199, 100, 0.16); --color-danger-soft: rgba(252, 76, 63, 0.18); --color-coupon-bg: #3A2A1E; --color-coupon-text: var(--peach-300); --color-coupon-accent: var(--peach-300); --color-scrim: rgba(0, 0, 0, 0.65); --color-glass: rgba(38, 38, 38, 0.80); --color-glass-border: rgba(255, 255, 255, 0.12); /* Dark screen backdrop — faint cool bloom over near-black (overrides the light --app-backdrop from gradients.css; wins on higher specificity). */ --app-backdrop: radial-gradient(135% 78% at 10% -10%, rgba(60, 82, 140, 0.42), rgba(60, 82, 140, 0) 52%), radial-gradient(130% 72% at 100% -8%, rgba(92, 72, 132, 0.36), rgba(92, 72, 132, 0) 50%), linear-gradient(180deg, #14161C 0%, #17181D 45%, var(--gray-1000) 72%); } /* ---- OS / automatic dark mode ---- Single [data-*] scope (tokenizable). Set data-theme="auto" on a wrapper (or ) to follow the OS setting; data-theme="dark" forces dark. */ @media (prefers-color-scheme: dark) { [data-theme="auto"] { --color-bg: var(--gray-1000); --color-surface: var(--gray-900); --color-surface-subtle: #1F1F26; --color-surface-sunken: #15151A; --color-surface-elevated: var(--slate-800); --color-surface-tinted: rgba(120, 162, 252, 0.10); --color-text-primary: rgba(255, 255, 255, 0.88); --color-text-secondary: rgba(255, 255, 255, 0.65); --color-text-tertiary: rgba(255, 255, 255, 0.45); --color-text-disabled: rgba(255, 255, 255, 0.35); --color-border: rgba(255, 255, 255, 0.12); --color-border-subtle: rgba(255, 255, 255, 0.08); --color-divider: rgba(255, 255, 255, 0.08); --color-primary: var(--blue-bright); --color-primary-hover: var(--blue-light); --color-primary-soft: rgba(10, 105, 254, 0.20); --color-primary-subtle: rgba(10, 105, 254, 0.12); --color-success-soft: rgba(20, 199, 100, 0.16); --color-danger-soft: rgba(252, 76, 63, 0.18); --color-coupon-bg: #3A2A1E; --color-coupon-text: var(--peach-300); --color-coupon-accent: var(--peach-300); --color-scrim: rgba(0, 0, 0, 0.65); --color-glass: rgba(38, 38, 38, 0.80); --color-glass-border: rgba(255, 255, 255, 0.12); --app-backdrop: radial-gradient(135% 78% at 10% -10%, rgba(60, 82, 140, 0.42), rgba(60, 82, 140, 0) 52%), radial-gradient(130% 72% at 100% -8%, rgba(92, 72, 132, 0.36), rgba(92, 72, 132, 0) 50%), linear-gradient(180deg, #14161C 0%, #17181D 45%, var(--gray-1000) 72%); } }