/* ================================================================ TOKENS · Asesoría Ratón Asociados Paleta : Confianza Atlántica (navy + oro) Visual : Cristal Atlántico (aurora + glass + refined) Fonts : Boutique Warm (Calistoga · Inter · JetBrains Mono) Sistema: light + dark via :root[data-theme="dark"] ================================================================ */ @property --aurora-angle { syntax: ""; inherits: false; initial-value: 220deg; } :root { /* -------- TYPOGRAPHY · families -------- */ --font-heading: "Calistoga", ui-serif, Georgia, "Times New Roman", serif; --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* -------- TYPOGRAPHY · fluid scale (clamp) -------- */ --text-xs: clamp(0.75rem, 0.72rem + 0.15cqi, 0.8125rem); --text-sm: clamp(0.875rem, 0.84rem + 0.18cqi, 0.9375rem); --text-base: clamp(1rem, 0.95rem + 0.25cqi, 1.0625rem); --text-lg: clamp(1.125rem, 1.05rem + 0.35cqi, 1.25rem); --text-xl: clamp(1.25rem, 1.15rem + 0.5cqi, 1.5rem); --text-2xl: clamp(1.5rem, 1.35rem + 0.75cqi, 1.875rem); --text-3xl: clamp(1.875rem, 1.6rem + 1.25cqi, 2.5rem); --text-4xl: clamp(2.25rem, 1.85rem + 2cqi, 3.25rem); --text-5xl: clamp(2.75rem, 2.1rem + 3cqi, 4.5rem); --text-6xl: clamp(3.5rem, 2.5rem + 4.5cqi, 6rem); /* -------- TYPOGRAPHY · weights, leading, tracking -------- */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --leading-tight: 1.12; --leading-snug: 1.28; --leading-normal: 1.55; --leading-relaxed: 1.7; --tracking-tighter: -0.025em; --tracking-tight: -0.015em; --tracking-normal: 0; --tracking-wide: 0.04em; --tracking-wider: 0.08em; /* -------- SPACING · 4 px base -------- */ --space-0: 0; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-7: 1.75rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-14: 3.5rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; --space-28: 7rem; --space-32: 8rem; --container-max: 1240px; --container-narrow: 880px; --container-prose: 68ch; /* -------- RADII -------- */ --radius-xs: 4px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 18px; --radius-xl: 24px; --radius-2xl: 32px; --radius-pill: 999px; /* -------- MOTION · refined, sin estridencias -------- */ --motion-instant: 80ms; --motion-fast: 180ms; --motion-base: 260ms; --motion-slow: 420ms; --motion-glacial: 720ms; --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-linear: linear; /* ============================================================ LIGHT THEME · Confianza Atlántica ============================================================ */ --color-bg: #F7F8FB; --color-surface: #FFFFFF; --color-surface-alt: #EEF1F6; --color-surface-sunk: #E4E9F1; --color-text: #0F1E33; --color-text-strong: #06101F; --color-text-muted: #4B5A72; --color-text-subtle: #6E7C92; --color-text-on-dark: #F7F8FB; --color-primary: #1E3A5F; --color-primary-strong: #14283F; --color-primary-soft: #2E5582; --color-on-primary: #FFFFFF; --color-accent: #A07A2F; --color-accent-strong: #7E5F22; --color-accent-soft: #C19A4A; --color-on-accent: #0F1E33; --color-border: #D8DEE8; --color-border-strong: #B9C2D1; --color-border-subtle: color-mix(in oklch, var(--color-border) 60%, transparent); --color-success: #16794B; --color-warning: #B45309; --color-danger: #B91C1C; --color-info: #1E3A5F; /* Tintes derivados (color-mix) — Regla 3 */ --color-primary-tint-08: color-mix(in oklch, var(--color-primary) 8%, transparent); --color-primary-tint-16: color-mix(in oklch, var(--color-primary) 16%, transparent); --color-primary-tint-32: color-mix(in oklch, var(--color-primary) 32%, transparent); --color-accent-tint-12: color-mix(in oklch, var(--color-accent) 12%, transparent); --color-accent-tint-24: color-mix(in oklch, var(--color-accent) 24%, transparent); /* -------- GLASS · cristal atlántico -------- */ --glass-bg: color-mix(in oklch, var(--color-surface) 72%, transparent); --glass-bg-strong: color-mix(in oklch, var(--color-surface) 88%, transparent); --glass-border: color-mix(in oklch, var(--color-primary) 12%, transparent); --glass-blur: saturate(140%) blur(18px); --glass-shadow: 0 1px 0 0 color-mix(in oklch, #FFFFFF 80%, transparent) inset, 0 20px 50px -20px color-mix(in oklch, var(--color-primary) 30%, transparent); /* -------- SHADOWS · capas suaves -------- */ --shadow-xs: 0 1px 2px 0 color-mix(in oklch, var(--color-primary) 8%, transparent); --shadow-sm: 0 2px 6px -1px color-mix(in oklch, var(--color-primary) 10%, transparent); --shadow-md: 0 8px 20px -6px color-mix(in oklch, var(--color-primary) 14%, transparent); --shadow-lg: 0 20px 40px -12px color-mix(in oklch, var(--color-primary) 18%, transparent); --shadow-xl: 0 30px 60px -20px color-mix(in oklch, var(--color-primary) 22%, transparent); --shadow-ring-primary: 0 0 0 3px color-mix(in oklch, var(--color-primary) 25%, transparent); --shadow-ring-accent: 0 0 0 3px color-mix(in oklch, var(--color-accent) 25%, transparent); /* -------- AURORA · background atmosférico -------- */ --bg-aurora: radial-gradient(60% 50% at 12% 8%, color-mix(in oklch, var(--color-primary) 14%, transparent) 0%, transparent 70%), radial-gradient(45% 40% at 92% 22%, color-mix(in oklch, var(--color-accent) 12%, transparent) 0%, transparent 75%), radial-gradient(55% 45% at 50% 110%, color-mix(in oklch, var(--color-primary-soft) 10%, transparent) 0%, transparent 70%); /* -------- GRADIENTS de marca -------- */ --gradient-primary: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-soft) 100%); --gradient-accent: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-soft) 100%); --gradient-mesh: conic-gradient(from var(--aurora-angle) at 30% 30%, var(--color-primary) 0deg, var(--color-primary-soft) 120deg, var(--color-accent) 240deg, var(--color-primary) 360deg); /* -------- Z-INDEX scale -------- */ --z-base: 0; --z-raised: 10; --z-overlay: 100; --z-modal: 1000; --z-toast: 2000; --z-skip: 9999; } /* ================================================================ DARK THEME · Confianza Atlántica nocturno ================================================================ */ :root[data-theme="dark"] { --color-bg: #0A1424; --color-surface: #0F1E33; --color-surface-alt: #14283F; --color-surface-sunk: #060E1B; --color-text: #F2F4F8; --color-text-strong: #FFFFFF; --color-text-muted: #B7C1D4; --color-text-subtle: #8997AE; --color-text-on-dark: #F2F4F8; --color-primary: #6FA0D8; --color-primary-strong: #93B8E5; --color-primary-soft: #3E6DA2; --color-on-primary: #06101F; --color-accent: #D4A858; --color-accent-strong: #E5BE76; --color-accent-soft: #A07A2F; --color-on-accent: #0F1E33; --color-border: #1F3252; --color-border-strong: #2E4670; --color-border-subtle: color-mix(in oklch, var(--color-border) 60%, transparent); --color-success: #4ADE80; --color-warning: #FBBF24; --color-danger: #F87171; --color-info: #93B8E5; --color-primary-tint-08: color-mix(in oklch, var(--color-primary) 10%, transparent); --color-primary-tint-16: color-mix(in oklch, var(--color-primary) 20%, transparent); --color-primary-tint-32: color-mix(in oklch, var(--color-primary) 40%, transparent); --color-accent-tint-12: color-mix(in oklch, var(--color-accent) 16%, transparent); --color-accent-tint-24: color-mix(in oklch, var(--color-accent) 30%, transparent); --glass-bg: color-mix(in oklch, var(--color-surface) 60%, transparent); --glass-bg-strong: color-mix(in oklch, var(--color-surface) 82%, transparent); --glass-border: color-mix(in oklch, var(--color-primary) 22%, transparent); --glass-blur: saturate(160%) blur(20px); --glass-shadow: 0 1px 0 0 color-mix(in oklch, var(--color-primary) 30%, transparent) inset, 0 24px 60px -24px #000000; --shadow-xs: 0 1px 2px 0 rgba(0,0,0,0.4); --shadow-sm: 0 2px 6px -1px rgba(0,0,0,0.45); --shadow-md: 0 10px 24px -8px rgba(0,0,0,0.55); --shadow-lg: 0 24px 50px -16px rgba(0,0,0,0.6); --shadow-xl: 0 36px 70px -24px rgba(0,0,0,0.7); --shadow-ring-primary: 0 0 0 3px color-mix(in oklch, var(--color-primary) 35%, transparent); --shadow-ring-accent: 0 0 0 3px color-mix(in oklch, var(--color-accent) 35%, transparent); --bg-aurora: radial-gradient(60% 50% at 12% 8%, color-mix(in oklch, var(--color-primary) 22%, transparent) 0%, transparent 70%), radial-gradient(45% 40% at 92% 22%, color-mix(in oklch, var(--color-accent) 14%, transparent) 0%, transparent 75%), radial-gradient(55% 45% at 50% 110%, color-mix(in oklch, var(--color-primary-soft) 18%, transparent) 0%, transparent 70%); } /* Auto dark — respeta preferencia del SO si no hay override explícito */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; } }