/* ============================================================================ theme-tokens.css Design tokens (color, typography, spacing, shadows) — base del sistema visual moderno. Light + Dark mode via [data-theme] en . No selecciona elementos del proyecto. Solo declara variables. ============================================================================ */ :root { /* OECD palette (institutional blue + neutrals) */ --ocde-navy: #001F4D; --ocde-blue: #0064AE; --ocde-link: #0072BC; --ocde-light: #41B6E6; --ocde-tint: #E6F2FB; /* Neutrals (slate) */ --gray-50: #F8FAFC; --gray-100: #F1F5F9; --gray-200: #E2E8F0; --gray-300: #CBD5E1; --gray-400: #94A3B8; --gray-500: #64748B; --gray-600: #475569; --gray-700: #334155; --gray-800: #1E293B; --gray-900: #0F172A; /* Status colors (background + foreground variants) */ --success-bg: #DCFCE7; --success-fg: #166534; --warning-bg: #FEF3C7; --warning-fg: #92400E; --danger-bg: #FEE2E2; --danger-fg: #991B1B; --info-bg: #DBEAFE; --info-fg: #1E40AF; /* Semantic surfaces (light mode) */ --bg-page: var(--gray-50); --bg-surface: #FFFFFF; --bg-surface-2: var(--gray-50); --bg-elevated: #FFFFFF; --bg-hover: var(--ocde-tint); /* Semantic text */ --text-primary: var(--gray-900); --text-secondary: var(--gray-600); --text-muted: var(--gray-500); --text-inverted: #FFFFFF; /* Semantic borders */ --border-default: var(--gray-200); --border-strong: var(--gray-300); --border-focus: var(--ocde-blue); /* Accent semantics */ --accent-primary: var(--ocde-blue); --accent-primary-hover: var(--ocde-navy); --accent-link: var(--ocde-link); /* Typography */ --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --font-mono: ui-monospace, 'SF Mono', 'Cascadia Code', 'Roboto Mono', Consolas, monospace; --text-xs: 12px; --text-sm: 13px; --text-base: 15px; --text-lg: 17px; --text-xl: 20px; --text-2xl: 24px; --text-3xl: 30px; /* Spacing scale (4px base) */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; /* Border radius */ --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-full: 9999px; /* Shadows (subtle, layered) */ --shadow-sm: 0 1px 2px rgba(15,23,42,0.05); --shadow-md: 0 1px 3px rgba(15,23,42,0.08), 0 1px 2px rgba(15,23,42,0.06); --shadow-lg: 0 10px 15px -3px rgba(15,23,42,0.08), 0 4px 6px -4px rgba(15,23,42,0.08); --shadow-xl: 0 25px 50px -12px rgba(15,23,42,0.25); /* Motion */ --motion-fast: 120ms; --motion-base: 180ms; --motion-slow: 280ms; --easing-standard: cubic-bezier(0.4, 0, 0.2, 1); /* Layout */ --topbar-height: 56px; --sidebar-width: 240px; /* Z-index */ --z-topbar: 100; --z-sidebar: 90; --z-modal: 200; --z-popover: 150; } /* Dark mode — same tokens, dark values */ [data-theme="dark"] { --bg-page: #0B1220; --bg-surface: #111827; --bg-surface-2: #1F2937; --bg-elevated: #1E293B; --bg-hover: #1E3A5F; --text-primary: #F1F5F9; --text-secondary: #CBD5E1; --text-muted: #94A3B8; --text-inverted: #0F172A; --border-default: #1F2937; --border-strong: #334155; /* En dark mode los acentos se mantienen pero el "navy hover" se invierte */ --accent-primary: var(--ocde-light); --accent-primary-hover: #7CCFEC; --accent-link: var(--ocde-light); --ocde-tint: #1B3A5C; /* Status colors — fondos más oscuros para mejor contraste con texto claro */ --success-bg: #14361F; --success-fg: #86EFAC; --warning-bg: #3A2A0D; --warning-fg: #FCD34D; --danger-bg: #3A1414; --danger-fg: #FCA5A5; --info-bg: #1A2F5C; --info-fg: #93C5FD; /* Sombras más fuertes para profundidad en fondo oscuro */ --shadow-sm: 0 1px 2px rgba(0,0,0,0.4); --shadow-md: 0 1px 3px rgba(0,0,0,0.5), 0 1px 2px rgba(0,0,0,0.3); --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.6), 0 4px 6px -4px rgba(0,0,0,0.4); --shadow-xl: 0 25px 50px -12px rgba(0,0,0,0.8); } /* "Auto" mode follows OS preference */ @media (prefers-color-scheme: dark) { [data-theme="auto"] { --bg-page: #0B1220; --bg-surface: #111827; --bg-surface-2: #1F2937; --bg-elevated: #1E293B; --bg-hover: #1E3A5F; --text-primary: #F1F5F9; --text-secondary: #CBD5E1; --text-muted: #94A3B8; --text-inverted: #0F172A; --border-default: #1F2937; --border-strong: #334155; --accent-primary: var(--ocde-light); --accent-primary-hover: #7CCFEC; --accent-link: var(--ocde-light); --ocde-tint: #1B3A5C; --success-bg: #14361F; --success-fg: #86EFAC; --warning-bg: #3A2A0D; --warning-fg: #FCD34D; --danger-bg: #3A1414; --danger-fg: #FCA5A5; --info-bg: #1A2F5C; --info-fg: #93C5FD; } }