/* ============================================================================ tokens.css — Sistema de diseño (tokens) del sitio OpoJose ============================================================================ QUÉ ES ESTE FICHERO ------------------- Define TODAS las variables del diseño en un solo sitio: colores, tipografía, espacios, radios, sombras y duraciones de animación. Cualquier cambio que se haga aquí se propaga automáticamente al sitio entero porque chrome.css y los estilos embebidos usan estas variables. CAMBIOS HABITUALES ------------------ • Color de marca: edita --color-primary-500 (#194DAC, el azul del logo). Los demás (50–900) son variantes claras/oscuras del mismo y se usan en botones, hovers, fondos sutiles, etc. • Tipografía: actualmente Montserrat (3 pesos: 400/600/700) con stack system-ui como fallback inmediato. Cambia --font-body / --font-display para usar otra fuente — pero entonces revisa la línea @import de Google Fonts arriba para cargar los pesos correctos. • Subset latino: el @import lleva ?subset=latin para reducir el peso de la fuente (~20-25 KB menos). Cambia a subset=latin,latin-ext si algún día incluyes nombres con ą ć ł ş ş ţ etc. ============================================================================ */ /* Solo Montserrat (3 pesos) — subset latino para máxima velocidad de carga. `display=swap` deja al system-ui fallback pintar de inmediato mientras la fuente web se descarga. */ /* Only Montserrat (3 weights) is loaded for speed. Pages should also include in : System-UI stack used as instant fallback while web font loads. */ @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&display=swap&subset=latin'); /* ------------------------------------------------------------ COLOR TOKENS — Base Palette ------------------------------------------------------------ */ :root { /* Primary blue scale — sampled from real OpoJose navbar #194DAC */ --color-primary-900: #091E46; --color-primary-800: #0D2D68; --color-primary-700: #113C8A; --color-primary-600: #1545A0; /* hover */ --color-primary-500: #194DAC; /* brand blue — main (real #194DAC) */ --color-primary-400: #3A6DC2; --color-primary-300: #6A97D8; --color-primary-200: #A6C3ED; --color-primary-100: #D3E3F8; --color-primary-50: #EAF0FC; /* Accent — turquesa / cyan */ --color-accent-900: #053E47 ; --color-accent-800: #075664; --color-accent-700: #0A7588; --color-accent-600: #0E91A8; /* main accent */ --color-accent-500: #14A8C0; --color-accent-400: #3CC0D6; --color-accent-300: #7BD5E5; --color-accent-200: #B3E7F0; --color-accent-100: #DBF3F7; /* Warning kept separate from accent (amber) */ --color-warning-amber: #E8930A; /* Neutral scale */ --color-neutral-950: #0D0F14; --color-neutral-900: #1A1A2E; /* body text */ --color-neutral-700: #3A3F50; --color-neutral-600: #5C6478; /* secondary text */ --color-neutral-400: #9DA3AE; /* placeholder */ --color-neutral-300: #C8CEDE; --color-neutral-200: #E2E6EE; /* border */ --color-neutral-100: #F1F3F7; --color-neutral-50: #F8F9FB; /* page background */ /* Status */ --color-success-700: #145C36; --color-success-500: #1A7F4B; --color-success-100: #D3F0E2; --color-error-700: #A0231B; --color-error-500: #D93025; --color-error-100: #FDECEA; --color-warning-500: #E8930A; --color-warning-100: #FEF3DC; --color-info-500: #1B5EAB; --color-info-100: #EBF2FC; /* Document / temario specific — sampled from real OpoJose docs */ --color-doc-heading: #000099; /* H1/H2 in temario docs — pure indigo-blue */ --color-doc-breadcrumb: #6B7EC8; /* breadcrumb text in doc header */ --color-logo-icon: #80A5D0; /* desaturated blue of logo circle in docs */ /* Absolute */ --color-white: #FFFFFF; --color-black: #000000; /* ------------------------------------------------------------ COLOR TOKENS — Semantic / Contextual ------------------------------------------------------------ */ --fg-primary: var(--color-neutral-900); --fg-secondary: var(--color-neutral-600); --fg-tertiary: var(--color-neutral-400); --fg-inverse: var(--color-white); --fg-brand: var(--color-primary-500); --fg-accent: var(--color-accent-600); --bg-page: var(--color-neutral-50); --bg-surface: var(--color-white); --bg-surface-raised: var(--color-white); --bg-brand: var(--color-primary-500); --bg-brand-dark: var(--color-primary-700); --bg-brand-subtle: var(--color-primary-50); --bg-accent-subtle: var(--color-accent-100); --bg-accent: var(--color-accent-600); --bg-muted: var(--color-neutral-100); --border-default: var(--color-neutral-200); --border-strong: var(--color-neutral-300); --border-brand: var(--color-primary-500); --status-success-fg: var(--color-success-500); --status-success-bg: var(--color-success-100); --status-error-fg: var(--color-error-500); --status-error-bg: var(--color-error-100); --status-warning-fg: var(--color-warning-500); --status-warning-bg: var(--color-warning-100); --status-info-fg: var(--color-info-500); --status-info-bg: var(--color-info-100); /* ------------------------------------------------------------ TYPOGRAPHY TOKENS ------------------------------------------------------------ */ /* Unified to Montserrat for visual consistency; system-ui fallback paints immediately on first load so layout is never blocked by the web font. */ --font-display: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --font-body: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* Font weights */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-extrabold: 800; /* Font sizes */ --text-xs: 0.75rem; /* 12px */ --text-sm: 0.875rem; /* 14px */ --text-base: 1rem; /* 16px */ --text-lg: 1.125rem; /* 18px */ --text-xl: 1.25rem; /* 20px */ --text-2xl: 1.5rem; /* 24px */ --text-3xl: 1.75rem; /* 28px */ --text-4xl: 2rem; /* 32px */ --text-5xl: 2.25rem; /* 36px */ --text-6xl: 3rem; /* 48px */ --text-7xl: 3.75rem; /* 60px */ /* Line heights */ --lh-tight: 1.2; --lh-snug: 1.35; --lh-normal: 1.5; --lh-relaxed: 1.625; --lh-loose: 1.75; /* Letter spacing */ --ls-tight: -0.03em; --ls-snug: -0.02em; --ls-normal: 0; --ls-wide: 0.03em; --ls-wider: 0.06em; --ls-widest: 0.1em; /* ------------------------------------------------------------ SPACING TOKENS ------------------------------------------------------------ */ --space-0: 0; --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 */ --space-24: 6rem; /* 96px */ /* ------------------------------------------------------------ BORDER RADIUS TOKENS ------------------------------------------------------------ */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-2xl: 24px; --radius-full: 9999px; /* ------------------------------------------------------------ SHADOW TOKENS ------------------------------------------------------------ */ --shadow-xs: 0 1px 3px rgba(0,0,0,0.07); --shadow-sm: 0 2px 8px rgba(0,0,0,0.06); --shadow-md: 0 4px 16px rgba(0,0,0,0.08); --shadow-lg: 0 6px 24px rgba(27,94,171,0.12); --shadow-xl: 0 16px 48px rgba(0,0,0,0.14); --shadow-brand: 0 4px 16px rgba(27,94,171,0.25); /* ------------------------------------------------------------ ANIMATION TOKENS ------------------------------------------------------------ */ --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --ease-decelerate: cubic-bezier(0, 0, 0.2, 1); --ease-accelerate: cubic-bezier(0.4, 0, 1, 1); --duration-fast: 150ms; --duration-base: 250ms; --duration-slow: 400ms; /* ------------------------------------------------------------ LAYOUT TOKENS ------------------------------------------------------------ */ --max-width-content: 1200px; --max-width-prose: 680px; --header-height: 64px; } /* ------------------------------------------------------------ DARK THEME OVERRIDES Activate with or ------------------------------------------------------------ */ [data-theme="dark"] { --fg-primary: #F1F3F7; --fg-secondary: #B0B8C8; --fg-tertiary: #7A8194; --fg-inverse: #1A1A2E; --fg-brand: #6FA3D9; --bg-page: #0D0F14; --bg-surface: #161A22; --bg-surface-raised: #1E2330; --bg-brand: var(--color-primary-500); --bg-brand-dark: var(--color-primary-800); --bg-brand-subtle: rgba(27,94,171,0.16); --bg-accent-subtle: rgba(14,145,168,0.16); --bg-muted: #212632; --border-default: #2A3040; --border-strong: #3A4256; --border-brand: var(--color-primary-400); --status-success-bg: rgba(26,127,75,0.18); --status-error-bg: rgba(217,48,37,0.18); --status-warning-bg: rgba(232,147,10,0.18); --status-info-bg: rgba(27,94,171,0.18); } /* ------------------------------------------------------------ SEMANTIC TYPE STYLES ------------------------------------------------------------ */ .display { font-family: var(--font-display); font-size: var(--text-7xl); font-weight: var(--fw-bold); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); color: var(--fg-primary); } h1, .h1 { font-family: var(--font-display); font-size: var(--text-6xl); font-weight: var(--fw-bold); line-height: var(--lh-tight); letter-spacing: var(--ls-snug); color: var(--fg-primary); } h2, .h2 { font-family: var(--font-display); font-size: var(--text-5xl); font-weight: var(--fw-semibold); line-height: var(--lh-snug); letter-spacing: var(--ls-snug); color: var(--fg-primary); } h3, .h3 { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: var(--fw-semibold); line-height: var(--lh-snug); color: var(--fg-primary); } h4, .h4 { font-family: var(--font-display); font-size: var(--text-xl); font-weight: var(--fw-semibold); line-height: var(--lh-normal); color: var(--fg-primary); } p, .body { font-family: var(--font-body); font-size: var(--text-base); font-weight: var(--fw-regular); line-height: var(--lh-relaxed); color: var(--fg-primary); } .body-sm { font-family: var(--font-body); font-size: var(--text-sm); font-weight: var(--fw-regular); line-height: var(--lh-relaxed); color: var(--fg-secondary); } .caption { font-family: var(--font-body); font-size: var(--text-xs); font-weight: var(--fw-medium); line-height: var(--lh-normal); letter-spacing: var(--ls-wide); color: var(--fg-tertiary); } .label { font-family: var(--font-body); font-size: var(--text-sm); font-weight: var(--fw-medium); line-height: var(--lh-normal); color: var(--fg-primary); } .overline { font-family: var(--font-body); font-size: var(--text-xs); font-weight: var(--fw-semibold); line-height: var(--lh-normal); letter-spacing: var(--ls-widest); text-transform: uppercase; color: var(--fg-brand); } code, .code { font-family: var(--font-mono); font-size: 0.9em; background: var(--bg-muted); padding: 0.15em 0.4em; border-radius: var(--radius-sm); color: var(--fg-primary); }