/* obsidian.css — Design Tokens Paleta Obsidian + tipografía + spacing + radii + shadows + blurs. Importar ANTES de glass.css y site.css. Toggle de tema vía atributo en : (default) */ /* ─── Tokens compartidos ─────────────────────────────────────────────────── */ :root { /* Tipografía */ --font-sans: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: "JetBrains Mono", "Fira Code", Consolas, monospace; --fs-xs: 0.75rem; --fs-sm: 0.875rem; --fs-base: 1rem; --fs-md: 1.125rem; --fs-lg: 1.25rem; --fs-xl: 1.5rem; --fs-2xl: 2rem; --fs-3xl: 2.5rem; --fw-regular: 400; --fw-medium: 500; --fw-semi: 600; --fw-bold: 700; --lh-tight: 1.2; --lh-normal: 1.5; --lh-relax: 1.7; /* Spacing (escala de 4 px) */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.25rem; --sp-6: 1.5rem; --sp-8: 2rem; --sp-10: 2.5rem; --sp-12: 3rem; --sp-16: 4rem; /* Radii */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-2xl: 24px; --radius-full: 9999px; /* Blur (liquid glass) */ --blur-sm: blur(8px) saturate(140%); --blur-md: blur(16px) saturate(160%); --blur-lg: blur(24px) saturate(180%); /* Transitions */ --tx-fast: 120ms ease; --tx-base: 200ms ease; --tx-slow: 320ms cubic-bezier(0.4, 0, 0.2, 1); } /* ─── Tema Dark (default) ────────────────────────────────────────────────── */ :root, :root[data-theme="dark"] { /* Fondos */ --bg-primary: #1e1e1e; --bg-secondary: #252525; --bg-elevated: #2a2a2a; --bg-overlay: rgba(0, 0, 0, 0.6); /* Texto */ --text-primary: #dcddde; --text-secondary: #9e9e9e; --text-muted: #6c6c6c; --text-inverse: #1e1e1e; /* Accent (morado Obsidian) */ --accent: #7f6df2; --accent-hover: #a277ff; --accent-pressed: #6a5ad9; --accent-text: #ffffff; /* Estados semánticos */ --success: #4ade80; --warning: #fbbf24; --danger: #f87171; --info: #60a5fa; /* Bordes y separadores */ --border: #363636; --border-strong: #4a4a4a; --border-focus: var(--accent); /* Glass tokens (dark = capas claras translúcidas) */ --glass-bg: rgba(255, 255, 255, 0.04); --glass-bg-strong: rgba(255, 255, 255, 0.08); --glass-border: rgba(255, 255, 255, 0.08); --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.4); --glass-tint: rgba(127, 109, 242, 0.06); /* halo morado sutil */ color-scheme: dark; } /* ─── Tema Light ─────────────────────────────────────────────────────────── */ :root[data-theme="light"] { /* Fondos */ --bg-primary: #ffffff; --bg-secondary: #f6f6f6; --bg-elevated: #ffffff; --bg-overlay: rgba(255, 255, 255, 0.7); /* Texto */ --text-primary: #222222; --text-secondary: #555555; --text-muted: #888888; --text-inverse: #ffffff; /* Accent (morado Obsidian más saturado para fondo claro) */ --accent: #6e5cd9; --accent-hover: #8a78f0; --accent-pressed: #5847c7; --accent-text: #ffffff; /* Estados semánticos */ --success: #16a34a; --warning: #d97706; --danger: #dc2626; --info: #2563eb; /* Bordes y separadores */ --border: #e4e4e4; --border-strong: #cccccc; --border-focus: var(--accent); /* Glass tokens (light = capas blancas translúcidas) */ --glass-bg: rgba(255, 255, 255, 0.55); --glass-bg-strong: rgba(255, 255, 255, 0.75); --glass-border: rgba(0, 0, 0, 0.06); --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.08); --glass-tint: rgba(110, 92, 217, 0.04); color-scheme: light; } /* ─── Reset mínimo y base ────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { font-family: var(--font-sans); font-size: 16px; line-height: var(--lh-normal); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { margin: 0; min-height: 100vh; color: var(--text-primary); background: var(--bg-primary); /* Fondo con un sutil gradiente para que glass se vea: */ background-image: radial-gradient(ellipse at top left, var(--glass-tint) 0%, transparent 50%), radial-gradient(ellipse at bottom right, var(--glass-tint) 0%, transparent 50%); transition: background var(--tx-slow), color var(--tx-slow); } a { color: var(--accent); text-decoration: none; transition: color var(--tx-fast); } a:hover { color: var(--accent-hover); } h1, h2, h3, h4, h5, h6 { margin: 0 0 var(--sp-3) 0; font-weight: var(--fw-semi); line-height: var(--lh-tight); color: var(--text-primary); } h1 { font-size: var(--fs-3xl); } h2 { font-size: var(--fs-2xl); } h3 { font-size: var(--fs-xl); } h4 { font-size: var(--fs-lg); } p { margin: 0 0 var(--sp-3) 0; } code, pre, kbd { font-family: var(--font-mono); font-size: 0.9em; } /* Focus visible accesible (WCAG) */ :focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; border-radius: var(--radius-sm); } /* Reduce motion */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }