/* ══════════════════════════════════════════ AVENTONES — Colors & Typography Tokens v1.1 · Mayo 2026 ══════════════════════════════════════════ */ /* Brand fonts — Font Pairing 01 · Sora (display) + Inter (body) + JetBrains Mono (data) */ /* Sora, Inter y JetBrains Mono se cargan desde Google Fonts vía en el del documento. */ :root { /* ───── PRIMITIVES ───── */ /* NAVY — el lienzo */ --navy-50: #EBF2F8; --navy-100: #C8DCEC; --navy-200: #9BBFD9; --navy-300: #6E9FBF; --navy-400: #3D6E8F; --navy-500: #1E3A54; --navy-600: #132336; --navy-700: #0C1928; --navy-800: #091422; --navy-900: #060D18; --navy-950: #03080F; /* CYAN — energía e interacción */ --cyan-50: #EEF9FE; --cyan-100: #C9EDFA; --cyan-200: #93DAF5; --cyan-300: #5DC8F0; --cyan-400: #22B8F0; --cyan-500: #0096C7; --cyan-600: #007BAA; --cyan-700: #005F85; --cyan-800: #004460; --cyan-900: #002840; /* TEAL — confirmación y éxito */ --teal-50: #E6FAF7; --teal-100: #B3F0E8; --teal-200: #66E0D1; --teal-300: #00CFB8; --teal-400: #00C4A8; --teal-500: #00A890; --teal-600: #008C78; --teal-700: #007060; --teal-800: #005448; --teal-900: #003830; /* WHITE — opacidades sobre oscuro */ --white: #FFFFFF; --white-95: rgba(255,255,255,.95); --white-80: rgba(255,255,255,.80); --white-60: rgba(255,255,255,.60); --white-50: rgba(255,255,255,.50); --white-30: rgba(255,255,255,.30); --white-20: rgba(255,255,255,.20); --white-10: rgba(255,255,255,.10); --white-06: rgba(255,255,255,.06); --white-03: rgba(255,255,255,.03); /* STATUS — urgencia y semánticos */ --red-400: #FF5252; --red-500: #EF4444; --red-600: #DC2626; --orange-400: #FF8C42; --orange-500: #F97316; --orange-600: #EA6C0A; --yellow-400: #F5C842; --yellow-500: #EAB308; --yellow-600: #CA8A04; --green-400: #4ADE80; --green-500: #22C55E; --green-600: #16A34A; /* LOGO — siempre sobre fondo oscuro */ --logo-bg: #06151E; --logo-white: #FFFFFF; --logo-cyan: #22B8F0; --logo-shade: #D1D5D8; /* ───── TYPOGRAPHY PRIMITIVES ───── */ --font-sans: 'Inter', system-ui, -apple-system, Segoe UI, sans-serif; --font-display: 'Sora', 'Inter', system-ui, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace; /* Scale (mobile-first, 16px base) */ --fs-xxs: 9px; --fs-xs: 10px; --fs-sm: 11px; --fs-base: 12px; --fs-md: 13px; --fs-lg: 14px; --fs-xl: 16px; --fs-2xl: 18px; --fs-3xl: 22px; --fs-4xl: 26px; /* Weights */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-black: 800; /* Line heights */ --lh-tight: 1.0; --lh-snug: 1.2; --lh-normal: 1.5; --lh-loose: 1.6; /* Letter spacing */ --tracking-tight: -0.5px; --tracking-snug: -0.3px; --tracking-normal: 0; --tracking-wide: 0.4px; --tracking-eyebrow: 0.5px; /* ───── SPACING ───── */ --space-1: 4px; --space-2: 6px; --space-3: 8px; --space-4: 10px; --space-5: 12px; --space-6: 14px; --space-7: 16px; --space-8: 20px; --space-9: 24px; --space-10: 32px; /* ───── RADII ───── */ --radius: 10px; --radius-sm: calc(var(--radius) * 0.6); --radius-md: calc(var(--radius) * 0.8); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) * 1.4); --radius-2xl: calc(var(--radius) * 1.8); --radius-3xl: calc(var(--radius) * 2.2); --radius-4xl: calc(var(--radius) * 2.6); --radius-xs: var(--radius-sm); --radius-pill: 999px; --radius-frame: 33px; --radius-bezel: 42px; /* ───── SHADOWS / ELEVATION ───── */ --shadow-card: 0 2px 20px rgba(0,0,0,.08); --shadow-sheet: 0 -8px 24px rgba(6,21,30,.10); --shadow-floating:0 4px 12px rgba(0,150,199,.18); --shadow-sos: 0 0 0 4px rgba(220,38,38,.12); /* ───── BORDERS ───── */ --border-soft: 1px solid #EEF4F8; --border-card: 1px solid #DDE8F0; --border-strong: 1px solid #D5E8F4; } /* ══════════════════════════════════════════ SEMANTIC TOKENS — LIGHT (default) ══════════════════════════════════════════ */ :root, [data-theme="light"] { --color-bg: var(--navy-50); --color-bg-alt: #F4FAFE; --color-surface: var(--white); --color-surface-raised: var(--white); --color-surface-subtle: var(--cyan-50); --color-surface-muted: #EEF4F8; --color-border: #D5E8F4; --color-border-soft: #EAF3FA; --color-border-card: #DDE8F0; --color-text-primary: #0D2137; --color-text-secondary: #6A8FAA; --color-text-tertiary: #7AAABE; --color-text-on-action: var(--white); --color-text-on-cta: var(--white); --color-action: var(--cyan-500); --color-action-hover: var(--cyan-600); --color-action-subtle: var(--cyan-50); --color-cta: var(--teal-500); --color-cta-hover: var(--teal-600); --color-success: var(--teal-500); --color-success-subtle: var(--teal-50); --color-success-border: #A8DDD0; --color-success-text: #0F5144; } /* ══════════════════════════════════════════ SEMANTIC TOKENS — DARK ══════════════════════════════════════════ */ .dark, [data-theme="dark"] { --color-bg: var(--navy-900); --color-bg-alt: var(--navy-800); --color-surface: var(--navy-700); --color-surface-raised: var(--white-06); --color-surface-subtle: var(--navy-600); --color-surface-muted: var(--navy-500); --color-border: var(--navy-500); --color-border-soft: var(--navy-600); --color-border-card: var(--navy-500); --color-text-primary: var(--white); --color-text-secondary: var(--white-80); --color-text-tertiary: var(--white-50); --color-text-on-action: var(--navy-900); --color-text-on-cta: var(--navy-900); --color-action: var(--cyan-400); --color-action-hover: var(--cyan-300); --color-action-subtle: rgba(34,184,240,.12); --color-cta: var(--teal-400); --color-cta-hover: var(--teal-300); --color-success: var(--teal-400); --color-success-subtle: rgba(0,196,168,.12); --color-success-border: rgba(0,196,168,.35); --color-success-text: var(--teal-200); } /* ══════════════════════════════════════════ SEMANTIC TYPOGRAPHY ══════════════════════════════════════════ */ body { font-family: var(--font-sans); color: var(--color-text-primary); font-size: var(--fs-base); line-height: var(--lh-normal); -webkit-font-smoothing: antialiased; }