/* ========================================================================== Codrex ยท Design tokens Fuente de verdad: apps/dna-codrex/docs/brand.md (Appendix A) + brand CLAUDE.md. Reglas: paleta pastel iridiscente como ACENTO sobre base luminosa. Light por defecto (nunca dark por prefers-color-scheme). Cero verde lima OH WOW!. ========================================================================== */ :root { /* --- Core palette (brand.md 2.1) --- */ --codrex-perla: #F7F8FA; --codrex-plata: #E6E8ED; --codrex-grafito: #1A1D22; --codrex-violeta: #7B69FF; --codrex-menta: #B7F3E0; --codrex-calido: #FFD7B8; /* Iridescent accents derived from the LIQUID CORTEX blob (for gradients only) */ --codrex-lavanda: #C9C2FF; --codrex-cielo: #BFE0FF; --codrex-cyan: #A7EFE4; --codrex-rosa: #FFD3EC; /* --- Semantic (light mode default) --- */ --color-bg-primary: var(--codrex-perla); --color-bg-secondary: #FFFFFF; --color-bg-tertiary: var(--codrex-plata); --color-text-primary: var(--codrex-grafito); --color-text-secondary: #5B616B; --color-text-tertiary: #9CA3AF; --color-border: var(--codrex-plata); --color-border-subtle: rgba(0, 0, 0, 0.06); /* Violeta accesible para texto/interactivos (AA 4.5+ sobre base clara); el brand #7B69FF queda para gradients, mesh y decorativo. Mismo patron que el badge ClickUp #6741D9. */ --color-accent: #6A56F0; --color-accent-hover: #5A46E0; --color-accent-solid: #6A56F0; /* fondo de boton primario: blanco encima = 4.99:1 */ --color-accent-solid-hover: #5A46E0; --color-accent-subtle: rgba(123, 105, 255, 0.08); --color-accent-line: rgba(123, 105, 255, 0.18); --color-success: var(--codrex-menta); --color-success-text: #065F46; --color-warning: var(--codrex-calido); --color-warning-text: #92400E; --color-on-accent: #FFFFFF; /* Surface used behind pastel/tinted sections (kept luminous, never drenched) */ --color-wash: #F1F0FF; --color-wash-strong: #ECEAFF; /* --- Glassmorphism (archetype 04) --- */ --glass: rgba(255, 255, 255, 0.55); --glass-2: rgba(255, 255, 255, 0.32); --glass-strong: rgba(255, 255, 255, 0.72); --glass-border: rgba(255, 255, 255, 0.70); --glass-blur: 18px; --glass-shadow: 0 24px 60px rgba(31, 41, 55, 0.12); --glass-shadow-lg: 0 40px 90px rgba(31, 41, 55, 0.16); /* iridescent mesh stops (pastel over cream) */ --mesh-1: #C9C2FF; --mesh-2: #A7EFE4; --mesh-3: #FFD3EC; --mesh-4: #BFE0FF; --mesh-alpha: 0.55; /* --- Typography (brand.md 3) --- */ --font-primary: 'PP Neue Montreal', 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-regular: 400; --font-medium: 500; --font-semibold: 600; --font-bold: 700; --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: 2rem; /* 32px */ --text-4xl: 3rem; /* 48px */ /* Marketing display sizes (fluid). Extension over the dashboard scale. */ --text-5xl: clamp(2.5rem, 1.6rem + 4vw, 4rem); /* h2 hero-ish */ --text-6xl: clamp(3rem, 1.4rem + 6.4vw, 5.5rem); /* hero h1 */ --leading-tight: 1.08; --leading-snug: 1.2; --leading-normal: 1.5; --leading-relaxed: 1.65; --tracking-tight: -0.02em; --tracking-snug: -0.035em; --tracking-normal: 0; --tracking-wide: 0.02em; --tracking-wider: 0.14em; /* --- Spacing (brand.md 7) --- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-24: 96px; --space-32: 128px; /* --- Radius (brand.md 7.5) --- */ --radius-xs: 4px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 20px; --radius-xl: 28px; --radius-full: 999px; /* --- Shadows (soft, premium; never heavy) --- */ --shadow-xs: 0 1px 2px rgba(26, 29, 34, 0.04); --shadow-sm: 0 1px 3px rgba(26, 29, 34, 0.05), 0 1px 2px rgba(26, 29, 34, 0.03); --shadow-md: 0 8px 24px rgba(26, 29, 34, 0.07); --shadow-lg: 0 24px 60px rgba(26, 29, 34, 0.10); --shadow-glow: 0 20px 80px rgba(123, 105, 255, 0.18); /* --- Motion (brand.md 8.1) --- */ --transition-fast: 150ms ease; --transition-base: 200ms ease; --transition-medium: 300ms ease-out; --transition-slow: 500ms ease-out; /* --- Layout --- */ --container: 1200px; --container-wide: 1320px; --container-text: 720px; --nav-h: 68px; } [data-theme="dark"] { --color-bg-primary: var(--codrex-grafito); --color-bg-secondary: #23262D; --color-bg-tertiary: #2E3139; --color-text-primary: var(--codrex-perla); --color-text-secondary: #A2A9B4; --color-text-tertiary: #6B7280; --color-border: rgba(255, 255, 255, 0.10); --color-border-subtle: rgba(255, 255, 255, 0.05); /* En oscuro el acento de texto sube de luminancia para AA sobre grafito/cards */ --color-accent: #A99DFF; --color-accent-hover: #BDB3FF; --color-accent-solid: #6A56F0; --color-accent-solid-hover: #5A46E0; --color-accent-subtle: rgba(123, 105, 255, 0.16); --color-accent-line: rgba(123, 105, 255, 0.32); --color-success: var(--codrex-menta); --color-success-text: #B7F3E0; --color-warning: var(--codrex-calido); --color-warning-text: #FFD7B8; --color-on-accent: #FFFFFF; --color-wash: #202430; --color-wash-strong: #242942; --glass: rgba(42, 46, 60, 0.55); --glass-2: rgba(42, 46, 60, 0.32); --glass-strong: rgba(46, 50, 66, 0.75); --glass-border: rgba(255, 255, 255, 0.14); --glass-shadow: 0 24px 60px rgba(0, 0, 0, 0.45); --glass-shadow-lg: 0 40px 90px rgba(0, 0, 0, 0.55); --mesh-1: #7B69FF; --mesh-2: #3A86FF; --mesh-3: #C33C8B; --mesh-4: #12B5A0; --mesh-alpha: 0.40; --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.30); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.35); --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.40); --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.50); --shadow-glow: 0 20px 90px rgba(123, 105, 255, 0.28); }