/* ════════════════════════════════════════════════════════════════════════
GLEON OS — DESIGN LANGUAGE (gleon-tokens.css)
Version 1.1 (Theme Constitution v1.0: core light-only; dark = Studio-scoped only) · 2026-06-11
The single source of truth for the whole platform. Every page imports this.
THEME CONSTITUTION v1.0 (final)
- GLEON OS CORE (Dashboard, Chat, Memory, Agents, Billing, Analytics,
Settings, Admin, Auth, Legal, Marketing) = LIGHT ONLY. No dark mode. Ever.
- GLEON STUDIO is the ONLY area that may use a dark workspace theme
(Royal Blue or Royal Coffee). Themes are SCOPED to Studio and cannot leak.
- There is NO global / product-wide theme switching.
HOW TO USE
1. ...workspace...
...workspace...
Never put data-studio-theme on or . That is forbidden.
5. Classes are prefixed gl- so this file is SAFE to drop next to existing
page CSS without breaking anything. Migrate pages one at a time.
NOTE: This file does NOT rewire any existing page. It is the foundation.
Rollout is incremental and post-launch.
════════════════════════════════════════════════════════════════════════ */
/* ─── FONTS (load once, here or in ) ─────────────────────────────── */
/* @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap'); */
/* ════════════════════════════════════════════════════════════════════════
THEME TOKENS
Only COLORS change per theme. Everything else (type, spacing, radius,
motion) is theme-independent and defined once under :root.
════════════════════════════════════════════════════════════════════════ */
:root {
/* GLEON OS CORE DEFAULT — light, always */
/* surfaces */
--gl-bg: #F8F9FB; /* app background */
--gl-surface: #FFFFFF; /* cards, panels, sidebar, composer */
--gl-surface-2: #F2F4F7; /* raised fills, hover, input bg */
--gl-surface-3: #E9EDF3; /* pressed / active fills */
/* text */
--gl-text-1: #111111; /* primary */
--gl-text-2: #3A3A3A; /* secondary */
--gl-text-3: #6E6E6E; /* muted / captions */
--gl-text-4: #AEB4BD; /* disabled / placeholder */
--gl-text-on-accent: #FFFFFF;
/* lines */
--gl-border: #E5E7EB;
--gl-border-2: #D6DAE1;
/* brand accent (terracotta) */
--gl-accent: #CC7851;
--gl-accent-hover: #BC6A45;
--gl-accent-soft: rgba(204,120,81,.10);
--gl-accent-ring: rgba(204,120,81,.22);
/* status */
--gl-success: #1A7F37;
--gl-info: #0550AE;
--gl-warn: #9A6700;
--gl-danger: #CF222E;
/* code surfaces */
--gl-code-bg: #F6F8FA;
--gl-code-border: #E5E7EB;
--gl-code-text: #1F2328;
--gl-shadow-card: 0 1px 3px rgba(16,24,40,.06), 0 1px 2px rgba(16,24,40,.04);
--gl-shadow-pop: 0 8px 24px rgba(16,24,40,.12);
--gl-overlay: rgba(17,24,39,.40);
}
/* ─── STUDIO WORKSPACE THEME · ROYAL BLUE (scoped to .gl-studio only) ──── */
.gl-studio[data-studio-theme="royal-blue"] {
--gl-bg: #0B1020;
--gl-surface: #121A2E;
--gl-surface-2: #1A2540;
--gl-surface-3: #233052;
--gl-text-1: #FFFFFF;
--gl-text-2: #C7D0E3;
--gl-text-3: #8A97B5;
--gl-text-4: #59657F;
--gl-text-on-accent: #FFFFFF;
--gl-border: #22304F;
--gl-border-2: #2C3D63;
--gl-accent: #4D7CFE; /* royal blue */
--gl-accent-hover: #6A93FF;
--gl-accent-soft: rgba(77,124,254,.16);
--gl-accent-ring: rgba(77,124,254,.40);
--gl-success: #3FB950;
--gl-info: #4D7CFE;
--gl-warn: #D29922;
--gl-danger: #F85149;
--gl-code-bg: #0D1117;
--gl-code-border: #22304F;
--gl-code-text: #C7D0E3;
--gl-shadow-card: 0 1px 3px rgba(0,0,0,.40);
--gl-shadow-pop: 0 12px 32px rgba(0,0,0,.55);
--gl-overlay: rgba(4,8,20,.62);
}
/* ─── STUDIO WORKSPACE THEME · ROYAL COFFEE (scoped to .gl-studio only) ─ */
.gl-studio[data-studio-theme="royal-coffee"] {
--gl-bg: #1A1410;
--gl-surface: #241B15;
--gl-surface-2: #30241B;
--gl-surface-3: #3D2E22;
--gl-text-1: #FFFFFF;
--gl-text-2: #E4D5C7;
--gl-text-3: #B59E8A;
--gl-text-4: #7C6A5A;
--gl-text-on-accent: #1A1410;
--gl-border: #3A2C20;
--gl-border-2: #4A3829;
--gl-accent: #C9923E; /* warm bronze */
--gl-accent-hover: #DCA64F;
--gl-accent-soft: rgba(201,146,62,.16);
--gl-accent-ring: rgba(201,146,62,.40);
--gl-success: #5FB970;
--gl-info: #C9923E;
--gl-warn: #E0A93E;
--gl-danger: #E5604D;
--gl-code-bg: #14100C;
--gl-code-border: #3A2C20;
--gl-code-text: #E4D5C7;
--gl-shadow-card: 0 1px 3px rgba(0,0,0,.40);
--gl-shadow-pop: 0 12px 32px rgba(0,0,0,.55);
--gl-overlay: rgba(10,7,4,.62);
}
/* ════════════════════════════════════════════════════════════════════════
THEME-INDEPENDENT TOKENS (type, spacing, radius, motion, z)
════════════════════════════════════════════════════════════════════════ */
:root {
/* font families */
--gl-font-ui: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
--gl-font-code: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
/* type scale (locked) */
--gl-fs-h1: 24px;
--gl-fs-h2: 20px;
--gl-fs-h3: 17px;
--gl-fs-body: 16px;
--gl-fs-small: 14px;
--gl-fs-caption: 12px;
--gl-fs-code: 13px;
/* weights */
--gl-fw-regular: 400;
--gl-fw-medium: 500;
--gl-fw-semibold: 600;
--gl-fw-bold: 700;
/* line heights */
--gl-lh-tight: 1.3; /* headings */
--gl-lh-body: 1.7; /* paragraphs */
--gl-lh-code: 1.75;
/* spacing scale — use ONLY these */
--gl-sp-1: 4px;
--gl-sp-2: 8px;
--gl-sp-3: 12px;
--gl-sp-4: 16px;
--gl-sp-5: 24px;
--gl-sp-6: 32px;
--gl-sp-7: 48px;
/* radius */
--gl-r-sm: 8px;
--gl-r-md: 12px;
--gl-r-lg: 16px;
--gl-r-pill: 999px;
/* reading width */
--gl-read-width: 752px;
/* control sizes */
--gl-control-h: 40px; /* desktop button/input height */
--gl-touch-min: 44px; /* mobile minimum tap target */
/* motion */
--gl-ease: cubic-bezier(.4, 0, .2, 1);
--gl-dur-fast: .15s;
--gl-dur: .22s;
--gl-dur-slow: .35s;
/* z-index scale */
--gl-z-base: 1;
--gl-z-sticky: 50;
--gl-z-drawer: 100;
--gl-z-overlay: 200;
--gl-z-toast: 9999;
}
@media (prefers-reduced-motion: reduce) {
:root { --gl-dur-fast: .001ms; --gl-dur: .001ms; --gl-dur-slow: .001ms; }
}
/* ════════════════════════════════════════════════════════════════════════
BASE COMPONENT CLASSES (all prefixed gl- ; all theme-aware)
════════════════════════════════════════════════════════════════════════ */
/* ── Typography helpers ── */
.gl-h1 { font: var(--gl-fw-semibold) var(--gl-fs-h1)/var(--gl-lh-tight) var(--gl-font-ui); color: var(--gl-text-1); letter-spacing: -.01em; }
.gl-h2 { font: var(--gl-fw-semibold) var(--gl-fs-h2)/var(--gl-lh-tight) var(--gl-font-ui); color: var(--gl-text-1); letter-spacing: -.01em; }
.gl-h3 { font: var(--gl-fw-semibold) var(--gl-fs-h3)/var(--gl-lh-tight) var(--gl-font-ui); color: var(--gl-text-1); }
.gl-body { font: var(--gl-fw-regular) var(--gl-fs-body)/var(--gl-lh-body) var(--gl-font-ui); color: var(--gl-text-1); }
.gl-small { font: var(--gl-fw-regular) var(--gl-fs-small)/1.5 var(--gl-font-ui); color: var(--gl-text-2); }
.gl-caption { font: var(--gl-fw-medium) var(--gl-fs-caption)/1.4 var(--gl-font-ui); color: var(--gl-text-3); }
.gl-label { font: var(--gl-fw-semibold) var(--gl-fs-small)/1.2 var(--gl-font-ui); color: var(--gl-text-2); }
/* ── Buttons ── */
.gl-btn {
display: inline-flex; align-items: center; justify-content: center; gap: var(--gl-sp-2);
height: var(--gl-control-h); padding: 0 var(--gl-sp-4);
border: 1px solid transparent; border-radius: var(--gl-r-sm);
font: var(--gl-fw-semibold) var(--gl-fs-small)/1 var(--gl-font-ui);
cursor: pointer; user-select: none; white-space: nowrap;
transition: background var(--gl-dur) var(--gl-ease), border-color var(--gl-dur) var(--gl-ease), transform var(--gl-dur-fast) var(--gl-ease), box-shadow var(--gl-dur) var(--gl-ease);
}
.gl-btn:active { transform: translateY(1px); }
.gl-btn:disabled { opacity: .5; cursor: not-allowed; }
.gl-btn--primary { background: var(--gl-accent); color: var(--gl-text-on-accent); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.gl-btn--primary:hover:not(:disabled) { background: var(--gl-accent-hover); }
.gl-btn--secondary { background: var(--gl-surface); color: var(--gl-text-1); border-color: var(--gl-border); }
.gl-btn--secondary:hover:not(:disabled) { background: var(--gl-surface-2); }
.gl-btn--ghost { background: transparent; color: var(--gl-text-2); }
.gl-btn--ghost:hover:not(:disabled) { background: var(--gl-surface-2); color: var(--gl-text-1); }
.gl-btn--danger { background: var(--gl-danger); color: #fff; }
.gl-btn--danger:hover:not(:disabled) { filter: brightness(1.06); }
/* ── Inputs ── */
.gl-input, .gl-textarea {
width: 100%; height: var(--gl-control-h); padding: 0 var(--gl-sp-3);
background: var(--gl-surface); color: var(--gl-text-1);
border: 1px solid var(--gl-border); border-radius: var(--gl-r-sm);
font: var(--gl-fw-regular) var(--gl-fs-body)/1.4 var(--gl-font-ui);
transition: border-color var(--gl-dur) var(--gl-ease), box-shadow var(--gl-dur) var(--gl-ease);
}
.gl-textarea { height: auto; min-height: 88px; padding: var(--gl-sp-3); resize: vertical; }
.gl-input::placeholder, .gl-textarea::placeholder { color: var(--gl-text-4); }
.gl-input:focus, .gl-textarea:focus { outline: none; border-color: var(--gl-accent); box-shadow: 0 0 0 3px var(--gl-accent-ring); }
.gl-input[aria-invalid="true"] { border-color: var(--gl-danger); box-shadow: 0 0 0 3px rgba(207,34,46,.18); }
/* ── Card ── */
.gl-card { background: var(--gl-surface); border: 1px solid var(--gl-border); border-radius: var(--gl-r-md); box-shadow: var(--gl-shadow-card); padding: var(--gl-sp-5); }
/* ── Badge / pill ── */
.gl-badge { display: inline-flex; align-items: center; gap: var(--gl-sp-1); padding: 2px var(--gl-sp-2); border-radius: var(--gl-r-pill); font: var(--gl-fw-medium) var(--gl-fs-caption)/1.4 var(--gl-font-ui); background: var(--gl-surface-2); color: var(--gl-text-2); }
.gl-badge--accent { background: var(--gl-accent-soft); color: var(--gl-accent); }
/* ── Divider ── */
.gl-divider { height: 1px; background: var(--gl-border); border: 0; margin: var(--gl-sp-4) 0; }
/* ── Focus ring (accessibility floor) ── */
.gl-focusable:focus-visible,
.gl-btn:focus-visible, .gl-input:focus-visible {
outline: 2px solid var(--gl-accent); outline-offset: 2px;
}
/* ── Touch targets on mobile ── */
@media (max-width: 768px) {
.gl-btn, .gl-icon-btn { min-height: var(--gl-touch-min); }
}
/* ── Empty / error state helpers ── */
.gl-empty { text-align: center; padding: var(--gl-sp-7) var(--gl-sp-4); color: var(--gl-text-3); }
.gl-empty__title { font: var(--gl-fw-semibold) var(--gl-fs-h3)/1.3 var(--gl-font-ui); color: var(--gl-text-1); margin-bottom: var(--gl-sp-2); }
.gl-error { padding: var(--gl-sp-3) var(--gl-sp-4); border-radius: var(--gl-r-sm); background: rgba(207,34,46,.06); border: 1px solid rgba(207,34,46,.20); color: var(--gl-danger); font: var(--gl-fw-regular) var(--gl-fs-small)/1.5 var(--gl-font-ui); }