/* ═══════════════════════════════════════════════════════ tokens.css — Fuente de verdad del sistema de diseño Q-Secure Ref: DESIGN.md §3 ═══════════════════════════════════════════════════════ */ /* ── FUENTES AUTOALOJADAS ───────────────────────────────────────────────────── */ /* Space Grotesk — 3 pesos explícitos apuntando al mismo archivo variable */ @font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/space-grotesk-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/space-grotesk-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/space-grotesk-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* Inter — 3 pesos explícitos apuntando al mismo archivo variable */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/inter-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/inter-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/inter-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { /* ── §3.1 SUPERFICIES ───────────────────────────────────────────────────── */ --bg: #FFFFFF; --bg-subtle: #F7F8FA; --bg-muted: #F3F4F6; --surface: #FFFFFF; --border: #E5E7EB; --border-strong: #D1D5DB; /* ── §3.1 TEXTO ─────────────────────────────────────────────────────────── */ --text: #0B0F19; --text-2: #1F2937; --text-3: #4B5563; /* ── §3.1 MARCA ─────────────────────────────────────────────────────────── */ --primary: #0066FF; --primary-soft: #E8F0FF; --accent: #00D1FF; /* solo en gráficos, nunca en texto */ --cta: #E61667; --cta-hover: #C8104F; /* ── §3.1 SEVERIDAD ─────────────────────────────────────────────────────── */ --sev-critical: #DC2626; --sev-high: #F97316; --sev-medium: #FBBF24; --sev-low: #22C55E; /* ── §3.1 PRODUCTOS ─────────────────────────────────────────────────────── */ --p-shield: #0066FF; --p-soc: #00D1FF; --p-protect: #E61667; --p-learning: #22C55E; /* ── §3.1 DEGRADADOS ────────────────────────────────────────────────────── */ --glow-hero: radial-gradient(60% 60% at 70% 30%, rgba(0,102,255,.12) 0%, rgba(0,209,255,.06) 40%, transparent 70%); --glow-cta: radial-gradient(50% 80% at 50% 0%, rgba(230,22,103,.10) 0%, transparent 70%); /* ── §3.2 TIPOGRAFÍA ────────────────────────────────────────────────────── */ --font-heading: 'Space Grotesk', system-ui, sans-serif; --font-body: 'Inter', system-ui, sans-serif; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; /* Escala tipográfica desktop */ --type-display: 600 64px/1.05 var(--font-heading); --type-h2: 600 44px/1.10 var(--font-heading); --type-h3: 500 22px/1.25 var(--font-heading); --type-lead: 400 20px/1.55 var(--font-body); --type-body: 400 17px/1.60 var(--font-body); --type-eyebrow: 600 13px/1.2 var(--font-body); --type-stat: 600 56px/1 var(--font-heading); /* ── §3.3 ESPACIADO ─────────────────────────────────────────────────────── */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-6: 24px; --sp-8: 32px; --sp-12: 48px; --sp-16: 64px; --sp-24: 96px; --sp-32: 128px; --section-gap: 128px; /* desktop */ --section-gap-sm: 80px; /* mobile */ /* ── §3.3 RADIOS ────────────────────────────────────────────────────────── */ --r-sm: 4px; --r-md: 8px; /* botones, inputs */ --r-lg: 16px; /* tarjetas */ --r-xl: 24px; /* paneles grandes, mockups */ --r-full: 9999px; /* ── §3.3 SOMBRAS (tinte azul, nunca negro puro) ───────────────────────── */ --shadow-sm: 0 1px 2px rgba(11,15,25,.06); --shadow-md: 0 8px 24px -8px rgba(0,40,120,.12); --shadow-lg: 0 24px 64px -16px rgba(0,40,120,.18); --shadow-glow: 0 0 0 1px rgba(0,102,255,.08), 0 24px 80px -24px rgba(0,102,255,.35); /* ── GRID ───────────────────────────────────────────────────────────────── */ --grid-max: 1280px; /* ── ALIASES de compatibilidad (main.css usa estos nombres) ────────────── */ --color-bg-main: var(--bg); --color-bg-alt: var(--bg-muted); --color-border-soft: var(--border); --color-border-meta: var(--text-3); --color-text-primary: var(--text); --color-text-secondary: var(--text-2); --color-primary: var(--primary); --color-accent: var(--accent); --color-cta: var(--cta); --color-critical: var(--sev-critical); --color-high: var(--sev-high); --color-medium: var(--sev-medium); --color-low: var(--sev-low); --color-digital-shield: var(--p-shield); --color-dynamic-soc: var(--p-soc); --color-cyber-protect: var(--p-protect); --color-q-learning: var(--p-learning); --grid-max-width: var(--grid-max); --shadow-card: var(--shadow-md); --space-1: var(--sp-1); --space-2: var(--sp-2); --space-3: var(--sp-3); --space-4: var(--sp-4); --space-5: 20px; --space-6: var(--sp-6); --space-8: var(--sp-8); --space-10: 40px; --space-12: var(--sp-12); --space-16: var(--sp-16); --space-20: 80px; --space-24: var(--sp-24); --radius-sm: var(--r-sm); --radius-md: var(--r-md); --radius-lg: var(--r-lg); --radius-xl: var(--r-xl); --radius-full: var(--r-full); --font-body-stack: var(--font-body); --font-heading-stack: var(--font-heading); }