/* ============================================================= Inoquos Design Tokens ------------------------------------------------------------- Single source of truth for brand colors, surfaces and spacing across every Inoquos desktop dashboard (portal, production, warehouse, quality, operations, RH). Dark-theme variants activate when [data-theme="dark"] is set on the element. The no-flicker setup lives in inoquos-theme.js. Brand palette taken from inoquos.com (teal-blue #215d72 family with amber #e09004 warm accent). ============================================================= */ :root { /* Surfaces ---------------------------------------------------- */ --ino-bg: #f5f7fa; /* page background */ --ino-surface: #ffffff; /* cards, header, inputs */ --ino-surface-alt: #f8fafc; /* hover, subtle rows */ --ino-border: #e2e8f0; --ino-border-strong: #cbd5e1; /* Text -------------------------------------------------------- */ --ino-text: #1e293b; --ino-text-muted: #64748b; --ino-text-inverse: #ffffff; /* Brand accent (teal-blue from inoquos.com) ------------------- */ --ino-accent: #215d72; --ino-accent-hover: #1a4a5c; --ino-accent-soft: #e3edf1; /* tinted background for active tabs, hovers */ --ino-accent-strong: #13394a; /* Semantic ---------------------------------------------------- */ --ino-success: #16a34a; --ino-success-soft: #dcfce7; --ino-warning: #d97706; --ino-warning-soft: #fef3c7; --ino-danger: #dc2626; --ino-danger-soft: #fee2e2; --ino-info: #2563eb; --ino-info-soft: #dbeafe; /* Warm amber accent (from inoquos.com, reserved for highlights) */ --ino-warm: #e09004; --ino-warm-soft: #fef3c7; /* Shadows / elevation ---------------------------------------- */ --ino-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05); --ino-shadow-md: 0 2px 6px rgba(15, 23, 42, 0.08); --ino-shadow-lg: 0 8px 24px rgba(15, 23, 42, 0.12); /* Layout ------------------------------------------------------ */ --ino-header-h: 56px; --ino-radius-sm: 4px; --ino-radius: 6px; --ino-radius-lg: 10px; --ino-card-radius: 12px; --ino-input-radius: 8px; /* Container widths ------------------------------------------- */ --ino-container-narrow: 1100px; /* forms-heavy dashboards (warehouse, quality) */ --ino-container-wide: 1820px; /* table-heavy dashboards (HR, employee) */ /* Form fields ------------------------------------------------- */ --ino-input-padding: 8px 12px; --ino-label-size: 13px; --ino-input-size: 14px; /* Focus ring (derived from accent) ---------------------------- */ --ino-focus-ring: 0 0 0 3px rgba(33, 93, 114, 0.18); /* Modal overlay ----------------------------------------------- */ --ino-overlay-bg: rgba(15, 23, 42, 0.5); /* Z-index scale ----------------------------------------------- */ --ino-z-header: 100; --ino-z-dropdown: 130; --ino-z-overlay: 200; --ino-z-modal: 210; --ino-z-toast: 9999; /* Typography -------------------------------------------------- */ --ino-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; } /* Documented breakpoints (CSS vars cannot be used inside @media, so reference these in comments to keep dashboards aligned): --ino-bp-mobile: 600px --ino-bp-tablet: 768px --ino-bp-desktop: 1024px */ /* Dark mode ---------------------------------------------------- */ [data-theme="dark"] { --ino-bg: #0f172a; --ino-surface: #1e293b; --ino-surface-alt: #263447; --ino-border: #334155; --ino-border-strong: #475569; --ino-text: #f1f5f9; --ino-text-muted: #94a3b8; --ino-text-inverse: #0f172a; --ino-accent: #4a97b0; --ino-accent-hover: #5fb0c9; --ino-accent-soft: #1e3a45; --ino-accent-strong: #7cc2d6; --ino-success: #22c55e; --ino-success-soft: #052e16; --ino-warning: #f59e0b; --ino-warning-soft: #3a2a05; --ino-danger: #ef4444; --ino-danger-soft: #3a0a0a; --ino-info: #3b82f6; --ino-info-soft: #0b2545; --ino-warm: #f4a82a; --ino-warm-soft: #3a2a05; --ino-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --ino-shadow-md: 0 2px 6px rgba(0, 0, 0, 0.5); --ino-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.6); --ino-focus-ring: 0 0 0 3px rgba(74, 151, 176, 0.32); --ino-overlay-bg: rgba(0, 0, 0, 0.65); } /* Respect user preference when no explicit theme has been chosen */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { --ino-bg: #0f172a; --ino-surface: #1e293b; --ino-surface-alt: #263447; --ino-border: #334155; --ino-border-strong: #475569; --ino-text: #f1f5f9; --ino-text-muted: #94a3b8; --ino-text-inverse: #0f172a; --ino-accent: #4a97b0; --ino-accent-hover: #5fb0c9; --ino-accent-soft: #1e3a45; --ino-accent-strong: #7cc2d6; --ino-success: #22c55e; --ino-success-soft: #052e16; --ino-warning: #f59e0b; --ino-warning-soft: #3a2a05; --ino-danger: #ef4444; --ino-danger-soft: #3a0a0a; --ino-info: #3b82f6; --ino-info-soft: #0b2545; --ino-warm: #f4a82a; --ino-warm-soft: #3a2a05; --ino-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --ino-shadow-md: 0 2px 6px rgba(0, 0, 0, 0.5); --ino-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.6); --ino-focus-ring: 0 0 0 3px rgba(74, 151, 176, 0.32); --ino-overlay-bg: rgba(0, 0, 0, 0.65); } } /* Smooth theme transitions (skip on first paint to avoid flash) */ html.ino-theme-ready, html.ino-theme-ready body, html.ino-theme-ready * { transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease; }