/* ============================================================ SHADCN-STYLE DESIGN SYSTEM — /site/assets/shadcn-theme.css ============================================================ Ported from the uploaded shadcn-admin (React + Tailwind + shadcn/ui) template's src/styles/theme.css — same oklch color tokens, same 0.625rem radius, same component shapes (card, sidebar, nav groups, user menu, badges, tables) — reimplemented as plain CSS classes since this CMS has no build step / React runtime. Only the view layer changed here; nothing about how forms submit or how the PHP pages work underneath is different from before. Light mode only for now — the source template also ships a .dark variant (same file, .dark block) if a toggle is wanted later. ============================================================ */ :root { --sc-radius: 0.625rem; --sc-background: oklch(1 0 0); --sc-foreground: oklch(0.129 0.042 264.695); --sc-card: oklch(1 0 0); --sc-card-foreground: oklch(0.129 0.042 264.695); --sc-primary: oklch(0.208 0.042 265.755); --sc-primary-foreground: oklch(0.984 0.003 247.858); --sc-secondary: oklch(0.968 0.007 247.896); --sc-secondary-foreground: oklch(0.208 0.042 265.755); --sc-muted: oklch(0.968 0.007 247.896); --sc-muted-foreground: oklch(0.554 0.046 257.417); --sc-accent: oklch(0.968 0.007 247.896); --sc-accent-foreground: oklch(0.208 0.042 265.755); --sc-destructive: oklch(0.577 0.245 27.325); --sc-destructive-foreground: oklch(0.984 0.003 247.858); --sc-border: oklch(0.929 0.013 255.508); --sc-input: oklch(0.929 0.013 255.508); --sc-ring: oklch(0.704 0.04 256.788); --sc-success: oklch(0.723 0.219 149.6); --sc-success-foreground: oklch(0.98 0.02 145); } .sc-root { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; background: var(--sc-background); color: var(--sc-foreground); } .sc-root * { box-sizing: border-box; } .sc-root a { color: inherit; } /* ── Card ─────────────────────────────────────────────────── */ .sc-card { background: var(--sc-card); color: var(--sc-card-foreground); border: 1px solid var(--sc-border); border-radius: var(--sc-radius); box-shadow: 0 1px 2px rgba(0,0,0,0.04); } .sc-card-header { padding: 24px 24px 0; } .sc-card-title { font-size: 1.15rem; font-weight: 600; letter-spacing: -0.01em; margin: 0 0 4px; } .sc-card-description { font-size: 0.9rem; color: var(--sc-muted-foreground); line-height: 1.6; margin: 0; } .sc-card-content { padding: 20px 24px; } .sc-card-footer { padding: 0 24px 24px; } /* ── Buttons ──────────────────────────────────────────────── */ .sc-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 36px; padding: 0 16px; border-radius: calc(var(--sc-radius) - 2px); font-size: 0.85rem; font-weight: 500; border: 1px solid transparent; cursor: pointer; transition: all 0.15s ease; text-decoration: none; white-space: nowrap; } .sc-btn:disabled { opacity: 0.5; cursor: not-allowed; } /* !important on color here specifically: .sc-root a { color: inherit; } is a class+element selector (specificity 0,1,1), which beats a plain single-class selector like .sc-btn-primary (0,1,0) regardless of source order — so any button-styled tag (not just this one) silently lost its intended text color back to the inherited dark text, producing dark-text-on-dark-background whenever a .sc-btn-* variant was applied to a link instead of a