/** * RHOBIMD Design System * Based on Siemens IX Classic Light with RHOBIMD variant tokens * * Primary Color: Teal (#00333d) * Reference: docs/design-system/README.md */ :root { /* ======================================== PRIMARY COLORS (Teal) ======================================== */ --color-primary: #00333d; --color-primary--hover: #002830; --color-primary--active: #001e24; --color-primary--disabled: rgba(0, 51, 61, 0.3); --color-primary--contrast: #ffffff; --color-primary--light: #d8e6e9; /* ======================================== DYNAMIC/ACCENT COLORS (Teal/Cyan) ======================================== */ --color-dynamic: #005e66; --color-dynamic--hover: #0f5157; --color-dynamic--active: #0e494e; --color-dynamic-alt: #00eaff; --color-dynamic-alt--hover: #62e2ee; /* ======================================== STATUS COLORS - SUCCESS (Green) ======================================== */ --color-success: #2c8500; --color-success--hover: #277500; --color-success--active: #246b00; --color-success--contrast: #ffffff; --color-component-success: #e8f5e0; /* ======================================== STATUS COLORS - WARNING (Amber) ======================================== */ --color-warning: #ffbb00; --color-warning--hover: #ffc533; --color-warning--contrast: #000000; --color-warning-text: #947100; --color-component-warning: #ffe8a8; /* ======================================== STATUS COLORS - ALARM (Red) ======================================== */ --color-alarm: #d72332; --color-alarm--hover: #c11f2d; --color-alarm--active: #b41d2a; --color-alarm--contrast: #ffffff; --color-alarm-text: #b81e3f; --color-component-error: #fcccd0; /* ======================================== STATUS COLORS - INFO (Blue) ======================================== */ --color-info: #0041b2; --color-info--hover: #003a9e; --color-info--contrast: #ffffff; --color-component-info: #ccdefc; /* ======================================== STATUS COLORS - NEUTRAL (Gray) ======================================== */ --color-neutral: #66727e; --color-neutral--active: #545e68; --color-neutral--contrast: #ffffff; /* ======================================== SURFACE COLORS ======================================== */ --color-surface: #ffffff; --color-surface-1: #ffffff; --color-surface-2: #eff0f1; --color-surface-3: #e2e4e6; --color-surface-4: #d8dadd; --color-surface-5: #cfd2d5; /* ======================================== TEXT COLORS ======================================== */ --color-text-primary: rgba(0, 10, 20, 0.9); --color-text-secondary: rgba(0, 10, 20, 0.6); --color-text-muted: rgba(0, 10, 20, 0.4); --color-text-disabled: rgba(0, 10, 20, 0.3); --color-text-inverse: #ffffff; /* ======================================== BORDER COLORS ======================================== */ --color-border: rgba(0, 20, 40, 0.3); --color-border-soft: rgba(0, 20, 40, 0.2); --color-border-weak: rgba(35, 48, 60, 0.15); --color-border-hard: #b2b8be; --color-border-focus: #199fff; /* ======================================== GHOST/TRANSPARENT STATES ======================================== */ --color-ghost: transparent; --color-ghost--hover: rgba(168, 173, 179, 0.2); --color-ghost--active: rgba(168, 173, 179, 0.3); --color-ghost--selected: rgba(0, 234, 255, 0.2); /* ======================================== COMPONENT BACKGROUNDS ======================================== */ --color-component-1: rgba(168, 173, 179, 0.2); --color-component-1--hover: rgba(168, 173, 179, 0.15); --color-component-8: #ebf7f8; --color-component-8--hover: #d1fbff; /* ======================================== TYPOGRAPHY ======================================== */ --font-family-base: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; /* Font Sizes */ --text-xs: 0.625rem; /* 10px */ --text-sm: 0.75rem; /* 12px */ --text-base: 0.875rem; /* 14px */ --text-lg: 1rem; /* 16px */ --text-xl: 1.125rem; /* 18px */ --text-2xl: 1.25rem; /* 20px */ --text-3xl: 1.5rem; /* 24px */ --text-4xl: 2rem; /* 32px */ --text-5xl: 2.5rem; /* 40px */ /* Font Weights */ --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; /* ======================================== SPACING (8px base unit) ======================================== */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-16: 4rem; /* 64px */ --space-20: 5rem; /* 80px */ /* ======================================== SHADOW ELEVATION ======================================== */ --shadow-elevation-1: 0 2px 2px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.1); --shadow-elevation-2: -4px 0 8px 0 rgba(0, 0, 0, 0.2), 4px 0 8px 0 rgba(0, 0, 0, 0.2), 0 0 16px 0 rgba(0, 0, 0, 0.1); --shadow-elevation-3: 0 2px 6px 0 rgba(0, 0, 0, 0.2), 0 0 8px 0 rgba(0, 0, 0, 0.1); --shadow-elevation-4: 0 0 2px 0 rgba(0, 0, 0, 0.2), 0 4px 8px 0 rgba(0, 0, 0, 0.1), 0 12px 18px 0 rgba(0, 0, 0, 0.1); --shadow-inset: inset 0 2px 4px 0 rgba(0, 0, 0, 0.1); /* ======================================== BORDER RADIUS ======================================== */ --radius-sm: 0.25rem; /* 4px */ --radius-md: 0.5rem; /* 8px */ --radius-lg: 0.75rem; /* 12px */ --radius-xl: 1rem; /* 16px */ --radius-full: 9999px; /* ======================================== TRANSITIONS ======================================== */ --transition-fast: 150ms ease; --transition-base: 200ms ease; /* ======================================== Z-INDEX SCALE ======================================== */ --z-dropdown: 100; --z-sticky: 200; --z-fixed: 300; --z-modal-backdrop: 400; --z-modal: 500; } /* ======================================== CSS RESET ======================================== */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: var(--font-family-base); font-size: var(--text-base); line-height: 1.6; color: var(--color-text-primary); background: var(--color-surface-1); } /* ======================================== FOCUS STYLES (Accessibility) ======================================== */ :focus-visible { outline: 2px solid var(--color-border-focus); outline-offset: 2px; } /* ======================================== IMAGE DEFAULTS ======================================== */ img { max-width: 100%; height: auto; display: block; }