/* * theme_tokens.css — Design Tokens * =================================== * ALL colors, spacing, typography, radius, and shadows are defined here. * This file contains ONLY CSS custom properties under .themed. * No component styles. No selectors other than .themed. * * GOVERNED BY: CLAUDE_UI_LOCK.md * Do NOT add non-token rules to this file. */ .themed { /* ========================================================================= PRIMARY PALETTE — Bluish enterprise (Freshdesk-inspired) ========================================================================= */ --color-primary-50: #eff6ff; --color-primary-100: #dbeafe; --color-primary-200: #bfdbfe; --color-primary-300: #93c5fd; --color-primary-400: #60a5fa; --color-primary-500: #3b82f6; --color-primary-600: #2563eb; --color-primary-700: #1d4ed8; --color-primary-800: #1e40af; --color-primary-900: #1e3a8a; /* ========================================================================= SEMANTIC STATUS COLORS ========================================================================= */ --color-success-bg: #f0fdf4; --color-success-text: #15803d; --color-success-border: #86efac; --color-success-icon: #22c55e; --color-warning-bg: #fffbeb; --color-warning-text: #b45309; --color-warning-border: #fcd34d; --color-warning-icon: #f59e0b; --color-danger-bg: #fef2f2; --color-danger-text: #b91c1c; --color-danger-border: #fca5a5; --color-danger-icon: #ef4444; --color-info-bg: #eff6ff; --color-info-text: #1d4ed8; --color-info-border: #93c5fd; --color-info-icon: #3b82f6; /* ========================================================================= SURFACE COLORS ========================================================================= */ --color-surface: #ffffff; /* Cards, modals, dropdowns */ --color-surface-muted: #f8fafc; /* Table heads, secondary panels */ --color-surface-hover: #f1f5f9; /* Row hover, nav hover */ --color-surface-active: #eff6ff; /* Active nav items */ --color-canvas: #f1f5f9; /* Page background */ --color-overlay: rgba(0,0,0,0.4); /* Modal backdrop */ /* ========================================================================= TEXT COLORS ========================================================================= */ --color-text-base: #111827; /* Primary body text */ --color-text-muted: #6b7280; /* Secondary text, labels */ --color-text-subtle: #9ca3af; /* Placeholder, hints */ --color-text-inverse: #ffffff; /* Text on dark backgrounds */ --color-text-link: #2563eb; /* Hyperlinks */ --color-text-link-hover: #1d4ed8; /* Hyperlink hover */ /* ========================================================================= BORDER COLORS ========================================================================= */ --color-border: #e5e7eb; /* Default borders */ --color-border-strong: #d1d5db; /* Emphasized borders */ --color-border-focus: #2563eb; /* Focus rings */ --color-border-error: #ef4444; /* Error state borders */ /* ========================================================================= SIDEBAR / NAVIGATION ========================================================================= */ --sidebar-bg: #ffffff; --sidebar-width: 16rem; /* 256px */ --sidebar-border: #e5e7eb; --nav-link-color: #374151; --nav-link-hover-bg: #f1f5f9; --nav-link-hover-color: #111827; --nav-link-active-bg: #eff6ff; --nav-link-active-text: #1d4ed8; --nav-link-active-border: #2563eb; --nav-section-color: #9ca3af; --nav-user-bg: #f8fafc; --header-bg: #ffffff; --header-border: #e5e7eb; --header-height: 3.5rem; /* 56px */ /* ========================================================================= BORDER RADIUS ========================================================================= */ --radius-sm: 0.25rem; /* 4px — small chips, tight elements */ --radius-md: 0.5rem; /* 8px — buttons, inputs */ --radius-lg: 0.75rem; /* 12px — cards, panels */ --radius-xl: 1rem; /* 16px — modals, large panels */ --radius-full: 9999px; /* Badges, pills */ /* ========================================================================= SHADOWS ========================================================================= */ --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05); --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.07), 0 2px 4px -2px rgb(0 0 0 / 0.07); --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.08), 0 4px 6px -4px rgb(0 0 0 / 0.08); --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.09), 0 8px 10px -6px rgb(0 0 0 / 0.09); --shadow-inset: inset 0 1px 2px rgb(0 0 0 / 0.05); /* ========================================================================= TYPOGRAPHY ========================================================================= */ --font-sans: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --font-mono: ui-monospace, 'Cascadia Code', 'Fira Code', 'Courier New', monospace; --text-xs: 0.6875rem; /* 11px — tiny labels */ --text-sm: 0.75rem; /* 12px — hints, captions */ --text-base: 0.875rem; /* 14px — body text (enterprise density) */ --text-md: 0.9375rem; /* 15px — slightly larger body */ --text-lg: 1rem; /* 16px — sub-headings */ --text-xl: 1.125rem; /* 18px — section titles */ --text-2xl: 1.25rem; /* 20px — page sub-headings */ --text-3xl: 1.5rem; /* 24px — page titles */ --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --leading-tight: 1.25; --leading-normal: 1.5; --leading-relaxed: 1.625; /* ========================================================================= SPACING SCALE ========================================================================= */ --space-0: 0; --space-px: 1px; --space-0-5: 0.125rem; /* 2px */ --space-1: 0.25rem; /* 4px */ --space-1-5: 0.375rem; /* 6px */ --space-2: 0.5rem; /* 8px */ --space-2-5: 0.625rem; /* 10px */ --space-3: 0.75rem; /* 12px */ --space-3-5: 0.875rem; /* 14px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-16: 4rem; /* 64px */ /* ========================================================================= TRANSITION ========================================================================= */ --transition-fast: 150ms ease; --transition-base: 200ms ease; --transition-slow: 300ms ease; /* ========================================================================= Z-INDEX SCALE ========================================================================= */ --z-base: 1; --z-dropdown: 50; --z-modal: 100; --z-toast: 200; --z-sidebar: 300; /* ========================================================================= CHART / DATA VISUALIZATION COLORS (Read from JS via getComputedStyle for Chart.js integration) ========================================================================= */ --chart-primary: #2563eb; --chart-secondary: #7c3aed; --chart-success: #16a34a; --chart-warning: #d97706; --chart-danger: #dc2626; --chart-neutral: #6b7280; --chart-grid: #f1f5f9; --chart-tick: #9ca3af; }