/* SQ5 base theme — shadcn design tokens (zinc) as native CSS custom properties, so the generic renderer reads as shadcn-grade, not generic admin-panel (§5.2). No Tailwind, no build. Defaults to LIGHT: index.html sets , which suppresses the prefers-color-scheme:dark override below until a proper dark theme ships (then a toggle swaps to the .dark class). color-scheme keeps native UI (scrollbars, form controls) matched to the token theme. */ :root { color-scheme: light; --background: 0 0% 100%; --foreground: 240 10% 3.9%; --card: 0 0% 100%; --card-foreground: 240 10% 3.9%; --primary: 240 5.9% 10%; --primary-foreground: 0 0% 98%; --secondary: 240 4.8% 95.9%; --secondary-foreground: 240 5.9% 10%; --muted: 240 4.8% 95.9%; --muted-foreground: 240 3.8% 46.1%; --accent: 240 4.8% 95.9%; --accent-foreground: 240 5.9% 10%; --destructive: 0 72% 51%; --destructive-foreground: 0 0% 98%; --border: 240 5.9% 90%; --input: 240 5.9% 90%; --ring: 240 5% 64.9%; --radius: 0.5rem; --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } .dark { color-scheme: dark; --background: 240 10% 3.9%; --foreground: 0 0% 98%; --card: 240 10% 5.9%; --card-foreground: 0 0% 98%; --primary: 0 0% 98%; --primary-foreground: 240 5.9% 10%; --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 62.8% 50%; --destructive-foreground: 0 0% 98%; --border: 240 3.7% 18%; --input: 240 3.7% 18%; --ring: 240 4.9% 60%; } @media (prefers-color-scheme: dark) { :root:not(.light) { --background: 240 10% 3.9%; --foreground: 0 0% 98%; --card: 240 10% 5.9%; --card-foreground: 0 0% 98%; --primary: 0 0% 98%; --primary-foreground: 240 5.9% 10%; --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%; --border: 240 3.7% 18%; --input: 240 3.7% 18%; --ring: 240 4.9% 60%; } } * { box-sizing: border-box; } html, body { margin: 0; background: hsl(var(--background)); color: hsl(var(--foreground)); font-family: var(--font, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif); font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; } h1, h2, h3 { font-weight: 600; letter-spacing: -0.01em; margin: 0; } /* Buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; height: 2.25rem; padding: 0 .875rem; border-radius: var(--radius); border: 1px solid transparent; font-size: .875rem; font-weight: 500; cursor: pointer; background: hsl(var(--secondary)); color: hsl(var(--secondary-foreground)); transition: background .15s, border-color .15s, opacity .15s; } .btn:hover { background: hsl(var(--accent)); } .btn:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 2px; } .btn-primary { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); } .btn-primary:hover { opacity: .9; background: hsl(var(--primary)); } .btn-outline { background: transparent; border-color: hsl(var(--border)); color: hsl(var(--foreground)); } .btn-outline:hover { background: hsl(var(--accent)); } .btn-ghost { background: transparent; color: hsl(var(--foreground)); } .btn-ghost:hover { background: hsl(var(--accent)); } .btn-danger { background: transparent; color: hsl(var(--destructive)); border-color: transparent; } .btn-danger:hover { background: hsl(var(--destructive) / .1); } .btn-sm { height: 1.875rem; padding: 0 .625rem; font-size: .8125rem; } .btn:disabled { opacity: .5; cursor: not-allowed; } /* Inputs */ .input, .select, .textarea { width: 100%; height: 2.25rem; padding: 0 .75rem; border-radius: var(--radius); border: 1px solid hsl(var(--input)); background: hsl(var(--background)); color: hsl(var(--foreground)); font-size: .875rem; font-family: inherit; } .textarea { height: auto; min-height: 5rem; padding: .5rem .75rem; resize: vertical; } .input:focus, .select:focus, .textarea:focus { outline: 2px solid hsl(var(--ring)); outline-offset: 1px; border-color: hsl(var(--ring)); } .checkbox { width: 1.1rem; height: 1.1rem; accent-color: hsl(var(--primary)); } label.field-label { display: block; font-size: .8125rem; font-weight: 500; margin-bottom: .375rem; } .required-star { color: hsl(var(--destructive)); margin-left: .15rem; } /* Card */ .card { background: hsl(var(--card)); color: hsl(var(--card-foreground)); border: 1px solid hsl(var(--border)); border-radius: calc(var(--radius) + 2px); } /* Table */ .table { width: 100%; border-collapse: collapse; font-size: .875rem; } .table th { text-align: left; font-weight: 500; color: hsl(var(--muted-foreground)); padding: .625rem .75rem; border-bottom: 1px solid hsl(var(--border)); white-space: nowrap; } .table td { padding: .625rem .75rem; border-bottom: 1px solid hsl(var(--border)); vertical-align: middle; } .table tr:last-child td { border-bottom: none; } .table tbody tr:hover { background: hsl(var(--muted) / .5); } /* Badge (enum/boolean) */ .badge { display: inline-flex; align-items: center; padding: .1rem .5rem; border-radius: 9999px; font-size: .75rem; font-weight: 500; background: hsl(var(--secondary)); color: hsl(var(--secondary-foreground)); border: 1px solid hsl(var(--border)); } .muted { color: hsl(var(--muted-foreground)); } .error-block { background: hsl(var(--destructive) / .1); color: hsl(var(--destructive)); border: 1px solid hsl(var(--destructive) / .3); border-radius: var(--radius); padding: .5rem .75rem; font-size: .8125rem; }