/* ============================================================ ORKA — Design System Tokens v2.0 Fuente de verdad para todos los estilos del proyecto. Importar en el ANTES de cualquier otro CSS. ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,400&family=JetBrains+Mono:wght@400;500&display=swap'); :root { /* ── Tipografía ──────────────────────────────────────────── */ --font-sans: 'DM Sans', system-ui, sans-serif; --font-mono: 'JetBrains Mono', monospace; --text-xs: 0.75rem; /* 12px — labels, metadata */ --text-sm: 0.875rem; /* 14px — body secundario */ --text-base: 1rem; /* 16px — body principal */ --text-lg: 1.125rem; /* 18px — subtítulos */ --text-xl: 1.25rem; /* 20px — títulos sección */ --text-2xl: 1.5rem; /* 24px — títulos página */ --text-3xl: 1.875rem; /* 30px — headings grandes */ --font-normal: 400; --font-medium: 500; --font-semibold: 600; --leading-body: 1.6; --leading-heading: 1.25; --tracking-wide: 0.05em; --tracking-wider: 0.08em; /* ── Colores neutros ─────────────────────────────────────── */ --color-bg: #F4F3F0; /* fondo de página */ --color-surface: #FAFAF9; /* cards, paneles */ --color-surface-2: #EEECEA; /* hover, zebra, surface alt */ --color-surface-3: #E5E4E0; /* active, selected */ --color-border: #E0DED9; /* bordes suaves */ --color-border-2: #C8C6C0; /* bordes con énfasis */ --color-text: #1C1C1A; /* texto principal */ --color-text-2: #6B6B67; /* texto secundario */ --color-text-3: #A8A8A3; /* placeholder, muted */ /* ── Brand — índigo ─────────────────────────────────────── */ --color-brand: #5B5BD6; /* acento principal */ --color-brand-light: #EEEDFE; /* fondos suaves brand */ --color-brand-mid: #AFA9EC; /* bordes brand */ --color-brand-dark: #3C3489; /* hover, texto sobre brand */ /* ── Estados funcionales ─────────────────────────────────── */ --color-success-bg: #D4E8D4; --color-success: #3A6B3A; --color-warning-bg: #F0E6CC; --color-warning: #7A5A1A; --color-error-bg: #F0D4D4; --color-error: #7A2A2A; --color-info-bg: #D4DFF0; --color-info: #2A3F6B; /* ── Espaciado — sistema 4px ─────────────────────────────── */ --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 */ /* ── Border radius ───────────────────────────────────────── */ --radius-sm: 4px; --radius-md: 8px; /* default: botones, inputs */ --radius-lg: 12px; /* cards de contenido, paneles */ --radius-xl: 16px; /* modales, cards grandes */ --radius-full: 9999px; /* badges, pills, avatares */ /* ── Sombras ─────────────────────────────────────────────── */ --shadow-sm: 0 1px 3px rgba(0,0,0,0.06); --shadow-md: 0 2px 8px rgba(0,0,0,0.08); /* ── Transiciones ────────────────────────────────────────── */ --transition: 200ms cubic-bezier(0.4, 0, 0.2, 1); /* ── Layout ──────────────────────────────────────────────── */ --container-sm: 640px; --container-md: 768px; --container-lg: 1024px; --container-xl: 1280px; --sidebar-width: 260px; --topbar-height: 56px; } /* ============================================================ RESET BASE ============================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: var(--font-sans); font-size: var(--text-sm); line-height: var(--leading-body); color: var(--color-text); background-color: var(--color-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img, video, svg { display: block; max-width: 100%; } input, button, textarea, select { font: inherit; } a { color: var(--color-brand); text-decoration: none; } a:hover { color: var(--color-brand-dark); }