/** * ConcreteInfo Design Tokens — single source of truth for visual system. * Mirrors cmd_app__dock-glm/assets/css/design-tokens.css (light + dark). * * Uses HSL channel variables so Tailwind utility classes (e.g. bg-brand/20) * remain theme-aware and opacity modifiers work. * * Apply dark mode by adding the `.dark` class to . * * @author ConcreteInfo */ :root { /* ── Brand channels (drives all brand-* utilities via Tailwind config) ── */ --color-brand-h: 14; --color-brand-s: 77%; --color-brand-l: 51%; --color-brand: hsl(14, 77%, 51%); /* #e5461f */ --color-brand-dark: hsl(14, 77%, 40%); --color-brand-light: hsl(14, 77%, 60%); --color-brand-50: hsl(14, 77%, 98%); --color-brand-100: hsl(14, 77%, 95%); --color-brand-200: hsl(14, 77%, 90%); /* ── Warm neutral gray scale (matches concreteinfo.in palette) ── */ --color-gray-50: #fafbfc; --color-gray-100: #f5f5f5; --color-gray-200: #e3e3e3; --color-gray-300: #d1d1d1; --color-gray-400: #b0b0b0; --color-gray-500: #9a9696; --color-gray-600: #7a7878; --color-gray-700: #5a5858; --color-gray-800: #4e4e4e; --color-gray-900: #464646; --color-gray-950: #0d0b09; /* ── Semantic colors ── */ --color-success: #1a7a56; --color-success-light: hsl(159, 64%, 95%); --color-warning: hsl(45, 93%, 47%); --color-warning-light: hsl(45, 93%, 95%); --color-danger: hsl(0, 84%, 60%); --color-danger-light: hsl(0, 84%, 95%); --color-info: hsl(199, 89%, 48%); --color-info-light: hsl(199, 89%, 95%); /* ── LIGHT MODE tokens ── */ --bg-primary: var(--color-gray-50); --bg-secondary: #ffffff; --bg-tertiary: var(--color-gray-100); --bg-elevated: #ffffff; --bg-overlay: hsl(210, 10%, 10%, 0.5); /* RGB triples — allow Tailwind `bg-surface-elevated/95` alpha modifiers. tailwind.config maps `surface.*` to `rgb(var(--*-rgb) / )`. */ --bg-primary-rgb: 250 251 252; /* gray-50 #fafbfc */ --bg-secondary-rgb: 255 255 255; /* #ffffff */ --bg-tertiary-rgb: 245 245 245; /* gray-100 #f5f5f5 */ --bg-elevated-rgb: 255 255 255; /* #ffffff */ --text-primary: var(--color-gray-900); /* #464646 — body & headings */ --text-secondary: var(--color-gray-600); --text-tertiary: var(--color-gray-500); --text-inverse: #ffffff; --text-link: var(--color-brand); --border-subtle: var(--color-gray-200); --border-default: var(--color-gray-300); --border-strong: var(--color-gray-400); /* ── Elevation ── */ --shadow-xs: 0 1px 2px rgba(13, 11, 9, 0.04); --shadow-sm: 0 1px 3px rgba(13, 11, 9, 0.06), 0 1px 2px rgba(13, 11, 9, 0.04); --shadow-md: 0 4px 6px -1px rgba(13, 11, 9, 0.08), 0 2px 4px -2px rgba(13, 11, 9, 0.04); --shadow-lg: 0 10px 15px -3px rgba(13, 11, 9, 0.10), 0 4px 6px -4px rgba(13, 11, 9, 0.05); --shadow-xl: 0 20px 25px -5px rgba(13, 11, 9, 0.12), 0 8px 10px -6px rgba(13, 11, 9, 0.05); --shadow-2xl: 0 25px 50px -12px rgba(13, 11, 9, 0.25); --shadow-primary: 0 10px 25px -5px hsl(14, 77%, 51%, 0.30); --focus-ring: 0 0 0 3px var(--color-brand-100); /* ── Typography (compact 15px base) ── */ --font-family-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --font-family-heading: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --font-family-display: 'IBM Plex Sans Condensed', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif; --font-family-mono: 'SF Mono', 'Fira Code', 'Consolas', 'Liberation Mono', monospace; /* ── Radii (cmd_app 4/8/12/16 scale) ── */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-2xl: 24px; /* ── Transitions ── */ --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1); --transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1); --transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1); --transition-bounce: 500ms cubic-bezier(0.34, 1.56, 0.64, 1); /* ── Layout ── */ --header-height: 4rem; /* 64px */ --container-max-width: 80rem; /* 1280px */ --content-max-width: 72rem; /* 1152px */ } /* ── DARK MODE ── */ .dark { --bg-primary: var(--color-gray-950); --bg-secondary: var(--color-gray-900); --bg-tertiary: var(--color-gray-800); --bg-elevated: #1f2937; --bg-overlay: hsl(210, 10%, 5%, 0.7); --bg-primary-rgb: 13 11 9; /* gray-950 #0d0b09 */ --bg-secondary-rgb: 70 70 70; /* gray-900 #464646 */ --bg-tertiary-rgb: 78 78 78; /* gray-800 #4e4e4e */ --bg-elevated-rgb: 31 41 55; /* #1f2937 */ /* Bumped for WCAG-AA contrast (gray-200 ~7.5:1, gray-300 ~6.2:1 on #464646). */ --text-primary: var(--color-gray-50); --text-secondary: var(--color-gray-200); --text-tertiary: var(--color-gray-300); --text-inverse: #ffffff; --text-link: hsl(14, 80%, 60%); --border-subtle: var(--color-gray-800); --border-default: var(--color-gray-700); --border-strong: var(--color-gray-600); --shadow-xs: 0 1px 2px rgba(0,0,0,0.25); --shadow-sm: 0 1px 3px rgba(0,0,0,0.30), 0 1px 2px rgba(0,0,0,0.20); --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.40), 0 2px 4px -2px rgba(0,0,0,0.30); --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.50), 0 4px 6px -4px rgba(0,0,0,0.40); --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.55), 0 8px 10px -6px rgba(0,0,0,0.45); --shadow-2xl: 0 25px 50px -12px rgba(0,0,0,0.70); --focus-ring: 0 0 0 3px hsl(14, 50%, 20%); } /* Smooth theme transition on color/border/background changes. */ .theme-transitioning, .theme-transitioning *, .theme-transitioning *::before, .theme-transitioning *::after { transition: background-color 300ms ease, border-color 300ms ease, color 300ms ease, box-shadow 300ms ease, fill 300ms ease, stroke 300ms ease !important; }