/* * CUBRA Design System — tokens.css * Paleta "Clinical Trust" | version 1.0 * Complementa Open Props (CDN) y Tailwind v4 (CDN) */ :root { /* ── Brand colors ── */ --brand-primary: #0B5F7A; --brand-primary-dark: #063D50; --brand-primary-light: #1A7A9A; --brand-primary-10: #0B5F7A1A; /* 10% alpha – backgrounds sutiles */ --brand-accent: #22C4B4; --brand-accent-dark: #17A096; --brand-accent-10: #22C4B41A; --brand-accent-warm: #F4A261; --brand-accent-warm-dark: #E07D3A; /* ── Surfaces ── */ --surface: #FFFFFF; --surface-alt: #F5F8FA; --surface-dark: #0F1F2A; --surface-overlay: rgba(6, 61, 80, 0.72); /* ── Text ── */ --text: #0F1F2A; --text-muted: #4A5B67; --text-inverted: #FFFFFF; --text-on-accent: #0F1F2A; /* ── Borders ── */ --border: #E2E8EE; --border-strong: #B0BDC7; --border-focus: #0B5F7A; /* ── Feedback ── */ --success: #1C8A4E; --success-bg: #EAF7F0; --warning: #B45309; --warning-bg: #FEF3C7; --danger: #D43F3F; --danger-bg: #FDECEC; --info: #0B5F7A; --info-bg: #E8F3F8; /* ── Typography ── */ --font-sans: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif; --font-head: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif; --font-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace; --text-xs: 0.75rem; /* 12px */ --text-sm: 0.875rem; /* 14px */ --text-base: 1rem; /* 16px */ --text-lg: 1.125rem; /* 18px */ --text-xl: 1.25rem; /* 20px */ --text-2xl: 1.5rem; /* 24px */ --text-3xl: 1.875rem; /* 30px */ --text-4xl: 2.25rem; /* 36px */ --text-5xl: 3rem; /* 48px */ --leading-tight: 1.25; --leading-snug: 1.375; --leading-normal: 1.5; --leading-relaxed:1.625; --weight-normal: 400; --weight-medium: 500; --weight-semibold:600; --weight-bold: 700; /* ── Spacing (complementa Open Props --size-N) ── */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-16: 4rem; /* 64px */ --space-20: 5rem; /* 80px */ --space-24: 6rem; /* 96px */ /* ── Breakpoints (referencia, usar en @media) ── */ /* --bp-md: 768px; --bp-lg: 1024px; --bp-xl: 1280px */ /* ── Radii ── */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 20px; --radius-full: 9999px; /* ── Shadows ── */ --shadow-sm: 0 1px 3px rgba(15, 31, 42, 0.08); --shadow-md: 0 4px 12px rgba(15, 31, 42, 0.10); --shadow-lg: 0 8px 24px rgba(15, 31, 42, 0.12); --shadow-xl: 0 16px 40px rgba(15, 31, 42, 0.15); /* ── Transitions ── */ --transition-fast: 150ms ease; --transition-base: 250ms ease; --transition-slow: 400ms ease; /* ── Z-index ── */ --z-base: 1; --z-dropdown:100; --z-sticky: 200; --z-modal: 300; --z-toast: 400; } /* Dark mode (opcional, se activa con clase .dark en ) */ .dark { --surface: #0F1F2A; --surface-alt: #162638; --text: #EDF2F7; --text-muted: #90A4AE; --border: #263B4A; --border-strong: #3A5266; }