@import url("https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap"); /* ========================================================================== A1 Admin — Standalone shadcn/ui design system (token-driven, Pico-free) Mobile-first: base = small screens; desktop via min-width media queries. Dark mode: .dark on (data-theme="dark" honored as a legacy alias). ========================================================================== */ /* -------------------------------------------------------------------------- 1. TOKENS — reference :root block, verbatim (HSL channels) -------------------------------------------------------------------------- */ :root { --background: 0 0% 100%; --foreground: 217 33% 17%; --card: 0 0% 100%; --card-foreground: 217 33% 17%; --popover: 0 0% 100%; --popover-foreground: 217 33% 17%; --primary: 217 91% 60%; --primary-foreground: 0 0% 100%; --secondary: 210 40% 96%; --secondary-foreground: 217 33% 17%; --muted: 210 40% 96%; --muted-foreground: 215 19% 35%; --accent: 210 40% 96%; --accent-foreground: 217 33% 17%; --destructive: 0 84% 60%; --destructive-foreground: 0 0% 100%; --border: 214 32% 91%; --input: 214 32% 91%; --ring: 217 91% 60%; --success: 142 71% 45%; --warning: 38 92% 50%; --radius: 0.5rem; /* Derived neutrals */ --border-strong: 215 16% 65%; /* slate-400-ish */ --subtle: 210 40% 98%; /* slate-50 */ --sidebar-bg: 217 33% 17%; --sidebar-header-bg: 222 47% 11%; /* Radius scale */ --radius-md: calc(var(--radius) - 2px); --radius-sm: calc(var(--radius) - 4px); --radius-lg: var(--radius); /* Shadows */ --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05); --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); --ring-soft: hsl(var(--ring) / 0.25); --transition: background-color .15s, color .15s, border-color .15s, box-shadow .15s, opacity .15s; /* ---- Legacy aliases (inline style="" consumers) ---- */ --primary-color: hsl(var(--primary)); --primary-hover: hsl(var(--primary) / 0.9); --secondary-color: hsl(var(--muted-foreground)); --bg-light: hsl(var(--muted)); --bg-sidebar: hsl(var(--sidebar-bg)); --border-color: hsl(var(--border)); --text-main: hsl(var(--foreground)); --text-muted: hsl(var(--muted-foreground)); --accent-edit: hsl(var(--warning)); --accent-edit-hover: hsl(38 92% 42%); --accent-delete: hsl(var(--destructive)); --accent-delete-hover: hsl(0 84% 52%); --accent-success: hsl(var(--success)); --pico-font-family: "Rubik", system-ui, -apple-system, sans-serif; --pico-border-radius: var(--radius-md); --pico-primary: hsl(var(--primary)); --pico-primary-hover: hsl(var(--primary) / 0.9); --pico-primary-background: hsl(var(--primary)); --pico-primary-hover-background: hsl(var(--primary) / 0.9); --pico-primary-focus: var(--ring-soft); --pico-primary-inverse: hsl(var(--primary-foreground)); --pico-form-element-spacing-horizontal: 0.75rem; --pico-form-element-spacing-vertical: 0.5rem; --pico-font-size: 0.875rem; --pico-line-height: 1.5; --pico-form-element-border-color: hsl(var(--input)); --pico-form-element-active-border-color: hsl(var(--primary)); --pico-form-element-focus-color: transparent; --pico-box-shadow: var(--shadow-sm); --pico-muted-color: hsl(var(--muted-foreground)); --pico-muted-border-color: hsl(var(--border)); --pico-border-color: hsl(var(--border)); --pico-color: hsl(var(--foreground)); --pico-background-color: hsl(var(--background)); --pico-card-background-color: hsl(var(--card)); --pico-card-border-color: hsl(var(--border)); --pico-card-sectioning-background-color: hsl(var(--muted)); --pico-h1-color: hsl(var(--foreground)); --pico-h2-color: hsl(var(--foreground)); --pico-h3-color: hsl(var(--foreground)); --pico-h4-color: hsl(var(--foreground)); --pico-h5-color: hsl(var(--foreground)); --pico-h6-color: hsl(var(--foreground)); } /* ---- Dark mode: reference .dark block, verbatim; data-theme is a legacy alias ---- */ .dark, [data-theme="dark"] { --background: 240 10% 3.9%; --foreground: 0 0% 98%; --card: 240 6% 6%; --card-foreground: 0 0% 98%; --popover: 240 6% 6%; --popover-foreground: 0 0% 98%; --primary: 217 91% 60%; --primary-foreground: 0 0% 100%; --secondary: 240 3.7% 15.9%; --secondary-foreground: 0 0% 98%; --muted: 240 3.7% 15.9%; --muted-foreground: 240 5% 64.9%; --accent: 240 3.7% 15.9%; --accent-foreground: 0 0% 98%; --destructive: 0 72% 50%; --destructive-foreground: 0 0% 98%; --border: 240 3.7% 15.9%; --input: 240 3.7% 15.9%; --ring: 217 91% 60%; --success: 142 71% 45%; --warning: 38 92% 50%; --border-strong: 240 5% 34%; --subtle: 240 6% 10%; --sidebar-bg: 222 47% 11%; --sidebar-header-bg: 229 84% 5%; --bg-light: hsl(var(--subtle)); --bg-sidebar: hsl(var(--sidebar-bg)); --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.4); --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.5), 0 1px 2px -1px rgb(0 0 0 / 0.5); --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.5), 0 2px 4px -2px rgb(0 0 0 / 0.5); --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.55), 0 4px 6px -4px rgb(0 0 0 / 0.5); } /* -------------------------------------------------------------------------- 2. BASE — reset + native element styling (replaces Pico base layer) -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { width: 100%; overflow-x: hidden; font-size: clamp(13px, 0.9vw + 0.4vh, 16px); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { margin: 0; padding: 0; width: 100%; min-height: 100%; overflow-x: hidden; font-family: var(--pico-font-family); background: hsl(var(--background)); color: hsl(var(--foreground)); font-size: 0.875rem; line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, h4, h5, h6 { color: hsl(var(--foreground)); font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; margin: 0 0 0.5rem; } h1 { font-size: 1.5rem; } h2 { font-size: 1.25rem; } h3 { font-size: 1.1rem; } p { margin: 0 0 0.75rem; } a { color: hsl(var(--primary)); text-decoration: none; } a:hover { text-decoration: underline; } ul, ol { margin: 0 0 0.75rem; padding-left: 1.25rem; } hr { border: none; border-top: 1px solid hsl(var(--border)); margin: 1rem 0; } img, svg { max-width: 100%; } nav ul { list-style: none; padding: 0; margin: 0; } :focus-visible { outline: none; } [hidden] { display: none !important; } [aria-busy="true"] { cursor: progress; } ::selection { background: hsl(var(--primary) / 0.25); } /* Subtle scrollbars */ * { scrollbar-width: thin; scrollbar-color: hsl(var(--border)) transparent; } ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-thumb { background: hsl(var(--border)); border-radius: 999px; } ::-webkit-scrollbar-track { background: transparent; } /* Disable Pico's native tooltip pseudo-elements (custom JS tooltip is used) */ [data-tooltip]:not([data-tooltip=""])::before, [data-tooltip]:not([data-tooltip=""])::after { display: none; } /* Responsive grid utility */ .grid { display: grid; grid-template-columns: 1fr; gap: 1rem; } @media (min-width: 768px) { .grid { grid-auto-flow: column; grid-auto-columns: 1fr; } } /* -------------------------------------------------------------------------- 3. BUTTONS — one canonical recipe; raw