/* ════════════════════════════════════════════════════════ INGLÉS 360 UI KIT — TOKENS Lifted 1:1 from ingles360-theme-v5 (main.css + theme.json). See THEME-V5-AUDIT.md for the mapping. Dark is the default. Switch to light with: ════════════════════════════════════════════════════════ */ :root { /* ── Palette ──────────────────────────────────────── */ --i360-bg: #05060D; --i360-bg2: #0B0D1A; --i360-surface: rgba(255,255,255,.07); --i360-surface-2: rgba(255,255,255,.04); --i360-border: rgba(255,255,255,.11); --i360-text: #F8F9FF; --i360-muted: #C7CDEB; --i360-pink: #8B5CF6; --i360-violet: #8B5CF6; --i360-blue: #49D2FF; --i360-cyan: #2BA3CC; /* ── Gradients ────────────────────────────────────── */ --i360-grad: linear-gradient(90deg,#2BE6E0,#4A6BFF,#8B5CF6); --i360-grad-45: linear-gradient(135deg,#2BE6E0,#4A6BFF,#8B5CF6); --i360-grad-btn: linear-gradient(90deg,#2BE6E0,#4A6BFF,#8B5CF6); /* ── Radius ───────────────────────────────────────── */ --i360-card-r: 22px; --i360-btn-r: 18px; --i360-input-r: 14px; --i360-pill: 999px; /* ── Motion & effects ─────────────────────────────── */ --i360-t: .18s ease; --i360-blur: blur(20px); /* ── Shadows ──────────────────────────────────────── */ --i360-shadow-sm: 0 4px 16px rgba(0,0,0,.22); --i360-shadow-md: 0 12px 34px rgba(0,0,0,.32); --i360-shadow-lg: 0 20px 60px rgba(0,0,0,.42); --i360-shadow-glow: 0 10px 32px rgba(139,92,246,.28); --i360-shadow-btn: 0 8px 28px rgba(139,92,246,.28); --i360-shadow-btn-hv: 0 14px 40px rgba(139,92,246,.44); /* ── Spacing scale (px) ───────────────────────────── */ --i360-space-1: 4px; --i360-space-2: 8px; --i360-space-3: 16px; --i360-space-4: 24px; --i360-space-5: 32px; --i360-space-6: 48px; --i360-space-7: 64px; --i360-space-8: 96px; /* ── Typography ───────────────────────────────────── */ --i360-font-display: 'Syne', system-ui, sans-serif; --i360-font-body: 'DM Sans', system-ui, sans-serif; --i360-fs-xs: 13px; --i360-fs-sm: 15px; --i360-fs-base: 17px; --i360-fs-lg: 20px; --i360-fs-xl: clamp(24px, 2.8vw, 30px); --i360-fs-2xl: clamp(30px, 3.8vw, 40px); --i360-fs-3xl: clamp(38px, 5.2vw, 56px); --i360-fs-hero: clamp(42px, 6.8vw, 76px); /* ── App shell ────────────────────────────────────── */ --i360-pad: clamp(18px, 5vw, 52px); --i360-content: 820px; --i360-wide: 1360px; --i360-hdr-h: 64px; /* ── Semantic (UI Kit addition — see AUDIT note) ──── */ --i360-success: #4ECDC4; --i360-warning: #FFD166; --i360-danger: #FF6B8A; /* Focus ring — promoted from Theme v5 inline outline rule. */ --i360-focus: 0 0 0 2px rgba(139,92,246,.75); } /* ════════════════════════════════════════════════════════ LIGHT MODE — via Same convention Theme v5 uses. ════════════════════════════════════════════════════════ */ [data-theme="light"] { --i360-bg: #FFFFFF; --i360-bg2: #F4F7FF; --i360-surface: rgba(22,24,42,.05); --i360-surface-2: rgba(22,24,42,.04); --i360-border: rgba(22,24,42,.10); --i360-text: #14182A; --i360-muted: #57607F; /* Darken cyan so it reads on white — Theme v5 correction preserved. */ --i360-cyan: #1A7FA0; } @media (max-width: 768px) { :root { --i360-hdr-h: 60px; } }