/* ============================================================ EMA Design System — Design Tokens & Themes Themes: light (default), dark, navy, emerald Apply with: Density: ============================================================ */ :root { /* ---------- Primitive ramps ---------- */ /* Primary — Navy / Light Blue */ --ema-blue-50: #eef5fc; --ema-blue-100: #d9e9f9; --ema-blue-200: #b3d2f2; --ema-blue-300: #84b5e8; --ema-blue-400: #5495db; --ema-blue-500: #2f78c9; --ema-blue-600: #1f5fa8; --ema-blue-700: #1a4c87; --ema-blue-800: #173f6e; --ema-blue-900: #122f52; --ema-blue-950: #0b1f38; /* Secondary — Green */ --ema-green-50: #ecfaf2; --ema-green-100: #d2f4e0; --ema-green-200: #a6e8c3; --ema-green-300: #6ed69e; --ema-green-400: #3bbf7a; --ema-green-500: #1fa866; --ema-green-600: #178a53; --ema-green-700: #146e44; --ema-green-800: #115737; --ema-green-900: #0d4029; /* Neutrals (cool, blue-tinted) */ --ema-gray-0: #ffffff; --ema-gray-50: #f7f9fc; --ema-gray-100: #eef2f7; --ema-gray-200: #e1e8f0; --ema-gray-300: #cbd6e2; --ema-gray-400: #9fb0c3; --ema-gray-500: #71839b; --ema-gray-600: #51637b; --ema-gray-700: #3b4b60; --ema-gray-800: #283547; --ema-gray-900: #1a2433; --ema-gray-950: #101723; /* Status */ --ema-red-100: #fde3e3; --ema-red-500: #dc4646; --ema-red-600: #c23434; --ema-red-700: #a02828; --ema-amber-100:#fdf0d5; --ema-amber-500:#e8a213; --ema-amber-600:#c4880b; --ema-amber-700: #9a6c08; --ema-cyan-100: #d8f3f8; --ema-cyan-500: #0e9fbe; --ema-cyan-600: #0a7f99; /* ---------- Typography ---------- */ --ema-font-sans: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; --ema-font-mono: "Cascadia Code", "JetBrains Mono", Consolas, "SF Mono", monospace; --ema-text-xs: 0.75rem; /* 12 */ --ema-text-sm: 0.8125rem; /* 13 */ --ema-text-md: 0.875rem; /* 14 — base UI size (tight UX) */ --ema-text-lg: 1rem; /* 16 */ --ema-text-xl: 1.25rem; /* 20 */ --ema-text-2xl: 1.5rem; /* 24 */ --ema-text-3xl: 1.875rem; /* 30 */ --ema-font-regular: 400; --ema-font-medium: 500; --ema-font-semibold:600; --ema-font-bold: 700; --ema-leading-tight: 1.25; --ema-leading-normal: 1.5; /* ---------- Spacing (4px base, tight) ---------- */ --ema-sp-1: 0.25rem; --ema-sp-2: 0.5rem; --ema-sp-3: 0.75rem; --ema-sp-4: 1rem; --ema-sp-5: 1.25rem; --ema-sp-6: 1.5rem; --ema-sp-8: 2rem; --ema-sp-10: 2.5rem; --ema-sp-12: 3rem; /* ---------- Control sizing ---------- */ --ema-control-h-sm: 1.75rem; /* 28 */ --ema-control-h-md: 2.125rem; /* 34 — default, tight */ --ema-control-h-lg: 2.5rem; /* 40 */ --ema-control-px: 0.625rem; /* ---------- Radii (default: SHARP — see data-radius modes below) ---------- */ --ema-radius-xs: 0px; --ema-radius-sm: 0px; --ema-radius-md: 0px; --ema-radius-lg: 0px; --ema-radius-xl: 0px; --ema-radius-full: 999px; /* semantic "pill/circle" — kept round in all modes */ /* ---------- Motion ---------- */ --ema-ease: cubic-bezier(0.4, 0, 0.2, 1); --ema-ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ema-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --ema-dur-fast: 120ms; --ema-dur-med: 200ms; --ema-dur-slow: 320ms; /* ---------- Z-index ---------- */ --ema-z-sticky: 100; --ema-z-dropdown: 1000; --ema-z-drawer: 1100; --ema-z-modal: 1200; --ema-z-toast: 1300; --ema-z-tooltip: 1400; } /* ============================================================ SEMANTIC TOKENS — LIGHT (default) ============================================================ */ :root, [data-theme="light"] { color-scheme: light; --ema-primary: var(--ema-blue-600); --ema-primary-hover: var(--ema-blue-700); --ema-primary-active: var(--ema-blue-800); --ema-primary-soft: var(--ema-blue-50); --ema-primary-soft-2: var(--ema-blue-100); --ema-primary-border: var(--ema-blue-300); --ema-on-primary: #ffffff; --ema-secondary: var(--ema-green-600); --ema-secondary-hover: var(--ema-green-700); --ema-secondary-active: var(--ema-green-800); --ema-secondary-soft: var(--ema-green-50); --ema-secondary-soft-2: var(--ema-green-100); --ema-on-secondary: #ffffff; --ema-bg: var(--ema-gray-50); --ema-surface: var(--ema-gray-0); --ema-surface-2: var(--ema-gray-50); --ema-surface-3: var(--ema-gray-100); --ema-overlay: rgba(16, 23, 35, 0.45); --ema-border: var(--ema-gray-200); --ema-border-strong: var(--ema-gray-300); --ema-text: var(--ema-gray-900); --ema-text-2: var(--ema-gray-600); --ema-text-3: var(--ema-gray-500); --ema-text-disabled: var(--ema-gray-400); --ema-danger: var(--ema-red-600); --ema-danger-hover: var(--ema-red-700); --ema-danger-soft: var(--ema-red-100); --ema-warning: var(--ema-amber-600); --ema-warning-soft: var(--ema-amber-100); --ema-success: var(--ema-green-600); --ema-success-soft: var(--ema-green-100); --ema-info: var(--ema-cyan-600); --ema-info-soft: var(--ema-cyan-100); --ema-focus-ring: 0 0 0 3px color-mix(in srgb, var(--ema-primary) 25%, transparent); --ema-shadow-sm: 0 1px 2px rgba(18, 47, 82, 0.06), 0 1px 3px rgba(18, 47, 82, 0.08); --ema-shadow-md: 0 4px 12px rgba(18, 47, 82, 0.10), 0 2px 4px rgba(18, 47, 82, 0.06); --ema-shadow-lg: 0 12px 32px rgba(18, 47, 82, 0.16), 0 4px 8px rgba(18, 47, 82, 0.08); --ema-shadow-xl: 0 24px 56px rgba(18, 47, 82, 0.22), 0 8px 16px rgba(18, 47, 82, 0.10); --ema-grid-header-bg: var(--ema-gray-50); --ema-grid-row-hover: color-mix(in srgb, var(--ema-blue-50) 60%, var(--ema-surface)); --ema-grid-row-selected: var(--ema-blue-50); --ema-grid-stripe: var(--ema-gray-50); } /* ============================================================ DARK ============================================================ */ [data-theme="dark"] { color-scheme: dark; --ema-primary: var(--ema-blue-400); --ema-primary-hover: var(--ema-blue-300); --ema-primary-active: var(--ema-blue-200); --ema-primary-soft: rgba(84, 149, 219, 0.12); --ema-primary-soft-2: rgba(84, 149, 219, 0.22); --ema-primary-border: rgba(84, 149, 219, 0.45); --ema-on-primary: var(--ema-gray-950); --ema-secondary: var(--ema-green-400); --ema-secondary-hover: var(--ema-green-300); --ema-secondary-active: var(--ema-green-200); --ema-secondary-soft: rgba(59, 191, 122, 0.12); --ema-secondary-soft-2: rgba(59, 191, 122, 0.22); --ema-on-secondary: var(--ema-gray-950); --ema-bg: #0d131d; --ema-surface: #151d2a; --ema-surface-2: #1b2535; --ema-surface-3: #232f42; --ema-overlay: rgba(2, 6, 12, 0.62); --ema-border: #2a3750; --ema-border-strong: #3a4a68; --ema-text: #e8eef6; --ema-text-2: #a3b2c7; --ema-text-3: #7d8ca3; --ema-text-disabled: #51637b; --ema-danger: #ef6b6b; --ema-danger-hover: #f28b8b; --ema-danger-soft: rgba(220, 70, 70, 0.16); --ema-warning: #f0b340; --ema-warning-soft: rgba(232, 162, 19, 0.16); --ema-success: var(--ema-green-400); --ema-success-soft: rgba(59, 191, 122, 0.16); --ema-info: #3fc0de; --ema-info-soft: rgba(14, 159, 190, 0.16); --ema-focus-ring: 0 0 0 3px color-mix(in srgb, var(--ema-primary) 35%, transparent); --ema-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.35); --ema-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.3); --ema-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5), 0 4px 8px rgba(0, 0, 0, 0.35); --ema-shadow-xl: 0 24px 56px rgba(0, 0, 0, 0.6), 0 8px 16px rgba(0, 0, 0, 0.4); --ema-grid-header-bg: #1b2535; --ema-grid-row-hover: rgba(84, 149, 219, 0.08); --ema-grid-row-selected: rgba(84, 149, 219, 0.16); --ema-grid-stripe: rgba(255, 255, 255, 0.02); } /* ============================================================ NAVY — deep navy surfaces, luminous blue accents ============================================================ */ [data-theme="navy"] { color-scheme: dark; --ema-primary: #6db3f2; --ema-primary-hover: #8cc4f6; --ema-primary-active: #abd5fa; --ema-primary-soft: rgba(109, 179, 242, 0.12); --ema-primary-soft-2: rgba(109, 179, 242, 0.22); --ema-primary-border: rgba(109, 179, 242, 0.45); --ema-on-primary: #081526; --ema-secondary: #4ed598; --ema-secondary-hover: #71e0ab; --ema-secondary-active: #94eabf; --ema-secondary-soft: rgba(78, 213, 152, 0.12); --ema-secondary-soft-2: rgba(78, 213, 152, 0.22); --ema-on-secondary: #081526; --ema-bg: #0a1626; --ema-surface: #102036; --ema-surface-2: #152843; --ema-surface-3: #1b3252; --ema-overlay: rgba(3, 9, 18, 0.66); --ema-border: #224066; --ema-border-strong: #2e527f; --ema-text: #e6f0fb; --ema-text-2: #9db8d6; --ema-text-3: #7494b8; --ema-text-disabled: #4a6a90; --ema-danger: #f17878; --ema-danger-hover: #f49a9a; --ema-danger-soft: rgba(220, 70, 70, 0.18); --ema-warning: #f2bb4d; --ema-warning-soft: rgba(232, 162, 19, 0.18); --ema-success: #4ed598; --ema-success-soft: rgba(78, 213, 152, 0.18); --ema-info: #54cbe8; --ema-info-soft: rgba(14, 159, 190, 0.18); --ema-focus-ring: 0 0 0 3px rgba(109, 179, 242, 0.35); --ema-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35), 0 1px 3px rgba(0, 0, 0, 0.4); --ema-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45), 0 2px 4px rgba(0, 0, 0, 0.35); --ema-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.55), 0 4px 8px rgba(0, 0, 0, 0.4); --ema-shadow-xl: 0 24px 56px rgba(0, 0, 0, 0.65), 0 8px 16px rgba(0, 0, 0, 0.45); --ema-grid-header-bg: #152843; --ema-grid-row-hover: rgba(109, 179, 242, 0.08); --ema-grid-row-selected: rgba(109, 179, 242, 0.16); --ema-grid-stripe: rgba(255, 255, 255, 0.025); } /* ============================================================ EMERALD — light theme with green-forward accents ============================================================ */ [data-theme="emerald"] { color-scheme: light; --ema-primary: var(--ema-green-600); --ema-primary-hover: var(--ema-green-700); --ema-primary-active: var(--ema-green-800); --ema-primary-soft: var(--ema-green-50); --ema-primary-soft-2: var(--ema-green-100); --ema-primary-border: var(--ema-green-300); --ema-on-primary: #ffffff; --ema-secondary: var(--ema-blue-600); --ema-secondary-hover: var(--ema-blue-700); --ema-secondary-active: var(--ema-blue-800); --ema-secondary-soft: var(--ema-blue-50); --ema-secondary-soft-2: var(--ema-blue-100); --ema-on-secondary: #ffffff; --ema-bg: #f4faf6; --ema-surface: #ffffff; --ema-surface-2: #f2f8f4; --ema-surface-3: #e7f2ea; --ema-overlay: rgba(13, 64, 41, 0.45); --ema-border: #dbe8de; --ema-border-strong: #c2d8c8; --ema-text: #15291d; --ema-text-2: #4c6354; --ema-text-3: #6d8276; --ema-text-disabled: #a4b8aa; --ema-danger: var(--ema-red-600); --ema-danger-hover: var(--ema-red-700); --ema-danger-soft: var(--ema-red-100); --ema-warning: var(--ema-amber-600); --ema-warning-soft: var(--ema-amber-100); --ema-success: var(--ema-green-600); --ema-success-soft: var(--ema-green-100); --ema-info: var(--ema-cyan-600); --ema-info-soft: var(--ema-cyan-100); --ema-focus-ring: 0 0 0 3px color-mix(in srgb, var(--ema-primary) 25%, transparent); --ema-shadow-sm: 0 1px 2px rgba(13, 64, 41, 0.06), 0 1px 3px rgba(13, 64, 41, 0.08); --ema-shadow-md: 0 4px 12px rgba(13, 64, 41, 0.10), 0 2px 4px rgba(13, 64, 41, 0.06); --ema-shadow-lg: 0 12px 32px rgba(13, 64, 41, 0.16), 0 4px 8px rgba(13, 64, 41, 0.08); --ema-shadow-xl: 0 24px 56px rgba(13, 64, 41, 0.22), 0 8px 16px rgba(13, 64, 41, 0.10); --ema-grid-header-bg: #f2f8f4; --ema-grid-row-hover: color-mix(in srgb, var(--ema-green-50) 60%, var(--ema-surface)); --ema-grid-row-selected: var(--ema-green-50); --ema-grid-stripe: #f7fbf8; } /* ============================================================ CORNER RADIUS MODES Default (no attribute / data-radius="sharp"): sharp edges. slightly softened corners fully rounded corners ============================================================ */ [data-radius="subtle"] { --ema-radius-xs: 2px; --ema-radius-sm: 3px; --ema-radius-md: 4px; --ema-radius-lg: 6px; --ema-radius-xl: 8px; } [data-radius="rounded"] { --ema-radius-xs: 4px; --ema-radius-sm: 6px; --ema-radius-md: 8px; --ema-radius-lg: 12px; --ema-radius-xl: 16px; } /* ============================================================ DENSITY MODES Default (no attribute / data-density="tight"): tight, dense UI. even denser (data-heavy screens) relaxed controls spacious, touch-friendly ============================================================ */ [data-density="compact"] { --ema-control-h-sm: 1.5rem; --ema-control-h-md: 1.875rem; --ema-control-h-lg: 2.25rem; --ema-text-md: 0.8125rem; --ema-sp-3: 0.5rem; --ema-sp-4: 0.75rem; } [data-density="medium"], [data-density="comfortable"] { /* "comfortable" kept as legacy alias */ --ema-control-h-sm: 2rem; --ema-control-h-md: 2.5rem; --ema-control-h-lg: 2.875rem; --ema-text-md: 0.9375rem; } [data-density="large"] { --ema-control-h-sm: 2.25rem; --ema-control-h-md: 2.75rem; --ema-control-h-lg: 3.125rem; --ema-text-md: 1rem; --ema-sp-3: 1rem; --ema-sp-4: 1.25rem; } /* ============================================================ REDUCED MOTION ============================================================ */ @media (prefers-reduced-motion: reduce) { :root { --ema-dur-fast: 0ms; --ema-dur-med: 0ms; --ema-dur-slow: 0ms; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }