/* ========================================================================== VARIABLES.CSS - Design Token System University Portal (Dogus University) Complete CSS custom properties for light (default) and dark themes. ========================================================================== */ :root { /* ------------------------------------------------------------------ BRAND / PRIMARY ------------------------------------------------------------------ */ --du-primary: #BB2222; --du-primary-dark: #8B1A1A; --du-primary-light: #D94444; --du-primary-subtle: #FDEAEA; --du-primary-rgb: 187, 34, 34; /* ------------------------------------------------------------------ SURFACE / BACKGROUND ------------------------------------------------------------------ */ --du-bg-page: #F5F6FA; --du-bg-card: #FFFFFF; --du-bg-sidebar: #1E1E2D; --du-bg-input: #FFFFFF; --du-bg-hover: #F0F1F5; /* ------------------------------------------------------------------ TEXT ------------------------------------------------------------------ */ --du-text-primary: #1A1A2E; --du-text-secondary: #6B7280; --du-text-muted: #9CA3AF; --du-text-inverse: #FFFFFF; --du-text-on-primary:#FFFFFF; /* ------------------------------------------------------------------ BORDERS ------------------------------------------------------------------ */ --du-border-color: #E5E7EB; --du-border-light: #F3F4F6; --du-border-dark: #D1D5DB; /* ------------------------------------------------------------------ SEMANTIC / STATUS ------------------------------------------------------------------ */ --du-success: #22BB55; --du-success-light: #E8F9EF; --du-success-dark: #1A8F42; --du-warning: #DDAA22; --du-warning-light: #FDF6E3; --du-warning-dark: #B8901C; --du-danger: #CC3333; --du-danger-light: #FDEAEA; --du-danger-dark: #A32929; --du-info: #2266BB; --du-info-light: #E8F0FA; --du-info-dark: #1A4F8F; /* ------------------------------------------------------------------ MODULE-SPECIFIC ------------------------------------------------------------------ */ --du-mod-obs: #22BB55; --du-mod-obs-light: #E8F9EF; --du-mod-online: #2266BB; --du-mod-online-light: #E8F0FA; --du-mod-pos: #BB2222; --du-mod-pos-light: #FDEAEA; --du-mod-mail: #6B7280; --du-mod-mail-light: #F3F4F6; --du-mod-announce: #DDAA22; --du-mod-announce-light:#FDF6E3; --du-mod-campus: #9B59B6; --du-mod-campus-light: #F3ECF7; --du-mod-support: #E67E22; --du-mod-support-light: #FDF0E3; /* ------------------------------------------------------------------ TYPOGRAPHY ------------------------------------------------------------------ */ --du-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif; --du-font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', Consolas, 'Courier New', monospace; /* Font sizes */ --du-text-xs: 0.75rem; /* 12px */ --du-text-sm: 0.8125rem; /* 13px */ --du-text-base: 0.875rem; /* 14px */ --du-text-md: 1rem; /* 16px */ --du-text-lg: 1.125rem; /* 18px */ --du-text-xl: 1.25rem; /* 20px */ --du-text-2xl: 1.5rem; /* 24px */ --du-text-3xl: 1.875rem; /* 30px */ /* Font weights */ --du-weight-normal: 400; --du-weight-medium: 500; --du-weight-semibold: 600; --du-weight-bold: 700; /* Line heights */ --du-leading-tight: 1.25; --du-leading-normal: 1.5; --du-leading-loose: 1.75; /* ------------------------------------------------------------------ SPACING SCALE ------------------------------------------------------------------ */ --du-space-1: 0.25rem; /* 4px */ --du-space-2: 0.5rem; /* 8px */ --du-space-3: 0.75rem; /* 12px */ --du-space-4: 1rem; /* 16px */ --du-space-5: 1.25rem; /* 20px */ --du-space-6: 1.5rem; /* 24px */ --du-space-7: 1.75rem; /* 28px */ --du-space-8: 2rem; /* 32px */ --du-space-9: 2.25rem; /* 36px */ --du-space-10: 2.5rem; /* 40px */ --du-space-11: 2.75rem; /* 44px */ --du-space-12: 3rem; /* 48px */ /* ------------------------------------------------------------------ BORDER RADIUS ------------------------------------------------------------------ */ --du-radius-sm: 0.25rem; /* 4px */ --du-radius-md: 0.5rem; /* 8px */ --du-radius-lg: 0.75rem; /* 12px */ --du-radius-xl: 1rem; /* 16px */ --du-radius-2xl: 1.5rem; /* 24px */ --du-radius-full: 9999px; /* ------------------------------------------------------------------ SHADOWS ------------------------------------------------------------------ */ --du-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04); --du-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04); --du-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.06), 0 2px 4px rgba(0, 0, 0, 0.04); --du-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.08), 0 4px 6px rgba(0, 0, 0, 0.04); --du-shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.10), 0 8px 10px rgba(0, 0, 0, 0.04); --du-shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.05); /* ------------------------------------------------------------------ TRANSITIONS ------------------------------------------------------------------ */ --du-transition-fast: 150ms ease; --du-transition-base: 200ms ease; --du-transition-normal: 300ms ease; --du-transition-slow: 500ms ease; /* ------------------------------------------------------------------ LAYOUT DIMENSIONS ------------------------------------------------------------------ */ --du-sidebar-width: 260px; --du-sidebar-collapsed: 72px; --du-topbar-height: 64px; --du-content-max-width: 1200px; /* ------------------------------------------------------------------ Z-INDEX SCALE ------------------------------------------------------------------ */ --du-z-dropdown: 50; --du-z-sticky: 60; --du-z-sidebar: 100; --du-z-topbar: 90; --du-z-overlay: 200; --du-z-modal: 300; --du-z-toast: 400; --du-z-tooltip: 500; /* ------------------------------------------------------------------ FOCUS RING ------------------------------------------------------------------ */ --du-focus-ring: 0 0 0 3px rgba(var(--du-primary-rgb), 0.3); } /* ====================================================================== DARK THEME ====================================================================== */ [data-theme="dark"] { /* Surfaces */ --du-bg-page: #0F0F1A; --du-bg-card: #1A1A2E; --du-bg-sidebar: #12121F; --du-bg-input: #252540; --du-bg-hover: #252540; /* Text */ --du-text-primary: #E5E5F0; --du-text-secondary: #9CA3BD; --du-text-muted: #6B7299; --du-text-inverse: #1A1A2E; /* Borders */ --du-border-color: #2A2A42; --du-border-light: #22223A; --du-border-dark: #3A3A55; /* Semantic - slightly adjusted for dark readability */ --du-primary-subtle: rgba(187, 34, 34, 0.15); --du-success-light: rgba(34, 187, 85, 0.12); --du-warning-light: rgba(221, 170, 34, 0.12); --du-danger-light: rgba(204, 51, 51, 0.12); --du-info-light: rgba(34, 102, 187, 0.12); /* Module lights - adjusted for dark */ --du-mod-obs-light: rgba(34, 187, 85, 0.12); --du-mod-online-light: rgba(34, 102, 187, 0.12); --du-mod-pos-light: rgba(187, 34, 34, 0.12); --du-mod-mail-light: rgba(107, 114, 128, 0.12); --du-mod-announce-light: rgba(221, 170, 34, 0.12); --du-mod-campus-light: rgba(155, 89, 182, 0.12); --du-mod-support-light: rgba(230, 126, 34, 0.12); /* Shadows - deeper for dark theme */ --du-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.20); --du-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.20); --du-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.30), 0 2px 4px rgba(0, 0, 0, 0.20); --du-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.35), 0 4px 6px rgba(0, 0, 0, 0.20); --du-shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.40), 0 8px 10px rgba(0, 0, 0, 0.20); --du-shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.25); /* Focus ring - brighter in dark mode */ --du-focus-ring: 0 0 0 3px rgba(var(--du-primary-rgb), 0.45); }