/* ============================================================================= variables.css — Design Tokens for Optic Up ============================================================================= Single source of truth for ALL visual values in the design system. Every value here was extracted from css/styles.css (the existing production stylesheet). Rules: - components.css, layout.css, forms.css must ONLY use var(--...) from this file - Zero hardcoded colors, font-sizes, spacing, or radii outside :root - Tenant override: loadTenantTheme() injects per-tenant values from DB on top of these defaults - The defaults below are tenant-neutral (near-black + slate scale). Per-tenant brand color lives in tenants.ui_config. ============================================================================= */ :root { /* ========================================================================= 1. COLORS — PRIMARY Source: styles.css :root (--primary, --primary-light, --primary-dark) ========================================================================= */ --color-primary: #0f172a; /* Slate 900 — neutral platform default (near-black, Daniel decision 2026-05-10) */ --color-primary-hover: #1e293b; /* Slate 800 — hover lightens (near-black primary can't go darker) */ --color-primary-light: #f1f5f9; /* Slate 100 — light backgrounds, badges, selected rows */ --color-primary-dark: #000000; /* pure black — text-on-light extreme */ /* Legacy alias — bridges old --primary consumers (header.css, index.html) until full migration to --color-primary is complete */ --primary: var(--color-primary); /* On-primary text — DLU_SPEC3_FULL_FLEET header/readability pass. Any header/dark-surface rendered with --color-primary as its background (any tenant hue, including near-black default + prizma Navy #1e3a8a) must use these for text/icons, never a raw gray token — a plain gray (e.g. --g300/--color-gray-*) is tuned for text-on-light and goes unreadable on a dark tenant-colored surface. */ --color-on-primary: #ffffff; /* header titles, primary labels on a dark tenant bg */ --color-on-primary-muted: rgba(255, 255, 255, 0.72); /* secondary/center-zone text on the same surface */ /* ========================================================================= 2. COLORS — SEMANTIC Source: styles.css :root (--success, --error, --warn, --accent) + alert backgrounds (.alert-s, .alert-e, .alert-w, .alert-i) + button hover states (.btn-s:hover, .btn-d:hover, .btn-w:hover, .btn-p:hover) ========================================================================= */ /* Success */ --color-success: #10b981; /* from --success */ --color-success-light: #d1fae5; /* from .alert-s background */ --color-success-hover: #059669; /* from .btn-s:hover */ /* Error */ --color-error: #ef4444; /* from --error */ --color-error-light: #fee2e2; /* from .alert-e background */ --color-error-hover: #dc2626; /* from .btn-d:hover */ /* Warning */ --color-warning: #f59e0b; /* from --warn */ --color-warning-light: #fef3c7; /* from .alert-w background */ --color-warning-hover: #d97706; /* from .btn-w:hover */ /* Info (mapped from --accent) */ --color-info: #3b82f6; /* from --accent — buttons, focus rings, spinners, info messages */ --color-info-light: #dbeafe; /* from .alert-i background */ --color-info-hover: #2563eb; /* from .btn-p:hover */ /* Badge / alert dark text colors (dark on light backgrounds) */ --color-success-dark: #166534; /* from .badge-green, .alert-s color, .rcpt-status-confirmed */ --color-error-dark: #991b1b; /* from .alert-e color, .rcpt-status-cancelled */ --color-warning-dark: #92400e; /* from .alert-w color, .badge-orange, .rcpt-status-draft */ --color-info-dark: #1e40af; /* from .alert-i color, .badge-blue, .rcpt-new-badge */ /* ========================================================================= 3. COLORS — NEUTRAL (Gray Scale) Source: styles.css :root --g100 through --g700 (Tailwind gray palette) Missing: g600, g800, g900, g50, black — interpolated from Tailwind gray scale ========================================================================= */ --color-white: #ffffff; /* from --white */ --color-gray-50: #f8fafc; /* Slate 50 — lightest bg */ /* Legacy alias — DLU_SPEC3B_FINISH (2026-07-04). --g50 is used in 23 call sites (css/studio.css, css/studio-seo.css, storefront-*.html) as a very-light hover/ row-background wash, but unlike --g100..--g700 it was never defined in ANY of the 3 legacy flat :root blocks (styles.css/inventory.css/settings.css) — a genuine gap, not a page-scope artifact. Aliased to the existing --color-gray-50 token per Rule 21 (reuse, don't invent a new hex). */ --g50: var(--color-gray-50); --color-gray-100: #f1f5f9; /* Slate 100 — hover bg, stat item bg */ --color-gray-200: #e2e8f0; /* Slate 200 — borders, dividers, badge-gray bg */ --color-gray-300: #cbd5e1; /* Slate 300 — input borders, separators */ --color-gray-400: #94a3b8; /* Slate 400 — placeholder text, no-img, muted icons */ --color-gray-500: #64748b; /* Slate 500 — label text, inactive nav, muted text */ --color-gray-600: #475569; /* Slate 600 — secondary text */ --color-gray-700: #334155; /* Slate 700 — body text, strong labels */ --color-gray-800: #1e293b; /* Slate 800 — dark text */ --color-gray-900: #0f172a; /* Slate 900 — headings, near-black */ --color-black: #000000; /* pure black — used for camera video bg */ /* Legacy alias family — DLU_B1_TYPE_SCALE_AND_NEUTRALS (2026-07-05), closing DLU-SPEC3-GNNN-DEBT. Same pattern as --g50 above: css/studio.css, css/studio-seo.css, css/debt-routing-station.css, css/store-inbox.css, and every storefront-*.html Studio screen reference var(--g100)..var(--g700) directly, but only inventory.css/settings.css/suppliers-debt.css (the legacy trio; suppliers-debt.css renamed from styles.css by DLU_B2_STYLES_RETIRE_FINAL, 2026-07-05, same content) ever DEFINED them — any page loading the above WITHOUT also loading one of those 3 files renders these as undefined (the DLU_SPEC3_FULL_FLEET header- readability defect class). Aliasing here fixes every such page; it changes NOTHING on pages that DO load the legacy trio (their own :root loads AFTER variables.css and wins the cascade at equal specificity, per Rule 34's zero-visual-change constraint). --g600 was never defined ANYWHERE before — a genuine additional gap this closes. */ --white: var(--color-white); --bg: var(--color-bg-page); --g100: var(--color-gray-100); --g200: var(--color-gray-200); --g300: var(--color-gray-300); --g400: var(--color-gray-400); --g500: var(--color-gray-500); --g600: var(--color-gray-600); --g700: var(--color-gray-700); /* M1.5-DEBT-14 blocker (b) fix — DLU_B2_SUPPLIERS_DEBT_ADOPT (2026-07-05), CLOSED by DLU_B2_STYLES_RETIRE_FINAL (2026-07-05). css/store-inbox.css (var(--shadow), var(--primary-light)) and css/debt-routing-station.css (var(--error), var(--success)) — both surviving sheets suppliers-debt.html keeps regardless — depend on these 4 custom properties, which were previously defined ONLY in css/styles.css's own :root (undefined on any page that doesn't load it). Aliased/literal here with values matching that file's CURRENT ones exactly (verified via direct comparison) so nothing shifted when added, and nothing shifts now that css/styles.css has been renamed to css/suppliers-debt.css and the old name deleted (DLU_B2_STYLES_RETIRE_FINAL) — the renamed file still loads and still wins the cascade at equal specificity, unchanged. --success/--error alias the existing semantic tokens (identical values, --color-success/ --color-error already equal the legacy --success:#10b981/--error:#ef4444). --shadow aliases --shadow-sm (identical value, same origin per its own comment). --primary-light is NOT aliased to --color-primary-light — that token is a different concept (a light background tint, #f1f5f9) unrelated to the legacy --primary-light (a darker shade of the page's own indigo brand color, #283593) — aliasing them would silently change store-inbox.css's rendering. Kept as its own literal, matching the current value exactly. */ --shadow: var(--shadow-sm); --primary-light: #283593; --success: var(--color-success); --error: var(--color-error); /* ========================================================================= 4. COLORS — BACKGROUND Source: styles.css body, .card, input default background ========================================================================= */ --color-bg-page: #f5f5f5; /* from --bg — body background */ --color-bg-card: #ffffff; /* from .card background — cards, modals, dropdowns */ --color-bg-input: #ffffff; /* from input default — no explicit bg in styles.css, browser default white */ /* ========================================================================= 5. TYPOGRAPHY Source: styles.css body font-family, various font-size declarations ========================================================================= */ --font-family: 'Heebo', sans-serif; /* from body */ /* Font sizes — consolidated from 15+ ad-hoc values in styles.css. Each token maps to a range of original values (see comments). */ --font-size-xs: 0.75rem; /* replaces: 0.75rem (bulk-field label, no-img, ocr-hint, rcpt-new-badge) */ --font-size-sm: 0.85rem; /* replaces: 0.78-0.85rem range (labels, btn-sm, captions, td input, settings labels, table font) */ --font-size-md: 0.92rem; /* replaces: 0.88-0.95rem range — BASE size (body, nav, .btn, alert, toast, input) */ --font-size-lg: 1.1rem; /* replaces: 1.0-1.15rem range (section titles, card h3, sub-choice, gear btn) */ --font-size-xl: 1.4rem; /* replaces: 1.3-1.5rem range (logo, settings-title, stat numbers) */ --font-size-2xl: 1.8rem; /* replaces: 1.8-2.0rem range (summary-card .num, slog-card .num, sub-choice icon) */ /* Font weights */ --font-weight-normal: 400; --font-weight-medium: 500; /* nav buttons, labels */ --font-weight-semibold: 600; /* .btn, th, badges, settings labels */ --font-weight-bold: 700; /* logo, active nav, stat numbers, card-num */ /* Line heights */ --line-height-tight: 1.25; /* compact elements */ --line-height-normal: 1.5; /* default body text */ --line-height-relaxed: 1.75; /* help-banner-content (line-height: 1.7 in styles.css) */ /* ========================================================================= 6. SPACING Source: styles.css padding/margin/gap values (range: 2px–48px) Consolidated into a 6-step scale based on usage frequency. ========================================================================= */ --space-xs: 4px; /* replaces: 2-4px (label margin-bottom, micro gaps, badge padding) */ --space-sm: 8px; /* replaces: 6-8px (td padding, small gaps, card-row gap, icon gaps) */ --space-md: 12px; /* replaces: 10-14px (form-row gap, header padding, common margins, gap between items) */ --space-lg: 16px; /* replaces: 16px (card h3 margin, section gaps, card padding mobile, OCR panel padding) */ --space-xl: 24px; /* replaces: 20-24px (card padding, main padding, header padding, sub-choice padding) */ --space-2xl: 32px; /* replaces: 28-48px (loading-box padding, divider margin, modal padding) */ /* ========================================================================= 7. BORDER RADIUS Source: styles.css border-radius declarations ========================================================================= */ --radius-sm: 6px; /* from td input, card-field input, bulk-field, search-select, qty-btn, logo-preview */ --radius-md: 8px; /* from input/select/textarea, .btn, table-wrap, alert, toast, badges */ --radius-lg: 10px; /* from --radius — .card, .item-card, .modal, settings-section */ --radius-full: 9999px; /* pill shapes — admin-btn (20px), worker-badge (20px) generalized */ /* ========================================================================= 8. SHADOWS Source: styles.css box-shadow declarations ========================================================================= */ --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08); /* from --shadow — cards, sections, stat items */ --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.18); /* DERIVED — midpoint between card shadow and modal shadow, close to toast (0 4px 16px .2) and dropdown (0 8px 24px .18) */ --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.25); /* from .modal box-shadow */ /* ========================================================================= 9. Z-INDEX SCALE Values match existing styles.css to ensure coexistence during migration. During Phase 1-4, both styles.css and shared/css/ coexist — z-index values must be compatible. These are NOT a clean 100-500 scale; they match production. ========================================================================= */ --z-dropdown: 9999; /* from .ss-dropdown — must be above everything */ --z-sticky: 200; /* for shared sticky headers — above nav (99), below overlays */ --z-overlay: 300; /* for shared overlays — between sticky and modal */ --z-modal: 1000; /* from .modal-overlay, .ai-config-modal */ --z-toast: 2000; /* from #toast-c */ /* ========================================================================= 10. TRANSITIONS Source: styles.css transition declarations ========================================================================= */ --transition-fast: 150ms ease; /* from .qty-btn (all .15s), .ss-item (background .15s) */ --transition-normal: 200ms ease; /* from nav button, .btn, .sub-choice, .card (all .2s) — most common */ --transition-slow: 300ms ease; /* from toast @keyframes slideIn (.3s ease) */ /* ========================================================================= 11. FOCUS — accessibility (Phase 2 — Design System) Source: WCAG 2.4.7 (Focus Visible) + Brief Contract D ========================================================================= */ --color-focus-ring: var(--color-primary); /* tracks primary by default; tenant can override to a contrasting color */ --shadow-focus: 0 0 0 3px rgba(15, 23, 42, 0.35); /* 3px ring, near-black at 35% — visible on light AND on primary-colored backgrounds */ /* ========================================================================= 12. NAVY ACCENT (Hybrid+Navy design system, 2026-05-11) Additive tokens for the staged page-by-page migration to Hybrid+Navy. Existing tokens (--color-primary, --primary, etc.) remain unchanged until all 4 production migrations complete (Brief Locked Decision #5). ========================================================================= */ --accent-navy: var(--primary, #1e3a8a); /* primary action — Hybrid+Navy, tenant-themed (DLU_SPEC2) */ --accent-navy-hover: #1e40af; /* hover state */ --accent-navy-soft: #e6f1fb; /* selected row, badge bg, hero wash */ --accent-navy-text: #ffffff; /* on Navy */ --text-slate-primary: #0f172a; /* deep slate body — alias of --color-gray-900, named for migration clarity */ --text-slate-secondary: #475569; /* secondary slate body — alias of --color-gray-600 */ }