/* ============================================================ DESIGN TOKENS — Nahomi García Design System Fuente: Claude Design project 972f1497-31b1-4994-a2bb-4bb6027cc115 Nota: las fuentes se cargan desde (preload + link), no aquí, para evitar una segunda descarga y no bloquear el render. ============================================================ */ :root { /* ── Paleta Rosa ── */ --pink-50: #FDF5F6; --pink-100: #FBE9EB; --pink-200: #F5D4D8; --pink-300: #F0BFBF; --pink-400: #E9ACB1; --pink-500: #DD8F96; --pink-600: #C36A73; --pink-700: #9C4E56; --pink-800: #6E3841; /* ── Paleta Salvia ── */ --sage-50: #F2FAF6; --sage-100: #E1F3EA; --sage-200: #C7E8D6; --sage-300: #9BCBB5; --sage-400: #7DB89E; --sage-500: #5C9E82; --sage-600: #467E65; --sage-700: #325C4A; /* ── Neutros cálidos ── */ --neutral-0: #FFFFFF; --neutral-25: #FDFBFA; --neutral-50: #FAF7F5; --neutral-100: #F2EDE9; --neutral-200: #E8E0DB; --neutral-300: #D4C9C2; --neutral-400: #B8A9A0; --neutral-500: #7D6F68; --neutral-600: #5C4F49; --neutral-700: #453B36; --neutral-800: #322A26; --neutral-900: #201A17; /* ── Semánticos ── */ --surface-page: var(--neutral-25); --surface-base: var(--neutral-0); --surface-subtle: var(--neutral-50); --surface-pink: var(--pink-50); --surface-sage: var(--sage-50); --content-primary: var(--neutral-800); --content-secondary: var(--neutral-600); --content-muted: var(--neutral-500); --content-inverse: var(--neutral-0); --content-link: var(--sage-600); --border-default: var(--neutral-200); --border-subtle: var(--neutral-100); --border-strong: var(--neutral-300); /* Colores de marca */ --color-primary: var(--pink-400); --color-primary-dark: var(--pink-700); --color-secondary: var(--sage-400); --color-secondary-dark:var(--sage-700); /* Ring de foco (WCAG AA) */ --focus-ring: 0 0 0 3px rgba(233, 172, 177, 0.5); /* ── Tipografía ── */ --font-display: 'Playfair Display', 'Georgia', serif; --font-body: 'Work Sans', -apple-system, 'Segoe UI', sans-serif; --text-h1-size: 2.75rem; /* 44px */ --text-h1-lh: 1.15; --text-h1-weight: 700; --text-h2-size: 2.125rem; /* 34px */ --text-h2-lh: 1.2; --text-h2-weight: 600; --text-h3-size: 1.625rem; /* 26px */ --text-h3-lh: 1.25; --text-h3-weight: 600; --text-h4-size: 1.25rem; /* 20px */ --text-h4-lh: 1.3; --text-h4-weight: 600; --text-body-lg-size: 1.1875rem; /* 19px */ --text-body-size: 1rem; /* 16px */ --text-small-size: 0.875rem; /* 14px */ --text-xs-size: 0.75rem; /* 12px */ --text-body-lh: 1.65; --tracking-caps: 0.12em; /* ── Espaciado (8-point grid) ── */ --space-xs: 0.5rem; /* 8px */ --space-sm: 0.75rem; /* 12px */ --space-md: 1rem; /* 16px */ --space-lg: 1.5rem; /* 24px */ --space-xl: 2rem; /* 32px */ --space-2xl: 3rem; /* 48px */ --space-3xl: 4rem; /* 64px */ --space-4xl: 6rem; /* 96px */ --space-5xl: 8rem; /* 128px */ --content-max-width: 72.5rem; /* 1160px */ --content-max-width-narrow: 45rem; /* 720px */ --padding-global: var(--space-lg); /* ── Radios ── */ --radius-sm: 0.375rem; /* 6px */ --radius-md: 0.625rem; /* 10px */ --radius-lg: 1rem; /* 16px */ --radius-xl: 1.5rem; /* 24px */ --radius-full: 9999px; /* ── Sombras (tonalidad cálida) ── */ --shadow-sm: 0 1px 3px rgba(50, 42, 38, 0.08), 0 1px 2px rgba(50, 42, 38, 0.05); --shadow-md: 0 4px 16px rgba(50, 42, 38, 0.08), 0 2px 6px rgba(50, 42, 38, 0.04); --shadow-lg: 0 8px 32px rgba(50, 42, 38, 0.10), 0 4px 12px rgba(50, 42, 38, 0.06); --shadow-pink-glow: 0 6px 20px rgba(233, 172, 177, 0.35); --shadow-sage-glow: 0 6px 20px rgba(155, 203, 181, 0.30); /* ── Transiciones ── */ --transition-fast: 150ms ease; --transition-base: 250ms ease; --transition-slow: 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94); /* ── z-index ── */ --z-base: 0; --z-raised: 10; --z-nav: 100; --z-overlay: 200; --z-modal: 300; } /* ── Preferencia de reducción de movimiento ── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }