/* ============================================================ XDress — "Maison Clair" Design Tokens (v3) Light-first warm luxury: gallery-ivory canvas, champagne accents, Didone display serif. Generous type & touch targets so the UI reads effortlessly at arm's length. data-theme / data-accent / data-density on . ============================================================ */ :root { /* Type */ --font-ui: "Helvetica Neue", -apple-system, "Segoe UI", system-ui, Helvetica, Arial, sans-serif; --font-display: "Didot", "Bodoni MT", "Bodoni 72", "Playfair Display", "Cochin", Georgia, "Times New Roman", serif; --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace; --fs-xs: 12px; --fs-sm: 13.5px; --fs-base: 15px; --fs-md: 16px; --fs-lg: 18px; --fs-xl: 22px; --fs-2xl: 32px; /* serif KPI numerals */ --fs-3xl: 42px; /* serif masthead */ --track-label: .10em; --track-wide: .18em; /* Radii — soft, contemporary */ --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 20px; --r-full: 999px; /* Layout */ --sidebar-w: 252px; --sidebar-w-collapsed: 68px; --topbar-h: 64px; /* Motion */ --ease: cubic-bezier(.25, .6, .25, 1); --t-fast: 140ms var(--ease); --t-med: 240ms var(--ease); /* Status — light-canvas defaults (dark overrides below) */ --ok: oklch(0.55 0.12 158); --warn: oklch(0.60 0.13 75); --bad: oklch(0.54 0.17 28); --info: oklch(0.52 0.11 255); /* Categorical palette — for charts, never for status */ --cat-1: var(--accent); --cat-2: oklch(0.52 0.06 260); --cat-3: oklch(0.56 0.09 60); --cat-4: oklch(0.52 0.06 150); } /* ---------------- Density ---------------- */ :root, :root[data-density="comfortable"] { --row-h: 56px; --card-pad: 24px; --ctl-h: 42px; --gap-page: 20px; } :root[data-density="compact"] { --row-h: 46px; --card-pad: 18px; --ctl-h: 36px; --gap-page: 15px; --fs-base: 14px; } /* ---------------- Gallery ivory (the one and only theme) ---------------- */ :root, :root[data-theme="light"] { color-scheme: light; --bg: oklch(0.962 0.007 85); --bg-deep: oklch(0.937 0.009 85); --panel: oklch(0.99 0.004 90); --panel-2: oklch(0.962 0.007 85); --panel-3: oklch(0.93 0.010 85); --border: oklch(0.3 0.04 70 / 0.11); --border-strong: oklch(0.3 0.04 70 / 0.24); --text: oklch(0.255 0.022 60); --text-2: oklch(0.46 0.025 65); --text-3: oklch(0.60 0.022 70); --shadow-1: 0 1px 2px oklch(0.35 0.04 70 / .08); --shadow-2: 0 6px 22px oklch(0.35 0.04 70 / .10); --shadow-3: 0 18px 60px oklch(0.35 0.04 70 / .18); --glass: oklch(0.99 0.004 90 / 0.88); --hover: oklch(0.3 0.05 70 / 0.04); --active: oklch(0.3 0.05 70 / 0.07); --topbar-bg: oklch(0.962 0.007 85 / 0.85); --vignette: radial-gradient(1100px 540px at 78% -12%, oklch(0.75 0.07 85 / 0.13), transparent 62%); --ok: oklch(0.55 0.12 158); --warn: oklch(0.60 0.13 75); --bad: oklch(0.54 0.17 28); --info: oklch(0.52 0.11 255); --cat-2: oklch(0.52 0.06 260); --cat-3: oklch(0.56 0.09 60); --cat-4: oklch(0.52 0.06 150); } /* ---------------- Accents (light-canvas tuned) ---------------- The Theme Studio can also inject fully custom values as inline style properties on , which override everything here. */ :root, :root[data-accent="champagne"] { --accent: oklch(0.58 0.10 80); --accent-strong: oklch(0.50 0.10 78); --on-accent: #fff; --foil: linear-gradient(102deg, #c29b62 0%, #ecd9ad 36%, #b78d52 68%, #e6cd9b 100%); } :root[data-accent="purple"] { --accent: oklch(0.50 0.13 300); --accent-strong: oklch(0.43 0.14 300); --on-accent: #fff; --foil: linear-gradient(102deg, #9d86c9 0%, #d6c8ef 36%, #8a72b8 68%, #cbb9e8 100%); } :root[data-accent="rose"] { --accent: oklch(0.55 0.12 25); --accent-strong: oklch(0.48 0.13 25); --on-accent: #fff; --foil: linear-gradient(102deg, #c98f84 0%, #efd2c9 36%, #b87b6f 68%, #e8c4ba 100%); } :root[data-accent="blue"] { --accent: oklch(0.50 0.12 250); --accent-strong: oklch(0.43 0.13 250); --on-accent: #fff; --foil: linear-gradient(102deg, #7e95bd 0%, #c5d4ec 36%, #6a81ab 68%, #b6c8e6 100%); } :root[data-accent="emerald"] { --accent: oklch(0.52 0.11 165); --accent-strong: oklch(0.44 0.11 165); --on-accent: #fff; --foil: linear-gradient(102deg, #6fa28a 0%, #c2e0d2 36%, #58917a 68%, #aed4c3 100%); } :root[data-accent="burgundy"] { --accent: oklch(0.47 0.13 15); --accent-strong: oklch(0.40 0.13 15); --on-accent: #fff; --foil: linear-gradient(102deg, #a35a60 0%, #dcb3b7 36%, #8c474d 68%, #cf9ea3 100%); } :root { --foil-text-fallback: var(--accent-strong); } /* ---------------- Canvas tones (Theme Studio) ---------------- */ :root[data-canvas="porcelain"] { --bg: oklch(0.974 0.002 250); --bg-deep: oklch(0.954 0.003 250); --panel: oklch(0.997 0.001 250); --panel-2: oklch(0.97 0.002 250); --panel-3: oklch(0.94 0.003 250); } :root[data-canvas="blush"] { --bg: oklch(0.966 0.012 25); --bg-deep: oklch(0.946 0.014 25); --panel: oklch(0.992 0.005 30); --panel-2: oklch(0.962 0.011 25); --panel-3: oklch(0.932 0.014 25); } :root[data-canvas="sage"] { --bg: oklch(0.966 0.010 145); --bg-deep: oklch(0.946 0.012 145); --panel: oklch(0.992 0.004 145); --panel-2: oklch(0.962 0.009 145); --panel-3: oklch(0.932 0.012 145); } :root[data-canvas="mist"] { --bg: oklch(0.964 0.008 245); --bg-deep: oklch(0.944 0.010 245); --panel: oklch(0.992 0.003 245); --panel-2: oklch(0.960 0.007 245); --panel-3: oklch(0.930 0.010 245); } /* ---------------- Text size (Theme Studio) ---------------- */ :root[data-text="large"] { --fs-xs: 13.5px; --fs-sm: 15px; --fs-base: 16.5px; --fs-md: 18px; --fs-lg: 20px; --fs-xl: 24px; --fs-2xl: 36px; --fs-3xl: 46px; --ctl-h: 46px; --row-h: 62px; } /* Derived tints */ :root { --accent-soft: color-mix(in oklab, var(--accent) 13%, transparent); --accent-softer: color-mix(in oklab, var(--accent) 7%, transparent); --accent-line: color-mix(in oklab, var(--accent) 42%, transparent); --ok-soft: color-mix(in oklab, var(--ok) 13%, transparent); --warn-soft: color-mix(in oklab, var(--warn) 14%, transparent); --bad-soft: color-mix(in oklab, var(--bad) 13%, transparent); --info-soft: color-mix(in oklab, var(--info) 13%, transparent); --neutral-soft: color-mix(in oklab, var(--text-3) 14%, transparent); } /* ---------------- Fabric swatches ---------------- */ :root { --fab-champagne: linear-gradient(160deg, #ead7b4 0%, #d3b483 45%, #b3905c 100%); } :root { --fab-ivory: linear-gradient(160deg, #f8f4eb 0%, #e9dfca 50%, #d5c6a8 100%); --fab-blush: linear-gradient(160deg, #f2d7d3 0%, #ddb0ab 50%, #c08c87 100%); --fab-burgundy: linear-gradient(160deg, #8a3a45 0%, #5e2330 50%, #421722 100%); --fab-navy: linear-gradient(160deg, #33405e 0%, #202b46 50%, #141d31 100%); --fab-black: linear-gradient(160deg, #43434a 0%, #26262c 50%, #131316 100%); --fab-sage: linear-gradient(160deg, #c9d2ba 0%, #a4b18e 50%, #82926b 100%); --fab-dustyblue: linear-gradient(160deg, #bccadd 0%, #92a8c2 50%, #708ba8 100%); --fab-charcoal: linear-gradient(160deg, #5d626b 0%, #3e424a 50%, #282b31 100%); --fab-pearl: linear-gradient(160deg, #f1f0f2 0%, #dad8de 50%, #bfbdc6 100%); }