/* ============================================================ theme.css — Gold Standard: Design Tokens & Theme Variables Project: DataOrbix / Elment Hub Architecture: Load Order → theme.css → main.css → app-components.css Rule: DESIGN TOKENS ONLY. Zero layout, positioning, or component rules here. ============================================================ */ /* ── Google Fonts ─────────────────────────────────────────── */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap'); /* ============================================================ §1 ROOT — MASTER DARK THEME (Default Baseline) Pure monochromatic. Depth via tonal surface steps, not color. ============================================================ */ :root { /* ── Core Surface Tokens ─────────────────────────────────── */ --bg-primary: #000000; /* System background */ --bg-surface: #111111; /* Master card surface */ --bg-sub-surface: #161616; /* Inner nested sub-card */ --bg-hover: #1A1A1A; /* Card hover lift state */ --bg-overlay: rgba(0, 0, 0, 0.85); /* Modal overlay */ /* ── Border Tokens ───────────────────────────────────────── */ --border-color: #333333; /* Universal rest border */ --border-hover: #444444; /* Hover border shift */ --border-focus: #555555; /* Input focus (no glow) */ --border-divider: rgba(255, 255, 255, 0.055); /* Pillar column divider */ /* ── Text Tokens ─────────────────────────────────────────── */ --text-primary: #FFFFFF; /* High contrast white */ --text-secondary: #A1A1A1; /* Body / description text */ --text-muted: #888888; /* Labels, placeholders */ --text-disabled: #555555; /* Disabled states */ --text-inverse: #000000; /* Inverse for light mode */ /* ── Icon Tokens ─────────────────────────────────────────── */ --icon-color: #888888; /* Icon default (muted) */ --icon-hover: #FFFFFF; /* Icon on interactive parent hover */ /* ── Interactive / Button Tokens ─────────────────────────── */ --item-hover-bg: rgba(255, 255, 255, 0.08); /* Button/item hover fill */ --item-hover-bg-alt: #222222; /* Solid alternate hover fill */ --item-text-rest: #888888; /* Resting muted text */ --item-text-hover: #FFFFFF; /* Hover high-contrast text */ /* ── Active / Click Physics ──────────────────────────────── */ --active-scale: scale(0.985); --active-bg: #111111; /* ── Brand / Semantic Accent Tokens ──────────────────────── */ --brand-orange: rgb(244, 117, 63); /* DataOrbix DORI / AI accent */ --brand-orange-dark: #E05A2B; /* ── DataOrbix DORI Teal — brand primary accent ──────────── */ --dori-teal: #00B6D3; --dori-teal-light: #26C3B0; --dori-teal-dark: #0099A8; --dori-orange: rgb(244, 117, 63); /* ── DataOrbix DORI Green — brand secondary accent ──────── */ --dori-green: #00C875; /* Vivid emerald — section eyebrow / labels */ --dori-green-light: #33D48F; /* Lighter tint for hover / glow states */ --dori-green-dark: #00A85F; /* Deeper shade for pressed / active states */ /* ── DataOrbix DORI Blue — brand tertiary accent ─────────── */ --dori-blue: #3B9EFF; /* Vivid azure — section eyebrow / labels */ --dori-blue-light: #6FBAFF; /* Lighter tint for hover / glow states */ --dori-blue-dark: #1A7FE0; /* Deeper shade for pressed / active states */ /* ── Environment Semantic Color Tokens ───────────────────── */ --dori-purple: #8B5CF6; /* eCRF Specification */ --env-dev: #F97316; /* EDC Dev — Dark Orange */ --env-uat: #3B82F6; /* EDC UAT — Blue */ --env-prod: #10B981; /* EDC Prod — Green */ /* ── Status / Semantic Colors (functional only) ──────────── */ --color-success: #22c55e; --color-success-bg: rgba(34, 197, 94, 0.08); --color-success-border: rgba(34, 197, 94, 0.25); --color-warning: #f59e0b; --color-warning-bg: rgba(245, 158, 11, 0.08); --color-warning-border: rgba(245, 158, 11, 0.25); --color-error: #ef4444; --color-error-bg: rgba(239, 68, 68, 0.08); --color-error-border: rgba(239, 68, 68, 0.25); --color-info: #3b82f6; --color-info-bg: rgba(59, 130, 246, 0.08); --color-info-border: rgba(59, 130, 246, 0.25); /* ── Typography Scale ────────────────────────────────────── */ --font-family-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-size-xs: 0.75rem; /* 12px */ --font-size-sm: 0.875rem; /* 14px */ --font-size-base: 1rem; /* 16px */ --font-size-lg: 1.125rem; /* 18px */ --font-size-xl: 1.25rem; /* 20px */ --font-size-2xl: 1.5rem; /* 24px */ --font-size-3xl: 1.875rem; /* 30px */ --font-size-4xl: 2.25rem; /* 36px */ --font-size-5xl: 3rem; /* 48px */ /* ── Spacing Scale ───────────────────────────────────────── */ --spacing-xs: 0.25rem; /* 4px */ --spacing-sm: 0.5rem; /* 8px */ --spacing-md: 1rem; /* 16px */ --spacing-lg: 1.5rem; /* 24px */ --spacing-xl: 2rem; /* 32px */ --spacing-2xl: 3rem; /* 48px */ --spacing-3xl: 4rem; /* 64px */ --spacing-4xl: 5rem; /* 80px */ --spacing-5xl: 6rem; /* 96px */ /* ── Border Radius ───────────────────────────────────────── */ --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-xl: 12px; --radius-full: 9999px; /* ── Shadow Tokens (dark mode: deep shadows) ─────────────── */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.40); --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.50); --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.60); --shadow-xl: 0 10px 20px rgba(0, 0, 0, 0.65); --shadow-none: none; /* ── Transition Tokens ───────────────────────────────────── */ --transition-instant: 80ms ease-out; --transition-fast: 150ms ease-out; --transition-base: 200ms ease; --transition-slow: 400ms ease-out; --transition-surface: background 0.2s ease, border-color 0.2s ease; --transition-icon: stroke 0.2s cubic-bezier(0.16, 1, 0.3, 1); /* ── Z-index Layers ──────────────────────────────────────── */ --z-below: -1; --z-base: 0; --z-raised: 10; --z-dropdown: 100; --z-sticky: 200; --z-overlay: 300; --z-modal: 400; --z-toast: 500; --z-tooltip: 600; /* ── Layout Constants ────────────────────────────────────── */ --nav-height: 64px; --max-content-width: 1200px; --icon-size-sm: 16px; --icon-size-md: 20px; --icon-size-lg: 24px; /* ── Legacy Token Aliases (backward compat with archived components) ── */ --color-background: var(--bg-primary); --color-surface: var(--bg-surface); --color-surface-elevated: var(--bg-sub-surface); --color-surface-hover: var(--bg-hover); --color-border: var(--border-color); --color-border-light: #2A2A2A; /* dark-mode subtle border (lighter than --border-color) */ --color-border-focus: var(--border-focus); --color-text-primary: var(--text-primary); --color-text-secondary: var(--text-secondary); --color-text-muted: var(--text-muted); --color-text-disabled: var(--text-disabled); --color-primary: var(--text-primary); --color-modal-bg: var(--bg-surface); --color-modal-border: var(--border-color); --color-modal-overlay: var(--bg-overlay); /* ── Interaction System Aliases ──────────────────────────── */ --ix-surface-base: var(--bg-surface); --ix-surface-hover: var(--bg-hover); --ix-border-base: var(--border-color); --ix-border-hover: var(--border-hover); --ix-border-bottom-active: var(--border-focus); --ix-border-bottom-width: 1px; --ix-lift-shadow: none; --ix-transition: var(--transition-surface); --ix-btn-color-base: var(--icon-color); --ix-btn-color-hover: var(--icon-hover); --ix-focus-ring: 0 0 0 2px #000000, 0 0 0 3px #555555; /* ── DataOrbix Component Aliases ─────────────────────────── */ --do-bg: var(--bg-primary); --do-card: var(--bg-surface); --do-card-sub: var(--bg-sub-surface); --do-card-hover: var(--bg-hover); --do-border: var(--border-color); --do-border-hover: var(--border-hover); --do-border-focus: var(--border-focus); --do-border-divider: var(--border-divider); --do-text-primary: var(--text-primary); --do-text-secondary: var(--text-secondary); --do-text-muted: var(--text-muted); --do-text-disabled: var(--text-disabled); --do-icon-color: var(--icon-color); --do-icon-color-hover: var(--icon-hover); --do-icon-size: var(--icon-size-md); --do-radius: var(--radius-md); --do-success: var(--color-success); --do-warning: var(--color-warning); --do-error: var(--color-error); --do-orange: var(--brand-orange); --do-hover-wash: rgba(255, 255, 255, 0.018); --do-underline-color: rgba(160, 210, 220, 0.25); --do-transition-bg: background 0.28s ease; --do-transition-icon: stroke 0.25s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); --do-transition-surf: var(--transition-surface); /* ── Vercel Token Aliases ─────────────────────────────────── */ --vo-bg: var(--bg-primary); --vo-bg-alt: #0A0A0A; --vo-card: var(--bg-surface); --vo-card-sub: var(--bg-sub-surface); --vo-card-hover: var(--bg-hover); --vo-border: var(--border-color); --vo-border-hover: var(--border-hover); --vo-border-focus: var(--border-focus); --vo-border-width: 1px; --vo-radius: var(--radius-md); --vo-text-primary: var(--text-primary); --vo-text-secondary: var(--text-secondary); --vo-text-muted: var(--text-muted); --vo-text-disabled: var(--text-disabled); --vo-item-hover-bg: var(--item-hover-bg); --vo-item-hover-bg-alt: var(--item-hover-bg-alt); --vo-item-text-rest: var(--item-text-rest); --vo-item-text-hover: var(--item-text-hover); --vo-active-scale: var(--active-scale); --vo-active-bg: var(--active-bg); --vo-active-transition: transform 0.08s ease-out; --vo-transition: var(--transition-surface); --vo-transition-fast: var(--transition-fast); --vo-success: var(--color-success); --vo-warning: var(--color-warning); --vo-error: var(--color-error); --vo-info: var(--color-info); } /* ============================================================ §2 body[data-theme="light"] — INVERTED LIGHT THEME STATE Remaps only surface, border, text, and icon tokens. Zero structural changes — layout and grid are untouched. ============================================================ */ body[data-theme="light"] { /* ── Core Surface Tokens ─────────────────────────────────── */ --bg-primary: #FFFFFF; --bg-surface: #F5F5F7; --bg-sub-surface: #EDEDF0; --bg-hover: #E8E8EA; --bg-overlay: rgba(0, 0, 0, 0.35); /* ── Border Tokens ───────────────────────────────────────── */ --border-color: #E5E5E7; --border-hover: #D1D1D3; --border-focus: #AAAAAC; --border-divider: rgba(0, 0, 0, 0.06); /* ── Text Tokens ─────────────────────────────────────────── */ --text-primary: #000000; --text-secondary: #333333; --text-muted: #666666; --text-disabled: #AAAAAA; --text-inverse: #FFFFFF; /* ── Icon Tokens ─────────────────────────────────────────── */ --icon-color: #555555; --icon-hover: #000000; /* ── Interactive / Button Tokens ─────────────────────────── */ --item-hover-bg: rgba(0, 0, 0, 0.05); --item-hover-bg-alt: #EBEBED; --item-text-rest: #666666; --item-text-hover: #000000; /* ── Active / Click Physics ──────────────────────────────── */ --active-bg: #F5F5F7; /* ── Shadow Tokens (light mode: soft, lighter) ───────────── */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06); --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.08); --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.10); --shadow-xl: 0 8px 24px rgba(0, 0, 0, 0.12); /* ── Focus Ring (light mode inversion) ───────────────────── */ --ix-focus-ring: 0 0 0 2px #FFFFFF, 0 0 0 3px #AAAAAC; /* ── Legacy aliases: auto-cascade via root re-declarations ── */ --color-background: #FFFFFF; --color-surface: #F5F5F7; --color-surface-elevated: #EDEDF0; --color-surface-hover: #E8E8EA; --color-surface-active: #F5F5F7; --color-modal-overlay: rgba(0, 0, 0, 0.35); --color-modal-bg: #FFFFFF; --color-modal-border: #E5E5E7; --color-border: #E5E5E7; --color-border-light: #EBEBED; --color-border-focus: #AAAAAC; --color-text-primary: #000000; --color-text-secondary: #333333; --color-text-muted: #666666; --color-text-disabled: #AAAAAA; --color-text-inverse: #FFFFFF; --color-primary: #000000; /* ── Component aliases (auto-cascades) ───────────────────── */ --do-hover-wash: rgba(0, 0, 0, 0.025); --do-underline-color: rgba(0, 0, 0, 0.12); --vo-bg-alt: #F9F9FB; --ix-border-base-rgb: 229, 229, 231; --ix-border-side-hover: #D1D1D3; --ix-btn-icon-color-base: #888888; --ix-btn-icon-color-hover: #333333; }