/* * ============================================================ * DESIGN SYSTEM — TOKENS * ============================================================ * * Fuente de verdad visual del producto. * * La SPA y la landing deben consumir estos tokens. * No definir aquí estilos de componentes concretos. * * ============================================================ */ :root { /* ========================================================== TYPOGRAPHY ========================================================== */ --ds-font-sans: 'Geist Variable', sans-serif; --ds-font-heading: var(--ds-font-sans); /* ========================================================== COLORS — LIGHT ========================================================== */ --ds-background: oklch(1 0 0); --ds-foreground: oklch(0.145 0 0); --ds-primary: oklch(0.205 0 0); --ds-primary-foreground: oklch(0.985 0 0); --ds-secondary: oklch(0.97 0 0); --ds-secondary-foreground: oklch(0.205 0 0); --ds-muted: oklch(0.97 0 0); --ds-muted-foreground: oklch(0.556 0 0); --ds-accent: oklch(0.97 0 0); --ds-accent-foreground: oklch(0.205 0 0); --ds-card: oklch(1 0 0); --ds-card-foreground: oklch(0.145 0 0); --ds-popover: oklch(1 0 0); --ds-popover-foreground: oklch(0.145 0 0); --ds-border: oklch(0.922 0 0); --ds-input: oklch(0.922 0 0); --ds-ring: oklch(0.708 0 0); --ds-destructive: oklch(0.577 0.245 27.325); /* ========================================================== COLORS — DARK ========================================================== */ --ds-dark-background: oklch(0.145 0 0); --ds-dark-foreground: oklch(0.985 0 0); --ds-dark-primary: oklch(0.701 0.201 44.8); --ds-dark-primary-foreground: oklch(0.145 0 0); --ds-dark-secondary: oklch(0.269 0 0); --ds-dark-secondary-foreground: oklch(0.985 0 0); --ds-dark-muted: oklch(0.269 0 0); --ds-dark-muted-foreground: oklch(0.708 0 0); --ds-dark-accent: oklch(0.269 0 0); --ds-dark-accent-foreground: oklch(0.985 0 0); --ds-dark-card: oklch(0.205 0 0); --ds-dark-card-foreground: oklch(0.985 0 0); --ds-dark-popover: oklch(0.205 0 0); --ds-dark-popover-foreground: oklch(0.985 0 0); --ds-dark-border: oklch(1 0 0 / 10%); --ds-dark-input: oklch(1 0 0 / 15%); --ds-dark-ring: oklch(0.749 0.170 52.5); --ds-dark-destructive: oklch(0.704 0.191 22.216); --ds-preview-new: color-mix( in oklch, var(--ds-primary) 6%, transparent ); /* ========================================================== RADIUS ========================================================== */ --ds-radius-base: 0.625rem; --ds-radius-sm: calc(var(--ds-radius-base) * 0.6); --ds-radius-md: calc(var(--ds-radius-base) * 0.8); --ds-radius-lg: var(--ds-radius-base); --ds-radius-xl: calc(var(--ds-radius-base) * 1.4); --ds-radius-2xl: calc(var(--ds-radius-base) * 1.8); --ds-radius-3xl: calc(var(--ds-radius-base) * 2.2); --ds-radius-4xl: calc(var(--ds-radius-base) * 2.6); /* ========================================================== SPACING ========================================================== */ --ds-space-1: 0.25rem; --ds-space-2: 0.5rem; --ds-space-3: 0.75rem; --ds-space-4: 1rem; --ds-space-5: 1.25rem; --ds-space-6: 1.5rem; --ds-space-8: 2rem; --ds-space-10: 2.5rem; --ds-space-12: 3rem; --ds-space-16: 4rem; --ds-space-20: 5rem; --ds-space-24: 6rem; /* ========================================================== MOTION ========================================================== */ --ds-duration-fast: 150ms; --ds-duration-normal: 250ms; --ds-duration-slow: 400ms; --ds-ease-standard: cubic-bezier(0.2, 0, 0, 1); --ds-ease-emphasized: cubic-bezier(0.16, 1, 0.3, 1); /* ========================================================== SHADOWS ========================================================== */ --ds-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.05); --ds-shadow-md: 0 4px 12px rgb(0 0 0 / 0.08); --ds-shadow-lg: 0 12px 32px rgb(0 0 0 / 0.10); /* ========================================================== LAYOUT ========================================================== */ --ds-container-sm: 640px; --ds-container-md: 768px; --ds-container-lg: 1024px; --ds-container-xl: 1280px; --ds-content-max-width: 1200px; /* ========================================================== SIDEBAR ========================================================== */ --ds-sidebar: oklch(0.985 0 0); --ds-sidebar-foreground: oklch(0.145 0 0); --ds-sidebar-primary: oklch(0.205 0 0); --ds-sidebar-primary-foreground: oklch(0.985 0 0); --ds-sidebar-accent: oklch(0.97 0 0); --ds-sidebar-accent-foreground: oklch(0.205 0 0); --ds-sidebar-border: oklch(0.922 0 0); --ds-sidebar-ring: oklch(0.708 0 0); /* ========================================================== CHARTS ========================================================== */ --ds-chart-1: oklch(0.87 0 0); --ds-chart-2: oklch(0.556 0 0); --ds-chart-3: oklch(0.439 0 0); --ds-chart-4: oklch(0.371 0 0); --ds-chart-5: oklch(0.269 0 0); } /* * ============================================================ * DARK MODE * ============================================================ */ .dark { --ds-background: var(--ds-dark-background); --ds-foreground: var(--ds-dark-foreground); --ds-primary: var(--ds-dark-primary); --ds-primary-foreground: var(--ds-dark-primary-foreground); --ds-secondary: var(--ds-dark-secondary); --ds-secondary-foreground: var(--ds-dark-secondary-foreground); --ds-muted: var(--ds-dark-muted); --ds-muted-foreground: var(--ds-dark-muted-foreground); --ds-accent: var(--ds-dark-accent); --ds-accent-foreground: var(--ds-dark-accent-foreground); --ds-card: var(--ds-dark-card); --ds-card-foreground: var(--ds-dark-card-foreground); --ds-popover: var(--ds-dark-popover); --ds-popover-foreground: var(--ds-dark-popover-foreground); --ds-border: var(--ds-dark-border); --ds-input: var(--ds-dark-input); --ds-ring: var(--ds-dark-ring); --ds-destructive: var(--ds-dark-destructive); /* Sidebar */ --ds-sidebar: oklch(0.205 0 0); --ds-sidebar-foreground: oklch(0.985 0 0); --ds-sidebar-primary: oklch(0.701 0.201 44.8); --ds-sidebar-primary-foreground: oklch(0.145 0 0); --ds-sidebar-accent: oklch(0.269 0 0); --ds-sidebar-accent-foreground: oklch(0.985 0 0); --ds-sidebar-border: oklch(1 0 0 / 10%); --ds-sidebar-ring: oklch(0.749 0.170 52.5); }