/* ========================================================================== ExclusiveModels — Design Tokens Single source of truth for the entire admin UI. /css/admin/tokens.css All component files (alerts, buttons, forms, galleries, image-grid, layout, scraper-logs, sidebar, storage) reference these variables. No hardcoded colors, spacing, or sizes in component files. ────────────────────────────────────────────────────────────────────────── ENGINEERING DECISIONS — Why We Use What We Use ────────────────────────────────────────────────────────────────────────── 1. rgba() instead of hex (#) ───────────────────────────── Every color in this file is expressed as rgba(R, G, B, A). WHY: • Transparency control — the fourth value (alpha) lets us create semi-transparent variants of any color by changing only one number. Example: rgba(220, 38, 38, 1) → rgba(220, 38, 38, 0.4) for an overlay. With hex you would need a completely different value (#dc262666). • Readability — rgba makes the color channels explicit. You can glance at rgba(37, 99, 235, 1) and know the blue channel dominates. Hex (#2563eb) requires mental conversion. • Consistency — when every color speaks the same format, there is no mixing of notations. One language, zero ambiguity. • Dark-UI advantage — dark interfaces rely heavily on layered transparency (overlays, hover states, shadows). rgba is built for this. Reference: Eric Meyer, "CSS: The Definitive Guide", Chapter 4 — Values, Units, and Colors. Meyer recommends rgba for its explicit alpha channel and its superiority in compositing contexts. 2. rem instead of px (for spacing, font sizes, and radii) ───────────────────────────────────────────────────────────── WHY: • rem = "root em". It is always relative to the element's font-size, which browsers default to 16px. So: 1rem = 16px, 0.5rem = 8px, 0.75rem = 12px — always. • Accessibility — if a user changes their browser's default font size (for vision reasons), every rem-based measurement scales proportionally. px values are fixed and ignore this preference. • Predictability — unlike em, rem does NOT cascade or compound. A 1rem value inside a nested element is still 16px, no matter how deep the nesting. This makes layouts deterministic. • When we KEEP px: – 1px borders (we want a literal hairline, not a scalable one) – Box-shadow offsets (sub-pixel precision matters) – outline-offset (same reason) – 9999px for --radius-full (a deliberate overflow hack for pills) 3. em (used in component files, not here) ────────────────────────────────────────── WHY: • em is relative to the PARENT element's font-size. • We use it ONLY for padding inside buttons and badges — so the internal space grows proportionally if the text size changes. Example: a button with padding: 0.5em 1em will have correct internal proportions whether the text is 14px or 18px. • We NEVER use em for layout spacing or font sizes, because em cascades: if a parent is 1.2em and a child is 1.2em, the child computes to 1.2 × 1.2 = 1.44em of the grandparent — a compounding trap. RULE OF THUMB: • rem → layout, spacing, font sizes, radii (global consistency) • em → internal padding of interactive elements (local proportionality) • px → borders, shadows, outline-offset, pill-radius hack ────────────────────────────────────────────────────────────────────────── END OF ENGINEERING DECISIONS ========================================================================== */ :root { /* ====================== COLORS — Base ====================== */ --color-white: rgba(255, 255, 255, 1); /* ====================== COLORS — Surface & Background ====================== */ --color-surface-primary: rgba(17, 17, 17, 1); /* #111111 — page background */ --color-surface-secondary: rgba(24, 24, 24, 1); /* #181818 — cards, sidebar */ --color-surface-hover: rgba(37, 37, 37, 1); /* #252525 — hover states */ --color-surface-tertiary: rgba(37, 37, 37, 1); /* alias for --color-surface-hover (image-grid) */ /* Aliases used by base.css and forms.css */ --color-bg-base: rgba(17, 17, 17, 1); /* = --color-surface-primary */ --color-bg-surface: rgba(24, 24, 24, 1); /* = --color-surface-secondary */ --color-bg-surface-hover: rgba(37, 37, 37, 1); /* = --color-surface-hover */ --color-bg-input: rgba(30, 30, 30, 1); /* Input field background */ /* ====================== COLORS — Border ====================== */ --color-border: rgba(42, 42, 42, 1); /* #2a2a2a — dividers, card borders */ --color-border-primary: rgba(42, 42, 42, 1); /* alias for --color-border (image-grid) */ --color-border-hover: rgba(75, 85, 99, 1); /* #4b5563 — hover state */ /* ====================== COLORS — Text ====================== */ --color-text-primary: rgba(254, 254, 254, 1); /* #fefefe — headings, nav hover/active */ --color-text-bright: rgba(249, 250, 251, 1); /* #f9fafb — h1–h6 defaults */ --color-text-secondary: rgba(201, 205, 211, 1); /* #c9cdd3 — model names, descriptions */ --color-text-muted: rgba(156, 163, 175, 1); /* #9ca3af — dim labels, secondary info */ --color-text-dim: rgba(107, 114, 128, 1); /* #6b7280 — nav section titles */ --color-text-faint: rgba(75, 85, 99, 1); /* #4b5563 — count badges */ --color-text-subtle: rgba(107, 114, 128, 1); /* alias for dash section labels */ --color-text-placeholder: rgba(107, 114, 128, 1); /* input placeholder */ /* ====================== COLORS — Accent / Link Used by base.css (a, :focus-visible) and forms.css ====================== */ --color-accent: rgba(37, 99, 235, 1); /* #2563eb — Blue-600 */ --color-accent-hover: rgba(29, 78, 216, 1); /* #1d4ed8 — Blue-700 */ --color-accent-light: rgba(96, 165, 250, 1); /* #60a5fa — Blue-400, code text */ /* Aliases kept for layout.css compatibility */ --color-link: rgba(37, 99, 235, 1); --color-link-hover: rgba(96, 165, 250, 1); /* ====================== COLORS — Interactive (Primary) ====================== */ --color-primary: rgba(37, 99, 235, 1); --color-primary-hover: rgba(29, 78, 216, 1); --color-primary-active: rgba(30, 64, 175, 1); --color-primary-light: rgba(96, 165, 250, 1); --color-primary-mid: rgba(59, 130, 246, 1); /* ====================== COLORS — Interactive (Secondary) ====================== */ --color-secondary: rgba(55, 65, 81, 1); --color-secondary-text: rgba(229, 231, 235, 1); --color-secondary-border: rgba(75, 85, 99, 1); --color-secondary-hover: rgba(75, 85, 99, 1); --color-secondary-border-hover: rgba(107, 114, 128, 1); --color-secondary-active: rgba(31, 41, 55, 1); /* ====================== COLORS — Interactive (Success) ====================== */ --color-success: rgba(22, 101, 52, 1); --color-success-hover: rgba(21, 128, 61, 1); --color-success-active: rgba(20, 83, 45, 1); --color-success-light: rgba(74, 222, 128, 1); --color-success-mid: rgba(34, 197, 94, 1); --color-success-emphasis: rgba(34, 197, 94, 1); /* ====================== COLORS — Interactive (Danger) ====================== */ --color-danger: rgba(220, 38, 38, 1); /* Red-600 */ --color-danger-hover: rgba(185, 28, 28, 1); /* Red-700 */ --color-danger-active: rgba(153, 27, 27, 1); /* Red-800 */ --color-danger-emphasis: rgba(220, 38, 38, 1); --color-danger-surface: rgba(63, 26, 26, 1); /* #3f1a1a — logout hover bg */ /* ====================== COLORS — Alerts / Semantic (Success) ====================== */ --color-success-bg: rgba(20, 83, 45, 1); --color-success-text: rgba(74, 222, 128, 1); --color-success-border: rgba(22, 101, 52, 1); /* ====================== COLORS — Alerts / Semantic (Danger) ====================== */ --color-danger-bg: rgba(69, 10, 10, 1); --color-danger-text: rgba(248, 113, 113, 1); --color-danger-text-light: rgba(252, 165, 165, 1); /* red-300 — badge & error log text */ --color-danger-border: rgba(127, 29, 29, 1); /* ====================== COLORS — Alerts / Semantic (Warning) ====================== */ --color-warning: rgba(245, 158, 11, 1); /* Amber-500 */ --color-warning-bg: rgba(234, 179, 8, 0.15); /* Amber-500 @ 15% */ --color-warning-text: rgba(251, 191, 36, 1); --color-warning-border: rgba(120, 53, 15, 1); /* ====================== COLORS — Alerts / Semantic (Info) ====================== */ --color-info-bg: rgba(59, 130, 246, 0.15); /* Blue-500 @ 15% */ --color-info-text: rgba(96, 165, 250, 1); /* Blue-400 */ /* ====================== COLORS — Info (deep navy panel) Used by storage.css info-box and badge-info ====================== */ --color-info-bg-deep: rgba(30, 58, 95, 0.1875); /* navy panel background */ --color-info-border-deep: rgba(30, 58, 95, 1); /* navy panel border & badge-info bg */ --color-info-text-light: rgba(147, 197, 253, 1); /* blue-300, info panel text */ /* ====================== COLORS — Focus ====================== */ --color-focus-ring: rgba(59, 130, 246, 0.3); /* ====================== COLORS — Overlay ====================== */ --color-overlay: rgba(0, 0, 0, 0.5); /* modal/lightbox backdrop */ --color-overlay-light: rgba(0, 0, 0, 0.45); /* card delete button bg */ /* ====================== COLORS — Code ====================== */ --color-code: rgba(251, 191, 36, 1); /* amber inline code text */ /* ====================== COLORS — Spinner ====================== */ --color-spinner-track: rgba(255, 255, 255, 0.3); /* ====================== TYPOGRAPHY — Font Families ====================== */ --font-family-system: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; --font-family-mono: 'SF Mono', Monaco, Consolas, 'Courier New', monospace; /* ====================== TYPOGRAPHY — Font Sizes ====================== */ --text-2xs: 0.6875rem; /* 11px */ --text-xs: 0.75rem; /* 12px */ --text-sm: 0.875rem; /* 14px */ --text-base: 1rem; /* 16px */ --text-lg: 1.125rem; /* 18px */ --text-xl: 1.25rem; /* 20px */ --text-2xl: 1.5rem; /* 24px */ --text-micro: 0.6875rem; /* 11px — alias for dash section labels */ --text-code: 0.875rem; /* 14px — inline code */ /* ====================== TYPOGRAPHY — Font Weights ====================== */ --font-normal: 400; --font-medium: 500; --font-semibold: 600; --font-bold: 700; /* ====================== TYPOGRAPHY — Line Heights ====================== */ --leading-tight: 1.25; --leading-snug: 1.4; --leading-normal: 1.5; --leading-relaxed: 1.625; /* ====================== SPACING ====================== */ --spacing-px: 0.15rem; /* micro — tight badge padding */ --spacing-0-5: 0.125rem; /* 2px */ --spacing-1: 0.25rem; /* 4px */ --spacing-1-5: 0.375rem; /* 6px */ --spacing-2: 0.5rem; /* 8px */ --spacing-2-5: 0.625rem; /* 10px */ --spacing-3: 0.75rem; /* 12px */ --spacing-3-5: 0.875rem; /* 14px */ --spacing-4: 1rem; /* 16px */ --spacing-5: 1.25rem; /* 20px */ --spacing-6: 1.5rem; /* 24px */ --spacing-7: 1.75rem; /* 28px */ --spacing-8: 2rem; /* 32px */ --spacing-10: 2.5rem; /* 40px */ --spacing-12: 3rem; /* 48px */ --spacing-16: 4rem; /* 64px */ /* ====================== BORDER RADIUS — rem for scalability, except --radius-full which uses the 9999px overflow hack to force a pill/circle shape. ====================== */ --radius-sm: 0.25rem; /* 4px */ --radius-md: 0.375rem; /* 6px */ --radius-lg: 0.5rem; /* 8px */ --radius-xl: 0.75rem; /* 12px */ --radius-full: 9999px; /* pill — intentional px overflow hack */ /* ====================== SIZING ====================== */ --size-focus-ring: 3px; /* focus outline thickness (box-shadow) */ --size-spinner: 16px; /* loading spinner diameter */ --size-spinner-border: 2px; /* loading spinner stroke width */ --size-progress-bar: 3px; /* alert countdown bar height */ --width-container: 1280px; /* max-width for .container */ /* ====================== SHADOWS — px offsets for sub-pixel precision; rgba for dark-UI visibility. ====================== */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4); --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5); --shadow-ring-accent: 0 0 0 3px rgba(37, 99, 235, 0.3); --shadow-ring-success: 0 0 0 3px rgba(34, 197, 94, 0.25); --shadow-ring-warning: 0 0 0 3px rgba(245, 158, 11, 0.25); --shadow-ring-danger: 0 0 0 3px rgba(220, 38, 38, 0.25); /* ====================== TRANSITIONS ====================== */ --transition-fast: 0.15s ease; --transition-base: 0.2s ease; --transition-normal: 0.25s ease; --transition-slow: 0.3s ease-out; /* ====================== DURATIONS ====================== */ --duration-spin: 0.6s; /* spinner rotation cycle */ --duration-alert-dismiss: 4s; /* alert progress bar countdown */ /* ====================== OPACITY ====================== */ --opacity-disabled: 0.5; --opacity-muted: 0.6; --opacity-subtle: 0.3; /* ====================== Z-INDEX SCALE ====================== */ --z-dropdown: 100; --z-sidebar: 200; --z-overlay: 300; --z-modal: 300; --z-alert: 400; /* ====================== SURFACE ALIASES (Layer 1 compat) layout.css uses --color-surface-1 / --color-surface-2 ====================== */ --color-surface-1: rgba(24, 24, 24, 1); /* = --color-surface-secondary */ --color-surface-2: rgba(30, 30, 30, 1); /* slightly lifted — code bg, inputs */ /* --- Sidebar Dimensions --- */ --sidebar-width: 240px; --sidebar-width-collapsed: 64px; /* --- Danger / Error --- */ /* #3f1a1a — logout hover bg */ --color-error-text: rgba(248, 113, 113, 1); /* #f87171 — red-400, logout hover text */ }