/* tokens.css — single source of truth for the design system. Importar antes que cualquier otra hoja. */ :root { /* ===== Surface ladder (de fondo a primer plano) ===== */ --color-bg: #0a0b0e; /* página */ --color-bg-elev-1: #13151b; /* panel principal */ --color-bg-elev-2: #1a1d24; /* card / input */ --color-bg-elev-3: #22262f; /* input focus / hover */ --color-bg-code: #0c0e12; --color-bg-overlay: rgba(10,11,14,.78); /* ===== Bordes ===== */ --color-border: #262a33; --color-border-strong: #3a4150; --color-border-focus: var(--color-brand); /* ===== Texto ===== */ --color-text: #f5f5f0; /* off-white cálido */ --color-text-mid: #a8aab5; --color-text-muted: #6b6e78; --color-text-on-brand:#1a0a00; /* texto oscuro sobre fondo naranja */ /* ===== Marca Dolbuck ===== */ --color-brand: #ff7a18; --color-brand-hov: #ff9542; --color-brand-dim: #cc5a08; --color-brand-glow: rgba(255,122,24,.35); --color-brand-bg: rgba(255,122,24,.10); /* ===== Semántica de estado ===== */ --color-success: #5cdfa8; --color-success-bg: rgba(92,223,168,.10); --color-warning: #ffb84d; --color-warning-bg: rgba(255,184,77,.10); --color-danger: #ff5a5f; --color-danger-bg: rgba(255,90,95,.10); --color-info: #5ac7ff; --color-info-bg: rgba(90,199,255,.10); /* ===== Tipografía ===== */ --font-display: "JetBrains Mono", ui-monospace, "Menlo", "Consolas", monospace; --font-body: "IBM Plex Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "Menlo", "Consolas", monospace; /* Escala tipográfica (base 17px) */ --fs-xs: 0.78rem; --fs-sm: 0.9rem; --fs-md: 1rem; --fs-lg: 1.15rem; --fs-xl: 1.4rem; --fs-2xl: 1.85rem; --fs-3xl: 2.45rem; --fs-4xl: 3.4rem; /* ===== Espaciado (escala 4px) ===== */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; /* ===== Radio ===== */ --radius-sm: 3px; --radius: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-pill: 999px; /* ===== Sombras ===== */ --shadow-sm: 0 1px 2px rgba(0,0,0,.5); --shadow: 0 4px 16px rgba(0,0,0,.45); --shadow-lg: 0 20px 60px rgba(0,0,0,.7), 0 2px 4px rgba(0,0,0,.3); --shadow-brand-glow: 0 0 0 2px rgba(255,122,24,.18), 0 0 32px rgba(255,122,24,.20); /* ===== Transiciones ===== */ --ease: cubic-bezier(0.4, 0, 0.2, 1); --ease-out:cubic-bezier(0.16, 1, 0.3, 1); --t-fast: 120ms var(--ease); --t: 200ms var(--ease); --t-slow: 400ms var(--ease); /* ===== Z-index ===== */ --z-header: 50; --z-modal: 100; --z-toast: 200; } /* ========================================================================= TEMA CLARO — activar añadiendo `data-theme="light"` al Tema auto (sigue al SO) con data-theme="auto" + prefers-color-scheme: light ========================================================================= */ :root[data-theme="light"] { /* Surfaces — gris medio cálido, dos tonos por debajo del light original. Más cercano a un "dim mode" que a un blanco/crema. */ /* Paleta blueprint: gris azulado oscuro con naranja como acento */ --color-bg: #1B1F24; /* página */ --color-bg-elev-1: #232830; /* panel principal (intermedio bg/card) */ --color-bg-elev-2: #2D333C; /* card / input */ --color-bg-elev-3: #3A414C; /* hover / focus */ --color-bg-code: #15181C; --color-bg-overlay: rgba(27,31,36,.85); --color-border: #4A525E; --color-border-strong: #6A7385; --color-text: #F4F6F8; /* off-white */ --color-text-mid: #B8BCC4; --color-text-muted: #7D818A; --color-text-on-brand:#1A0A00; /* texto oscuro sobre naranja */ --color-brand-bg: rgba(255,122,24,.12); --color-brand-glow: rgba(255,122,24,.35); --color-success-bg: rgba(92,223,168,.10); --color-warning-bg: rgba(255,184,77,.10); --color-danger-bg: rgba(255,90,95,.10); --color-info-bg: rgba(90,199,255,.10); --shadow-sm: 0 1px 2px rgba(0,0,0,.45); --shadow: 0 4px 16px rgba(0,0,0,.40); --shadow-lg: 0 20px 60px rgba(0,0,0,.60), 0 2px 4px rgba(0,0,0,.28); --shadow-brand-glow: 0 0 0 2px rgba(255,122,24,.20), 0 0 32px rgba(255,122,24,.22); } /* Modo auto: cuando data-theme="auto", aplicar light si el SO lo pide */ @media (prefers-color-scheme: light) { :root[data-theme="auto"] { --color-bg: #1B1F24; --color-bg-elev-1: #232830; --color-bg-elev-2: #2D333C; --color-bg-elev-3: #3A414C; --color-bg-code: #15181C; --color-bg-overlay: rgba(27,31,36,.85); --color-border: #4A525E; --color-border-strong: #6A7385; --color-text: #F4F6F8; --color-text-mid: #B8BCC4; --color-text-muted: #7D818A; --color-text-on-brand:#1A0A00; --color-brand-bg: rgba(255,122,24,.12); --color-brand-glow: rgba(255,122,24,.35); --color-success-bg: rgba(92,223,168,.10); --color-warning-bg: rgba(255,184,77,.10); --color-danger-bg: rgba(255,90,95,.10); --color-info-bg: rgba(90,199,255,.10); --shadow-sm: 0 1px 2px rgba(0,0,0,.45); --shadow: 0 4px 16px rgba(0,0,0,.40); --shadow-lg: 0 20px 60px rgba(0,0,0,.60), 0 2px 4px rgba(0,0,0,.28); --shadow-brand-glow: 0 0 0 2px rgba(255,122,24,.20), 0 0 32px rgba(255,122,24,.22); } }