/* ══════════════════════════════════════════════════════════════════════════ AI Chat Console — Design Tokens Single source of truth for ALL theming. Load BEFORE app.css on every page: tokens.css → app.css → ui.css → page css Two orthogonal theme axes, both data-attributes on : data-theme = light | dark | oled data-color-theme = 14 accent themes (bottom of this file), each of which only sets --primary-h/s/l — every other accent token derives from those three vars automatically. ══════════════════════════════════════════════════════════════════════════ */ :root { /* ── Accent engine ── default blue; per-theme rules below override h/s/l */ --primary-h: 221; --primary-s: 83%; --primary-l: 53%; --primary: hsl(var(--primary-h), var(--primary-s), var(--primary-l)); --primary-hover: hsl(var(--primary-h), var(--primary-s), calc(var(--primary-l) - 10%)); --primary-light: hsl(var(--primary-h), var(--primary-s), 95%); --on-accent: #ffffff; /* Derived accent scale (light → dark) */ --accent-050: hsl(var(--primary-h) var(--primary-s) 97%); --accent-100: hsl(var(--primary-h) var(--primary-s) 93%); --accent-200: hsl(var(--primary-h) var(--primary-s) 86%); --accent-300: hsl(var(--primary-h) var(--primary-s) 74%); --accent-400: hsl(var(--primary-h) var(--primary-s) 62%); --accent-500: hsl(var(--primary-h) var(--primary-s) var(--primary-l)); --accent-600: hsl(var(--primary-h) var(--primary-s) calc(var(--primary-l) - 8%)); --accent-700: hsl(var(--primary-h) var(--primary-s) calc(var(--primary-l) - 16%)); --accent-900: hsl(var(--primary-h) var(--primary-s) 18%); /* Alpha washes — hover fills, focus rings, tints */ --accent-soft: hsl(var(--primary-h) var(--primary-s) var(--primary-l) / .12); --accent-softer: hsl(var(--primary-h) var(--primary-s) var(--primary-l) / .07); --accent-ring: hsl(var(--primary-h) var(--primary-s) var(--primary-l) / .35); /* ── Gradients (the glamour layer) ── */ /* Same-hue (monochromatic) gradients — a lighter-to-deeper shade of the chosen accent, not a hue shift, so "blue" stays blue instead of drifting toward purple/violet. Vertical (180deg), NOT diagonal: on a wide pill button a diagonal makes the left edge visibly lighter than the right, which reads as uneven/dirty. Top-lit vertical matches how real light falls and stays uniform across the button's width. The range is kept tight (~10% lightness, centred on --primary-l) so it reads as ONE clean colour with a hint of depth rather than a two-tone fade. */ --grad-brand: linear-gradient(180deg, hsl(var(--primary-h) 88% 58%), hsl(var(--primary-h) 90% 48%)); --grad-brand-subtle: linear-gradient(180deg, hsl(var(--primary-h) 88% 58% / .14), hsl(var(--primary-h) 90% 48% / .10)); /* Cool-side shifts (toward cyan/teal) rather than warm-side (toward purple/magenta) — keeps a blue accent reading as blue→teal, not blue→violet. */ --grad-text: linear-gradient(100deg, hsl(var(--primary-h) 80% 45%), hsl(calc(var(--primary-h) - 45) 75% 48%)); --grad-hero: radial-gradient(at 12% 8%, hsl(var(--primary-h) 90% 62% / .20) 0px, transparent 50%), radial-gradient(at 88% 12%, hsl(calc(var(--primary-h) - 45) 85% 60% / .16) 0px, transparent 50%), radial-gradient(at 50% 95%, hsl(calc(var(--primary-h) - 80) 80% 58% / .13) 0px, transparent 55%); /* ── Canvas & surfaces ── */ --bg: hsl(var(--primary-h), 18%, 96%); --surface: hsl(var(--primary-h), 12%, 100%); --surface-2: hsl(var(--primary-h), 16%, 98%); --surface-3: hsl(var(--primary-h), 14%, 100%); --surface-hover: hsl(var(--primary-h), 16%, 94%); --border: hsl(var(--primary-h), 24%, 88%); --border-strong: hsl(var(--primary-h), 20%, 80%); /* Mobile top bar — kept in sync with ui_theme_color() in includes/functions.php, which emits this same colour as so the phone's browser chrome blends into the bar instead of sitting above it as a contrasting band. Hue-only derivation on both sides = no drift. */ --topbar-bg: hsl(var(--primary-h) 45% 95%); /* Mesh: accent-hued radial glows painted on */ --bg-mesh: radial-gradient(at 0% 0%, hsl(var(--primary-h) var(--primary-s) 60% / .06) 0px, transparent 55%), radial-gradient(at 100% 100%, hsl(var(--primary-h) var(--primary-s) 60% / .05) 0px, transparent 55%); /* Glass */ --surface-glass: hsl(var(--primary-h) 20% 100% / .70); --border-glass: hsl(var(--primary-h) 20% 80% / .45); --glass-blur: 14px; --glass-saturate: 160%; /* ── Text ── */ --text: #1e293b; --text-strong: #0f172a; --muted: #64748b; --muted-2: #94a3b8; /* ── Status ── */ --success: #059669; --success-soft: rgba(5,150,105,.12); --warning: #d97706; --warning-soft: rgba(217,119,6,.12); --danger: #ef4444; --danger-soft: rgba(239,68,68,.12); --info: #0284c7; --info-soft: rgba(2,132,199,.12); /* ── Code ── */ --code-bg: #1e1e2e; --code-text: #cdd6f4; /* ── Radius scale ── */ --r-xs: 6px; --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-full: 999px; --radius: var(--r-sm); /* legacy alias */ /* ── Elevation scale (soft, slightly accent-tinted) ── */ --shadow-1: 0 1px 3px rgba(15,23,42,.07); --shadow-2: 0 4px 14px rgba(15,23,42,.08); --shadow-3: 0 10px 32px rgba(15,23,42,.10); --shadow-4: 0 24px 64px rgba(15,23,42,.14); --shadow-accent: 0 8px 24px hsl(var(--primary-h) var(--primary-s) var(--primary-l) / .25); --shadow-sm: var(--shadow-1); /* legacy alias */ --shadow: var(--shadow-2); /* legacy alias */ /* ── Spacing scale ── */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; /* ── Typography ── */ --font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --fs-xs: .75rem; --fs-sm: .84rem; --fs-base: .95rem; --fs-md: 1.05rem; --fs-lg: 1.25rem; --fs-xl: 1.6rem; --fs-2xl: 2rem; --fs-3xl: 2.6rem; --fs-hero: clamp(2.2rem, 5vw, 3.6rem); --lh-tight: 1.2; --lh-normal: 1.6; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* ── Motion ── */ --ease-out: cubic-bezier(.16, 1, .3, 1); --ease-spring: cubic-bezier(.34, 1.56, .64, 1); --t-fast: 120ms; --t-base: 200ms; --t-slow: 350ms; } /* ── Dark mode ─────────────────────────────────────────────────────────── */ [data-theme="dark"] { --primary-light: hsl(var(--primary-h), var(--primary-s), 15%); --bg: hsl(var(--primary-h), 18%, 10%); --surface: hsl(var(--primary-h), 14%, 14%); --surface-2: hsl(var(--primary-h), 15%, 17%); --surface-3: hsl(var(--primary-h), 14%, 19%); --surface-hover: hsl(var(--primary-h), 14%, 20%); --topbar-bg: hsl(var(--primary-h) 16% 15%); --border: hsl(var(--primary-h), 12%, 26%); --border-strong: hsl(var(--primary-h), 12%, 34%); --text: #e2e8f0; --text-strong: #f8fafc; --muted: #94a3b8; --muted-2: #64748b; --accent-soft: hsl(var(--primary-h) var(--primary-s) 60% / .16); --accent-softer: hsl(var(--primary-h) var(--primary-s) 60% / .09); --accent-ring: hsl(var(--primary-h) var(--primary-s) 60% / .45); --grad-text: linear-gradient(100deg, hsl(var(--primary-h) 85% 68%), hsl(calc(var(--primary-h) + 55) 80% 70%)); --bg-mesh: radial-gradient(at 0% 0%, hsl(var(--primary-h) var(--primary-s) 55% / .10) 0px, transparent 55%), radial-gradient(at 100% 0%, hsl(var(--primary-h) var(--primary-s) 55% / .06) 0px, transparent 55%); --surface-glass: hsl(var(--primary-h) 18% 12% / .70); --border-glass: hsl(var(--primary-h) 14% 30% / .55); --shadow-1: 0 1px 3px rgba(0,0,0,.35); --shadow-2: 0 4px 14px rgba(0,0,0,.40); --shadow-3: 0 10px 32px rgba(0,0,0,.45); --shadow-4: 0 24px 64px rgba(0,0,0,.55); } /* ── OLED mode ─────────────────────────────────────────────────────────── */ [data-theme="oled"] { --primary-light: hsl(var(--primary-h), var(--primary-s), 12%); --bg: #000000; --bg-mesh: none; --surface: #0a0a0a; --surface-2: #101010; --surface-3: #141414; --surface-hover: #1a1a1a; --topbar-bg: #0a0a0a; /* Blur over pure black looks muddy — keep glass near-opaque on OLED */ --surface-glass: rgba(10, 10, 10, 0.92); --border: hsl(var(--primary-h) 20% 15% / 0.8); --border-strong: hsl(var(--primary-h) 20% 25% / 0.9); --border-glass: rgba(38, 38, 38, 0.55); --glass-blur: 6px; --text: #f8fafc; --text-strong: #ffffff; --muted: #71717a; --muted-2: #52525b; --accent-soft: hsl(var(--primary-h) var(--primary-s) 60% / .16); --accent-softer: hsl(var(--primary-h) var(--primary-s) 60% / .09); --accent-ring: hsl(var(--primary-h) var(--primary-s) 60% / .45); /* Cool-side shift (toward cyan/teal), matching light/dark's --grad-text — this block still had the old +55 (purple/magenta) shift, which is why the "What can I help with?" greeting looked a different, off hue in OLED mode. */ --grad-text: linear-gradient(100deg, hsl(var(--primary-h) 85% 68%), hsl(calc(var(--primary-h) - 45) 80% 70%)); --shadow-1: 0 1px 3px rgba(0,0,0,.6); --shadow-2: 0 4px 14px rgba(0,0,0,.6); --shadow-3: 0 10px 32px rgba(0,0,0,.6); --shadow-4: 0 24px 64px rgba(0,0,0,.7); } /* ── Accent color themes ─────────────────────────────────────────────────── Each theme sets --primary-h/s/l; every derived token above follows automatically. Canvas overrides (Claude cream, Discord dark) stay explicit. Keep keys in sync with ui_color_themes() in PHP. NOTE: prefixed with `html` to raise specificity above :root. */ /* ChatGPT — teal */ html[data-color-theme="chatgpt"] { --primary-h:165; --primary-s:74%; --primary-l:38%; } /* Claude — warm terracotta + cream canvas */ html[data-color-theme="claude"] { --primary-h:16; --primary-s:54%; --primary-l:53%; } html[data-color-theme="claude"]:not([data-theme="dark"]):not([data-theme="oled"]) { --bg:hsl(33,40%,95%); --surface:#ffffff; --border:#e8ded0; } html[data-color-theme="claude"][data-theme="dark"] { --bg:#211c16; --surface:#2b251d; --border:#3a3328; } /* Slack — aubergine */ html[data-color-theme="slack"] { --primary-h:294; --primary-s:55%; --primary-l:27%; } html[data-color-theme="slack"][data-theme="dark"] { --primary-l:52%; } /* Messenger — vivid blue */ html[data-color-theme="messenger"] { --primary-h:209; --primary-s:100%; --primary-l:50%; } /* Facebook — classic blue */ html[data-color-theme="facebook"] { --primary-h:214; --primary-s:89%; --primary-l:52%; } /* Discord — blurple + tinted canvas */ html[data-color-theme="discord"] { --primary-h:235; --primary-s:86%; --primary-l:65%; } html[data-color-theme="discord"]:not([data-theme="dark"]):not([data-theme="oled"]) { --bg:#f2f3f5; } html[data-color-theme="discord"][data-theme="dark"] { --bg:#313338; --surface:#2b2d31; --border:#3f4147; } /* Telegram — sky blue */ html[data-color-theme="telegram"] { --primary-h:200; --primary-s:85%; --primary-l:55%; } /* WhatsApp — green */ html[data-color-theme="whatsapp"] { --primary-h:173; --primary-s:77%; --primary-l:31%; } html[data-color-theme="whatsapp"][data-theme="dark"] { --primary-l:50%; } /* Royal — purple */ html[data-color-theme="royal"] { --primary-h:262; --primary-s:83%; --primary-l:58%; } /* Rose — pink/red */ html[data-color-theme="rose"] { --primary-h:347; --primary-s:77%; --primary-l:50%; } /* Sunset — orange */ html[data-color-theme="sunset"] { --primary-h:25; --primary-s:95%; --primary-l:53%; } /* Forest — green */ html[data-color-theme="forest"] { --primary-h:142; --primary-s:76%; --primary-l:36%; } /* Graphite — slate */ html[data-color-theme="graphite"] { --primary-h:215; --primary-s:19%; --primary-l:35%; } html[data-color-theme="graphite"][data-theme="dark"] { --primary-l:55%; }