/* ========================================================= WhiskersAdmin design tokens Themes are switched by [data-theme="light|dark"] on . ========================================================= */ :root { /* Brand */ --brand-teal: #3E9CC4; --brand-cyan: #62C4DA; --brand-teal-dark: #2A84AB; --brand-gradient: linear-gradient(135deg, #3E9CC4 0%, #62C4DA 100%); --brand-coral: #F97259; /* Type */ --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-display: "Plus Jakarta Sans", var(--font-sans); --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; /* Fluid type scale */ --text-xs: 0.75rem; /* 12 */ --text-sm: 0.875rem; /* 14 */ --text-base: 1rem; /* 16 */ --text-lg: 1.125rem; /* 18 */ --text-xl: 1.25rem; /* 20 */ --text-2xl: 1.5rem; /* 24 */ --text-3xl: 1.875rem; /* 30 */ --text-4xl: 2.25rem; /* 36 */ --leading-tight: 1.2; --leading-snug: 1.35; --leading-normal: 1.5; --leading-relaxed: 1.65; --tracking-tight: -0.015em; --tracking-normal: 0; --tracking-wide: 0.04em; /* Spacing (4px scale) */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; /* Radii */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 20px; --radius-pill: 999px; /* Motion */ --dur-fast: 120ms; --dur-med: 200ms; --dur-slow: 320ms; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* Layout */ --topbar-h: 56px; --bottomnav-h: 64px; --sidebar-w: 244px; --content-max: 1100px; --page-gutter: 1rem; } /* ------------------- LIGHT THEME ------------------- */ :root, [data-theme="light"] { --bg: #F4F7FA; --bg-elev: #FFFFFF; --surface: #FFFFFF; --surface-sunken: #EEF2F6; --border: #E2E8EF; --border-strong: #CBD5E1; --ink: #0F172A; --ink-soft: #334155; --ink-muted: #64748B; --ink-subtle: #94A3B8; --on-brand: #FFFFFF; --primary: #2A84AB; --primary-hover: #236F90; --primary-soft: #E5F1F7; --primary-ring: rgba(42, 132, 171, 0.35); --accent: #F97259; --accent-soft: #FFE7E0; --success: #10B981; --success-soft: #D1FAE5; --danger: #E11D48; --danger-soft: #FFE4E6; --warning: #D97706; --warning-soft: #FEF3C7; --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05), 0 1px 3px rgba(15, 23, 42, 0.04); --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.04); --shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.1), 0 2px 6px rgba(15, 23, 42, 0.05); --shadow-ring: 0 0 0 4px var(--primary-ring); --scrim: rgba(15, 23, 42, 0.45); color-scheme: light; } /* ------------------- DARK THEME ------------------- */ [data-theme="dark"] { --bg: #0B1220; --bg-elev: #111A2B; --surface: #111A2B; --surface-sunken: #0B1220; --border: #1E2A40; --border-strong: #2A3A55; --ink: #E2E8F0; --ink-soft: #CBD5E1; --ink-muted: #94A3B8; --ink-subtle: #64748B; --on-brand: #0B1220; --primary: #5BB4D1; --primary-hover: #77C6DE; --primary-soft: rgba(91, 180, 209, 0.12); --primary-ring: rgba(91, 180, 209, 0.35); --accent: #FF8A74; --accent-soft: rgba(255, 138, 116, 0.12); --success: #34D399; --success-soft: rgba(52, 211, 153, 0.15); --danger: #FB7185; --danger-soft: rgba(251, 113, 133, 0.15); --warning: #FBBF24; --warning-soft: rgba(251, 191, 36, 0.15); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.4); --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.55); --shadow-ring: 0 0 0 4px var(--primary-ring); --scrim: rgba(0, 0, 0, 0.6); color-scheme: dark; }