/* ============================================================================= ST Courier ERP Demo — design tokens ----------------------------------------------------------------------------- Every colour, spacing, radius, shadow, font and z-index used by app.css, print.css, ui.js and charts.js lives here. Light theme is the default on :root. Dark theme is applied in two ways (see §17 of the contract): 1. explicit -> 2. automatic -> prefers-color-scheme: dark, guarded by :root:not([data-theme="light"]) so an explicit light choice always wins. ============================================================================= */ :root { color-scheme: light; /* ---- Brand ------------------------------------------------------------- */ --primary: #0c2454; /* logo navy — buttons, active nav */ --primary-hover: #163a7a; --primary-active: #081a3d; --primary-soft: #e8edf6; /* soft tint for chips / active nav */ --primary-contrast: #ffffff; --accent: #f06000; /* logo orange — highlights and key actions */ --accent-hover: #d15400; --accent-soft: #fdeee1; /* ---- Surfaces ---------------------------------------------------------- */ --bg: #f7f8fa; /* page background (very light grey) */ --surface: #ffffff; /* cards, tables, panels */ --surface-2: #f3f5f8; /* table heads, toolbars, subtle wells */ --surface-3: #e9edf2; /* hover rows, code, pressed */ --surface-inverse: #111827; /* tooltips, phone bezel */ --border: #e0e4ea; --border-strong: #c4cbd4; /* ---- Text -------------------------------------------------------------- */ --text: #1a1f27; --text-muted: #5b6573; --text-faint: #8a94a3; --text-inverse: #ffffff; /* ---- Semantic tones (strong colour + soft background + readable text) -- */ --success: #3c9c30; --success-soft: #eaf6e6; --success-text: #2c7522; --warning: #b45309; --warning-soft: #fdf1dc; --warning-text: #92400e; --danger: #dc2626; --danger-soft: #fdeaea; --danger-text: #b42318; --info: #1d4ed8; --info-soft: #e7eefc; --info-text: #1e40af; --neutral: #6b7280; --neutral-soft: #eef0f3; --neutral-text: #4b5563; --primary-text: #0c2454; --accent-text: #b34700; /* ---- Radii / shadows --------------------------------------------------- */ --radius-sm: 6px; --radius: 8px; --radius-lg: 12px; --radius-pill: 999px; --shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.05); --shadow: 0 1px 3px rgba(16, 24, 40, 0.08), 0 1px 2px rgba(16, 24, 40, 0.04); --shadow-md: 0 4px 12px rgba(16, 24, 40, 0.10), 0 2px 4px rgba(16, 24, 40, 0.05); --shadow-lg: 0 16px 40px rgba(16, 24, 40, 0.16), 0 4px 10px rgba(16, 24, 40, 0.06); --focus: 0 0 0 3px rgba(15, 76, 129, 0.28); --focus-danger: 0 0 0 3px rgba(220, 38, 38, 0.28); /* ---- Typography -------------------------------------------------------- */ --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Inter, Roboto, 'Noto Sans Tamil', 'Helvetica Neue', Arial, sans-serif; --mono: ui-monospace, 'SF Mono', Menlo, Consolas, 'Roboto Mono', 'Liberation Mono', monospace; --fs-xs: 11px; --fs-sm: 12px; --fs-base: 13px; --fs-md: 14px; --fs-lg: 16px; --fs-xl: 20px; --fs-2xl: 24px; --fs-3xl: 32px; --lh: 1.45; --lh-tight: 1.25; /* ---- Spacing scale (8px base) ------------------------------------------ */ --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; /* ---- Layout ------------------------------------------------------------ */ --sidebar-w: 248px; --sidebar-w-collapsed: 64px; --topbar-h: 56px; --help-w: 360px; --main-pad: 20px; --row-h: 36px; /* dense table row */ --control-h: 34px; /* buttons, inputs */ --control-h-sm: 28px; --control-h-lg: 42px; --transition: 120ms cubic-bezier(0.2, 0, 0, 1); --transition-slow: 220ms cubic-bezier(0.2, 0, 0, 1); /* ---- Z-index scale ----------------------------------------------------- */ --z-sticky: 10; --z-topbar: 30; --z-help: 35; --z-sidebar: 40; --z-dropdown: 50; --z-drawer: 100; --z-modal: 110; --z-popover: 120; --z-toast: 130; --z-tour: 140; /* ---- Chart colours (8, colour-blind friendly, Okabe–Ito inspired) ------ */ --chart-1: #0f4c81; /* navy */ --chart-2: #e69f00; /* orange */ --chart-3: #009e73; /* bluish green */ --chart-4: #b8860b; /* gold */ --chart-5: #56b4e9; /* sky blue */ --chart-6: #cc79a7; /* reddish purple */ --chart-7: #6b7280; /* grey */ --chart-8: #d4b400; /* mustard */ --chart-axis: #c9cfd6; --chart-grid: #eceff2; --chart-text: #5b6573; --chart-tip-bg: #111827; --chart-tip-text: #ffffff; /* ---- Map ---------------------------------------------------------------- */ --map-water: #eaf1f7; --map-land: #f6f7f4; --map-land-stroke: #cfd6de; --map-grid: #e3e8ee; --map-road: #b8c2cc; } /* --------------------------------------------------------------------------- Dark theme — automatic (system) — only when the user has not chosen light. --------------------------------------------------------------------------- */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --primary: #5b86d6; --primary-hover: #7ba0e4; --primary-active: #3f6ec2; --primary-soft: rgba(91, 134, 214, 0.18); --primary-contrast: #ffffff; --accent: #ff8534; --accent-hover: #ff9d5c; --accent-soft: rgba(255, 133, 52, 0.16); --bg: #0f1419; --surface: #171d24; --surface-2: #1c232b; --surface-3: #242d37; --surface-inverse: #f3f4f6; --border: #2a333d; --border-strong: #3a4552; --text: #e6ebf0; --text-muted: #9aa7b5; --text-faint: #6b7887; --text-inverse: #111827; --success: #34c46a; --success-soft: rgba(52, 196, 106, 0.16); --success-text: #6fe09a; --warning: #f5a524; --warning-soft: rgba(245, 165, 36, 0.16); --warning-text: #fbc46a; --danger: #f25c5c; --danger-soft: rgba(242, 92, 92, 0.16); --danger-text: #ff8a8a; --info: #5b9bd5; --info-soft: rgba(91, 155, 213, 0.16); --info-text: #8fc0ea; --neutral: #8b95a3; --neutral-soft: rgba(139, 149, 163, 0.16); --neutral-text: #b6bfca; --primary-text: #ff6b80; --accent-text: #8fc0ea; --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.35); --shadow: 0 1px 3px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5), 0 2px 4px rgba(0, 0, 0, 0.3); --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.6), 0 4px 10px rgba(0, 0, 0, 0.4); --focus: 0 0 0 3px rgba(91, 155, 213, 0.4); --focus-danger: 0 0 0 3px rgba(242, 92, 92, 0.4); --chart-1: #5b9bd5; --chart-2: #f0b13b; --chart-3: #2fbf8f; --chart-4: #f25c5c; --chart-5: #7cc7f2; --chart-6: #d99ac3; --chart-7: #9aa7b5; --chart-8: #e0c53a; --chart-axis: #3a4552; --chart-grid: #232c35; --chart-text: #9aa7b5; --chart-tip-bg: #f3f4f6; --chart-tip-text: #111827; --map-water: #131a22; --map-land: #1c232b; --map-land-stroke: #3a4552; --map-grid: #222b34; --map-road: #3f4b58; } } /* --------------------------------------------------------------------------- Dark theme — explicit toggle (wins over the system preference). --------------------------------------------------------------------------- */ :root[data-theme="dark"] { color-scheme: dark; --primary: #5b86d6; --primary-hover: #7ba0e4; --primary-active: #3f6ec2; --primary-soft: rgba(91, 134, 214, 0.18); --primary-contrast: #ffffff; --accent: #ff8534; --accent-hover: #ff9d5c; --accent-soft: rgba(255, 133, 52, 0.16); --bg: #0f1419; --surface: #171d24; --surface-2: #1c232b; --surface-3: #242d37; --surface-inverse: #f3f4f6; --border: #2a333d; --border-strong: #3a4552; --text: #e6ebf0; --text-muted: #9aa7b5; --text-faint: #6b7887; --text-inverse: #111827; --success: #34c46a; --success-soft: rgba(52, 196, 106, 0.16); --success-text: #6fe09a; --warning: #f5a524; --warning-soft: rgba(245, 165, 36, 0.16); --warning-text: #fbc46a; --danger: #f25c5c; --danger-soft: rgba(242, 92, 92, 0.16); --danger-text: #ff8a8a; --info: #5b9bd5; --info-soft: rgba(91, 155, 213, 0.16); --info-text: #8fc0ea; --neutral: #8b95a3; --neutral-soft: rgba(139, 149, 163, 0.16); --neutral-text: #b6bfca; --primary-text: #ff6b80; --accent-text: #8fc0ea; --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.35); --shadow: 0 1px 3px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5), 0 2px 4px rgba(0, 0, 0, 0.3); --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.6), 0 4px 10px rgba(0, 0, 0, 0.4); --focus: 0 0 0 3px rgba(91, 155, 213, 0.4); --focus-danger: 0 0 0 3px rgba(242, 92, 92, 0.4); --chart-1: #5b9bd5; --chart-2: #f0b13b; --chart-3: #2fbf8f; --chart-4: #f25c5c; --chart-5: #7cc7f2; --chart-6: #d99ac3; --chart-7: #9aa7b5; --chart-8: #e0c53a; --chart-axis: #3a4552; --chart-grid: #232c35; --chart-text: #9aa7b5; --chart-tip-bg: #f3f4f6; --chart-tip-text: #111827; --map-water: #131a22; --map-land: #1c232b; --map-land-stroke: #3a4552; --map-grid: #222b34; --map-road: #3f4b58; } /* Reduced motion: keep the UI calm for people who asked for it. */ @media (prefers-reduced-motion: reduce) { :root { --transition: 0ms; --transition-slow: 0ms; } }