/* * Waleria Panel — Design Tokens * * Two themes: dark (default per system preference) and light. * Applied via data-theme="dark|light" on . * All components use these variables — change here to restyle globally. * * Color palette: * Brand: KSI red (#cc3333 dark / #aa0000 light) * Accent: blue for interactive elements * Semantic: success/warning/danger/info */ :root { /* ── Spacing scale ── */ --space-2xs: 0.25rem; /* 4px */ --space-xs: 0.5rem; /* 8px */ --space-sm: 0.75rem; /* 12px */ --space-md: 1rem; /* 16px */ --space-lg: 1.5rem; /* 24px */ --space-xl: 2rem; /* 32px */ --space-2xl: 3rem; /* 48px */ /* ── Typography ── */ --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', Consolas, monospace; --font-size-xs: 0.75rem; /* 12px */ --font-size-sm: 0.8125rem; /* 13px */ --font-size-md: 0.875rem; /* 14px */ --font-size-lg: 1rem; /* 16px */ --font-size-xl: 1.25rem; /* 20px */ --font-size-2xl: 1.5rem; /* 24px */ --font-size-3xl: 2rem; /* 32px */ --line-height: 1.5; /* ── Borders ── */ --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-xl: 12px; --radius-full: 9999px; /* ── Layout ── */ --header-height: 56px; --sidebar-width: 240px; --sidebar-collapsed: 56px; --content-max-width: 1200px; /* ── Transitions ── */ --transition-fast: 150ms ease; --transition-normal: 250ms ease; --transition-slow: 400ms ease; /* ── Z-index layers ── */ --z-sidebar: 100; --z-header: 200; --z-dropdown: 300; --z-tooltip: 400; --z-help-panel: 500; --z-popup: 600; --z-toast: 700; --z-job-monitor: 350; } /* ════════════════════════════════════════ * Dark Theme * ════════════════════════════════════════ */ [data-theme="dark"] { color-scheme: dark; /* Background layers (deeper → higher) */ --color-bg: #0d1117; --color-bg-surface: #161b22; --color-bg-elevated: #1c2128; --color-bg-hover: #21262d; --color-bg-active: #262c36; --color-bg-overlay: rgba(0, 0, 0, 0.6); /* Text */ --color-text: #e6edf3; --color-text-secondary:#8b949e; --color-text-disabled: #484f58; --color-text-inverse: #0d1117; --color-text-link: #58a6ff; /* Brand — KSI red */ --color-primary: #cc3333; --color-primary-hover: #e04040; --color-primary-active:#ff4444; --color-primary-text: #ffffff; --color-primary-subtle:#3d1015; /* Accent — blue interactive */ --color-accent: #58a6ff; --color-accent-hover: #79c0ff; --color-accent-text: #0d1117; --color-accent-subtle:#0c2d6b; /* Semantic colors */ --color-success: #3fb950; --color-success-subtle: #0d2818; --color-warning: #d29922; --color-warning-subtle: #2d1d00; --color-danger: #f85149; --color-danger-subtle: #3d0c0c; --color-info: #58a6ff; --color-info-subtle: #0c1d2e; /* Borders */ --color-border: #30363d; --color-border-hover: #484f58; --color-border-focus: #58a6ff; /* Inputs */ --color-input-bg: #0d1117; --color-input-border: #30363d; --color-input-focus: #161b22; /* Shadows */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-md: 0 3px 6px rgba(0, 0, 0, 0.4); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.6); /* Scrollbar */ --scrollbar-track: #161b22; --scrollbar-thumb: #30363d; --scrollbar-thumb-hover: #484f58; /* Logo variant */ --logo-filter: none; } /* ════════════════════════════════════════ * Light Theme * ════════════════════════════════════════ */ [data-theme="light"] { color-scheme: light; --color-bg: #f0f2f5; --color-bg-surface: #ffffff; --color-bg-elevated: #ffffff; --color-bg-hover: #eaeef2; --color-bg-active: #dde2e8; --color-bg-overlay: rgba(0, 0, 0, 0.4); --color-text: #1f2328; --color-text-secondary:#656d76; --color-text-disabled: #a8b1ba; --color-text-inverse: #ffffff; --color-text-link: #0969da; --color-primary: #aa0000; --color-primary-hover: #cc0000; --color-primary-active:#e00000; --color-primary-text: #ffffff; --color-primary-subtle:#ffebe9; --color-accent: #0969da; --color-accent-hover: #0550ae; --color-accent-text: #ffffff; --color-accent-subtle:#ddf4ff; --color-success: #1a7f37; --color-success-subtle: #dafbe1; --color-warning: #9a6700; --color-warning-subtle: #fff8c5; --color-danger: #d1242f; --color-danger-subtle: #ffebe9; --color-info: #0969da; --color-info-subtle: #ddf4ff; --color-border: #d1d9e0; --color-border-hover: #a8b1ba; --color-border-focus: #0969da; --color-input-bg: #ffffff; --color-input-border: #d1d9e0; --color-input-focus: #f6f8fa; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06); --shadow-md: 0 3px 6px rgba(0, 0, 0, 0.10); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.14); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.18); --scrollbar-track: #f0f2f5; --scrollbar-thumb: #c1c8cf; --scrollbar-thumb-hover: #a8b1ba; --logo-filter: none; }