/* ============================================================ Today Tabien — Color Tokens Luxury automotive palette: forest green, gold, cream. Theming: semantic tokens resolve per theme. :root / [data-theme="light"] → Light (warm cream) [data-theme="dark"] → Dark (green-black showroom) Components reference ONLY the semantic tokens, so they adapt automatically when the theme attribute flips on . ============================================================ */ :root { /* ---- Base brand palette (theme-independent) ---- */ --forest-green: #0F2419; /* Deep hood green — primary brand */ --emerald: #1D4D3A; /* Lighter green — surfaces, accents */ --rich-gold: #C2A14D; /* Metallic gold — the premium accent */ --burnt-orange: #C75B2A; /* Copper/rally orange — contrast accent to the greens */ --cream: #F2ECE2; /* Warm paper */ --charcoal: #2B2B2B; /* Near-black */ /* ---- Green scale (derived) ---- */ --green-950: #060F0A; --green-900: #081710; --green-850: #0A1C13; --green-800: #0F2419; --green-700: #163524; --green-600: #1D4D3A; --green-500: #2A6B50; --green-400: #3E8A69; --green-300: #6BB394; /* ---- Gold scale (derived) ---- */ --gold-700: #9A7C34; --gold-600: #B08F3F; --gold-500: #C2A14D; --gold-400: #D4B86E; --gold-300: #E6D29B; /* Metallic gold sheen for plates / badges */ --gold-gradient: linear-gradient(135deg, #E6D29B 0%, #C2A14D 38%, #9A7C34 72%, #D4B86E 100%); /* @kind color */ /* ---- Burnt-orange scale (derived) — the green-contrast accent ---- */ --orange-800: #7E3414; --orange-700: #9C411B; --orange-600: #B24E23; --orange-500: #C75B2A; --orange-400: #DD7245; --orange-300: #EC9A75; --orange-200: #F6C7AF; /* ---- Cream / neutral scale ---- */ --cream-50: #FBF8F2; --cream-100: #F2ECE2; --cream-200: #E7DECF; --cream-300: #D8CBB4; --neutral-500: #8C8578; --neutral-700: #54504A; --charcoal-900: #1A1A1A; /* ---- Status (theme-independent hues) ---- */ --status-available: #2A6B50; --status-reserved: #C2A14D; --status-sold: #9B3B2E; --status-info: #2F5D8A; /* ============ SEMANTIC TOKENS — LIGHT (default) ============ */ /* Surfaces */ --surface-page: var(--cream-100); /* default page bg */ --surface-page-alt: var(--cream-50); /* alternating section */ --surface-card: #FFFFFF; /* cards, inputs */ --surface-raised: #FFFFFF; /* popovers, menus */ --surface-sunken: var(--cream-200); /* wells, track */ --surface-dark: var(--forest-green);/* green "showroom" band */ --surface-dark-alt: var(--emerald); /* gradient partner */ /* Plate face (the brand object) */ --plate-face: linear-gradient(180deg, #ffffff 0%, #f4f1ea 100%); /* @kind color */ --plate-ink: var(--forest-green); /* Text */ --text-strong: var(--forest-green); /* headings */ --text-body: var(--charcoal); /* body */ --text-muted: var(--neutral-700); --text-faint: var(--neutral-500); --text-on-dark: var(--cream-100); /* text on green bands */ --text-on-dark-muted: rgba(242,236,226,0.66); --text-gold: var(--rich-gold); /* Borders & lines */ --border-soft: rgba(43,43,43,0.10); --border-strong: rgba(15,36,25,0.22); --border-gold: var(--rich-gold); --border-on-dark: rgba(242,236,226,0.16); --hairline-gold: rgba(194,161,77,0.45); /* Interactive */ --accent: var(--rich-gold); --accent-hover: var(--gold-400); --accent-press: var(--gold-700); --link: var(--emerald); --focus-ring: rgba(194,161,77,0.55); /* Contrast accent (orange) — highlights, sale flags, secondary CTAs */ --contrast: var(--orange-500); --contrast-hover: var(--orange-400); --contrast-press: var(--orange-700); --text-contrast: var(--orange-600); --tint-contrast: rgba(199,91,42,0.12); /* Soft status tints (for badges, against current surface) */ --tint-available: rgba(42,107,80,0.12); --tint-reserved: rgba(194,161,77,0.16); --tint-sold: rgba(155,59,46,0.12); --tint-neutral: var(--cream-200); color-scheme: light; } /* Explicit light scope (mirror of :root) for hosts that always set the attr */ [data-theme="light"] { --surface-page: var(--cream-100); --surface-page-alt: var(--cream-50); --surface-card: #FFFFFF; --surface-raised: #FFFFFF; --surface-sunken: var(--cream-200); --surface-dark: var(--forest-green); --surface-dark-alt: var(--emerald); --plate-face: linear-gradient(180deg, #ffffff 0%, #f4f1ea 100%); /* @kind color */ --plate-ink: var(--forest-green); --text-strong: var(--forest-green); --text-body: var(--charcoal); --text-muted: var(--neutral-700); --text-faint: var(--neutral-500); --text-on-dark: var(--cream-100); --text-on-dark-muted: rgba(242,236,226,0.66); --text-gold: var(--rich-gold); --border-soft: rgba(43,43,43,0.10); --border-strong: rgba(15,36,25,0.22); --border-on-dark: rgba(242,236,226,0.16); --hairline-gold: rgba(194,161,77,0.45); --accent-hover: var(--gold-400); --tint-available: rgba(42,107,80,0.12); --tint-reserved: rgba(194,161,77,0.16); --tint-sold: rgba(155,59,46,0.12); --tint-neutral: var(--cream-200); --contrast: var(--orange-500); --contrast-hover: var(--orange-400); --contrast-press: var(--orange-700); --text-contrast: var(--orange-600); --tint-contrast: rgba(199,91,42,0.12); color-scheme: light; } /* ================== SEMANTIC TOKENS — DARK ================== */ [data-theme="dark"] { /* Surfaces — deep green-black showroom */ --surface-page: var(--green-950); --surface-page-alt: var(--green-900); --surface-card: var(--green-850); --surface-raised: var(--green-800); --surface-sunken: #04100A; --surface-dark: #04100A; /* darkest band */ --surface-dark-alt: var(--green-800); /* Plate face stays bright — the plate is always a physical white object */ --plate-face: linear-gradient(180deg, #ffffff 0%, #f1ede4 100%); /* @kind color */ --plate-ink: var(--forest-green); /* Text — warm cream on dark */ --text-strong: var(--cream-50); --text-body: var(--cream-100); --text-muted: rgba(242,236,226,0.66); --text-faint: rgba(242,236,226,0.42); --text-on-dark: var(--cream-100); --text-on-dark-muted: rgba(242,236,226,0.60); --text-gold: var(--gold-400); /* Borders — light hairlines */ --border-soft: rgba(242,236,226,0.10); --border-strong: rgba(242,236,226,0.22); --border-gold: var(--rich-gold); --border-on-dark: rgba(242,236,226,0.14); --hairline-gold: rgba(194,161,77,0.40); /* Interactive — gold reads slightly brighter on dark */ --accent: var(--rich-gold); --accent-hover: var(--gold-300); --accent-press: var(--gold-600); --link: var(--gold-400); --focus-ring: rgba(212,184,110,0.55); /* Soft status tints tuned for dark surfaces */ --tint-available: rgba(62,138,105,0.22); --tint-reserved: rgba(212,184,110,0.20); --tint-sold: rgba(184,84,70,0.24); --tint-neutral: rgba(242,236,226,0.10); /* Contrast accent — brighter on dark for legibility */ --contrast: var(--orange-400); --contrast-hover: var(--orange-300); --contrast-press: var(--orange-500); --text-contrast: var(--orange-300); --tint-contrast: rgba(221,114,69,0.22); color-scheme: dark; }