/* ========================================================= AdventureNET — Design Tokens ========================================================= Autor: Negoiță Andreea Iuliana | Coordonator: conf.univ.dr. Toader Florentina Ce conține: Variabile CSS globale pentru întregul design system - Culori (primary, secondary, semantic) - Spacing scale - Typography scale - Border radius - Shadows - Z-index scale - Transitions ========================================================= */ :root { /* --------------------------------------------------------- Color Scheme --------------------------------------------------------- */ color-scheme: light dark; /* --------------------------------------------------------- Base Colors (Default - overridden by theme-tokens.css) Uses CSS custom property fallbacks for theme integration --------------------------------------------------------- */ --color-bg: #0b1220; --color-bg-card: rgba(var(--color-surface-rgb, 15, 23, 42), 0.92); --color-surface: rgba(var(--color-surface-rgb, 15, 23, 42), 0.72); --color-surface-2: rgba(var(--color-surface-rgb, 15, 23, 42), 0.92); --color-text: #e2e8f0; --color-text-muted: rgba(var(--color-text-rgb, 226, 232, 240), 0.72); --color-border: rgba(148, 163, 184, 0.22); --color-backdrop: rgba(var(--color-bg-rgb, 2, 6, 23), 0.55); /* --------------------------------------------------------- Brand Colors --------------------------------------------------------- */ --color-primary: #0ea5e9; --color-primary-rgb: 14, 165, 233; --color-primary-hover: #0284c7; --color-primary-light: rgba(14, 165, 233, 0.15); --color-secondary: #38bdf8; --color-secondary-rgb: 56, 189, 248; /* --------------------------------------------------------- Semantic Colors --------------------------------------------------------- */ --color-success: #22c55e; --color-success-rgb: 34, 197, 94; --color-success-light: rgba(34, 197, 94, 0.15); --color-success-glow: rgba(34, 197, 94, 0.4); --color-warning: #fbbf24; --color-warning-rgb: 251, 191, 36; --color-warning-light: rgba(251, 191, 36, 0.15); --color-danger: #fb7185; --color-danger-rgb: 251, 113, 133; --color-danger-light: rgba(251, 113, 133, 0.15); --color-info: #3b82f6; --color-info-rgb: 59, 130, 246; --color-info-light: rgba(59, 130, 246, 0.15); /* --------------------------------------------------------- Focus & Interactive States --------------------------------------------------------- */ --color-focus: color-mix(in srgb, var(--color-primary) 55%, transparent); --color-focus-ring: 0 0 0 3px var(--color-focus); /* --------------------------------------------------------- Spacing Scale (8px base) --------------------------------------------------------- */ --space-0: 0; --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 */ --space-24: 6rem; /* 96px */ /* --------------------------------------------------------- Typography Scale --------------------------------------------------------- */ --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; --font-mono: ui-monospace, 'SF Mono', Menlo, Monaco, 'Cascadia Mono', monospace; --text-xs: 0.75rem; /* 12px */ --text-sm: 0.875rem; /* 14px */ --text-base: 1rem; /* 16px */ --text-lg: 1.125rem; /* 18px */ --text-xl: 1.25rem; /* 20px */ --text-2xl: 1.5rem; /* 24px */ --text-3xl: 1.875rem; /* 30px */ --text-4xl: 2.25rem; /* 36px */ --text-5xl: 3rem; /* 48px */ --leading-tight: 1.25; --leading-normal: 1.5; --leading-relaxed: 1.625; --font-normal: 400; --font-medium: 500; --font-semibold: 600; --font-bold: 700; --font-extrabold: 800; /* --------------------------------------------------------- Border Radius --------------------------------------------------------- */ --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-2xl: 20px; --radius-3xl: 24px; --radius-full: 9999px; /* --------------------------------------------------------- Shadows --------------------------------------------------------- */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1); --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25); --shadow-card: 0 25px 50px -12px rgba(0, 0, 0, 0.5); --shadow-glow: 0 0 20px var(--color-success-glow); /* --------------------------------------------------------- Z-Index Scale --------------------------------------------------------- */ --z-dropdown: 100; --z-sticky: 200; --z-fixed: 300; --z-modal-backdrop: 400; --z-modal: 500; --z-popover: 600; --z-tooltip: 700; --z-toast: 800; --z-max: 999; /* --------------------------------------------------------- Transitions --------------------------------------------------------- */ --transition-fast: 150ms ease; --transition-base: 200ms ease; --transition-slow: 300ms ease; --transition-spring: 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55); /* --------------------------------------------------------- Scrollbar --------------------------------------------------------- */ --scrollbar-width: 6px; --scrollbar-track: rgba(0, 0, 0, 0.05); --scrollbar-thumb: rgba(100, 116, 139, 0.3); --scrollbar-thumb-hover: rgba(100, 116, 139, 0.5); /* --------------------------------------------------------- Safe Areas (PWA / iOS Notch) --------------------------------------------------------- */ --safe-area-top: env(safe-area-inset-top, 0px); --safe-area-bottom: env(safe-area-inset-bottom, 0px); --safe-area-left: env(safe-area-inset-left, 0px); --safe-area-right: env(safe-area-inset-right, 0px); /* --------------------------------------------------------- Icon Styling --------------------------------------------------------- */ --icon-stroke: 2; --icon-linecap: round; --icon-linejoin: round; /* --------------------------------------------------------- Legacy Aliases (for backwards compatibility) Mapping old variable names to new design tokens --------------------------------------------------------- */ /* Color Aliases */ --primary: var(--color-primary); --secondary: var(--color-secondary); --success: var(--color-success); --warning: var(--color-warning); --danger: var(--color-danger); --info: var(--color-info); /* Text Aliases */ --text-primary: var(--color-text); --text-secondary: var(--color-text-muted); /* Background Aliases */ --bg-primary: var(--color-bg); --bg-card: var(--color-bg-card); --bg-surface: var(--color-surface); /* --------------------------------------------------------- Error Page Theme Tokens (401, 403, 404, etc.) --------------------------------------------------------- */ --error-bg: #0f0f23; --error-card: rgba(30, 30, 60, 0.7); --error-border: rgba(34, 197, 94, 0.25); --error-accent: var(--color-success); --error-accent-glow: var(--color-success-glow); } /* --------------------------------------------------------- Light Mode Overrides (Legacy - now handled by theme-tokens.css) Kept for backwards compatibility with data-mode attribute --------------------------------------------------------- */ [data-mode="light"] { --color-bg: #f8fafc; --color-bg-card: rgba(var(--color-surface-rgb, 255, 255, 255), 0.92); --color-surface: rgba(var(--color-surface-rgb, 255, 255, 255), 0.72); --color-surface-2: rgba(var(--color-surface-rgb, 255, 255, 255), 0.92); --color-text: #0b1220; --color-text-muted: rgba(var(--color-text-rgb, 11, 18, 32), 0.68); --color-border: rgba(var(--color-surface-rgb, 15, 23, 42), 0.14); --color-backdrop: rgba(var(--color-bg-rgb, 2, 6, 23), 0.38); --shadow-card: 0 25px 50px -12px rgba(0, 0, 0, 0.15); } /* --------------------------------------------------------- Legacy Aliases (for backwards compatibility) Mapping old variable names to new design tokens --------------------------------------------------------- */