/* ========================================================================== variables.css — Design Tokens de IB-Scope ARCHIVO UNICO de variables CSS. Alimenta TODAS las apps. NUNCA definir colores, fonts, spacing o shadows en otro CSS. Uso en templates: Dark mode: agregar clase .dark al o Skins: cargar un CSS de /static/css/skins/ que sobreescriba variables ========================================================================== */ :root { /* ────────────────────────────────────────────────────────────────────── PALETA BASE (no usar directamente en componentes — usar tokens semánticos) ────────────────────────────────────────────────────────────────────── */ /* Blue */ --blue-50: #EBF5FF; --blue-100: #D1E9FF; --blue-200: #A8D4FF; --blue-300: #6BB8FF; --blue-400: #3899FF; --blue-500: #007AFF; --blue-600: #0063D1; --blue-700: #004BA3; --blue-800: #003475; --blue-900: #0A1A2F; /* Neutrals */ --white: #FFFFFF; --gray-50: #F9FAFB; --gray-100: #F2F4F7; --gray-200: #E4E7EC; --gray-300: #D0D5DD; --gray-400: #98A2B3; --gray-500: #667085; --gray-600: #475467; --gray-700: #344054; --gray-800: #1D2939; --gray-900: #101828; /* Status */ --green-500: #12B76A; --green-600: #039855; --green-100: #D1FADF; --yellow-500: #F79009; --yellow-600: #DC6803; --yellow-100: #FEF0C7; --red-500: #F04438; --red-600: #D92D20; --red-100: #FEE4E2; --orange-500: #FB6514; --orange-100: #FFEAD5; --purple-500: #8b5cf6; --purple-100: #EDE9FE; /* ────────────────────────────────────────────────────────────────────── TOKENS SEMANTICOS — MODO CLARO (default) Usar ESTOS en componentes, nunca la paleta directamente. ────────────────────────────────────────────────────────────────────── */ /* Backgrounds */ --bg-primary: var(--gray-50); --bg-secondary: var(--white); --bg-card: rgba(255, 255, 255, 0.72); --bg-overlay: rgba(0, 0, 0, 0.6); --bg-input: var(--white); --bg-hover: var(--gray-100); --bg-active: var(--blue-50); /* Text */ --text-primary: var(--gray-900); --text-secondary: var(--gray-500); --text-tertiary: var(--gray-400); --text-inverse: var(--white); --text-link: var(--blue-500); /* Accent */ --accent: var(--blue-500); --accent-hover: var(--blue-600); --accent-light: var(--blue-50); --accent-dark: var(--blue-700); /* Borders */ --border-primary: var(--gray-200); --border-secondary: var(--gray-100); --border-focus: var(--blue-500); /* Status */ --success: var(--green-500); --success-bg: var(--green-100); --warning: var(--yellow-500); --warning-bg: var(--yellow-100); --danger: var(--red-500); --danger-bg: var(--red-100); /* Shadows */ --shadow-sm: 0 0.0625rem 0.125rem rgba(16, 24, 40, 0.05); --shadow-md: 0 0.25rem 1rem rgba(16, 24, 40, 0.08); --shadow-lg: 0 0.75rem 2.5rem rgba(16, 24, 40, 0.12); --shadow-blue: 0 0.25rem 1.5rem rgba(0, 122, 255, 0.25); /* ────────────────────────────────────────────────────────────────────── TYPOGRAPHY ────────────────────────────────────────────────────────────────────── */ --font-family: 'Amazon Ember', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif; --font-mono: 'Amazon Ember Mono', 'SF Mono', 'Fira Code', monospace; --font-xs: 0.75rem; --font-sm: 0.875rem; --font-md: 1rem; --font-lg: 1.125rem; --font-xl: 1.5rem; --font-2xl: 2rem; --font-3xl: clamp(1.75rem, 3vw, 2.75rem); --font-4xl: clamp(2.25rem, 4vw, 3.5rem); --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --line-height-tight: 1.2; --line-height-normal: 1.5; --line-height-relaxed: 1.75; /* ────────────────────────────────────────────────────────────────────── SPACING (rem based) ────────────────────────────────────────────────────────────────────── */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; /* ────────────────────────────────────────────────────────────────────── RADIUS (rem based) ────────────────────────────────────────────────────────────────────── */ --radius-sm: 0.5rem; --radius-md: 0.75rem; --radius-lg: 1.25rem; --radius-xl: 1.75rem; --radius-full: 9999rem; /* ────────────────────────────────────────────────────────────────────── LAYOUT ────────────────────────────────────────────────────────────────────── */ --navbar-h: 3.5rem; --footer-h: 3rem; --sidebar-w: 16rem; --content-max-w: 80rem; /* ────────────────────────────────────────────────────────────────────── TRANSITIONS ────────────────────────────────────────────────────────────────────── */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --duration-fast: 150ms; --duration-normal: 300ms; --duration-slow: 500ms; --duration-layout: 600ms; /* ────────────────────────────────────────────────────────────────────── Z-INDEX SCALE ────────────────────────────────────────────────────────────────────── */ --z-base: 0; --z-dropdown: 100; --z-sticky: 200; --z-overlay: 500; --z-modal: 1000; --z-toast: 1500; } /* ========================================================================== DARK MODE Activar con clase .dark en o ========================================================================== */ :root.dark, .dark { --bg-primary: #0c1a3a; --bg-secondary: #0f2347; --bg-card: rgba(15, 35, 71, 0.9); --bg-overlay: rgba(0, 0, 0, 0.8); --bg-input: #132a4f; --bg-hover: #1a3564; --bg-active: #1a3564; --text-primary: #f0f4f8; --text-secondary: #94a3b8; --text-tertiary: #64748b; --text-inverse: var(--gray-900); --text-link: var(--blue-300); --accent: var(--blue-400); --accent-hover: var(--blue-300); --accent-light: rgba(56, 153, 255, 0.15); --accent-dark: var(--blue-500); --border-primary: rgba(255, 255, 255, 0.1); --border-secondary: rgba(255, 255, 255, 0.05); --border-focus: var(--blue-400); --success-bg: rgba(18, 183, 106, 0.15); --warning-bg: rgba(247, 144, 9, 0.15); --danger-bg: rgba(240, 68, 56, 0.15); --shadow-sm: 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.3); --shadow-md: 0 0.25rem 1rem rgba(0, 0, 0, 0.4); --shadow-lg: 0 0.75rem 2.5rem rgba(0, 0, 0, 0.5); --shadow-blue: 0 0.25rem 1.5rem rgba(56, 153, 255, 0.3); /* Extended dark-mode semantic tokens */ --text-muted: #4a6fa5; --bg-card-alt: #1a3564; --border-strong: #2a4a7a; --text-on-card: #c0d0e8; }