/* * Amore Divino admin theme. * Propshaft's `stylesheet_link_tag :app` auto-links every file in this * directory on every page, so this file is NOT admin-only by virtue of being * loaded separately. Instead, everything below is scoped under `.admin-theme` * (set on by the admin layouts): the generic semantic tokens that * base.css defines at :root (--color-primary, --color-surface, etc.) are * remapped to the brand palette, which is what lets .btn/.card/.input/.table * re-theme without any changes to their own CSS. The public site's markup * never gets `.admin-theme`, so none of this resolves there. */ .admin-theme { /* Brand tokens, referenced directly where the generic --color-* scale doesn't apply. */ --green-900: #0f322a; --green-800: #16483b; --green-700: #1d5c4c; --green-50: #f2f7f5; --peach-500: #facb97; --cream: #fbf7f1; --white: #ffffff; --text-primary: #16261f; --text-secondary: #6b7871; --border-subtle: #cdd7d1; --border-strong: #16483b; --error: #a8402f; --success: #3f7d5c; --font-display: "Playfair Display", serif; --font-body: "Jost", sans-serif; --text-display-md: clamp(1.75rem, 3vw, 2.5rem); --text-heading: 1.375rem; --radius-sm: 4px; --radius-md: 10px; --radius-lg: 20px; --radius-pill: 999px; --shadow-card: 0 1px 2px rgba(22, 72, 59, .06), 0 8px 24px rgba(22, 72, 59, .08); /* Remap the generic semantic scale that .btn/.card/.input/.table/.alert/.flash already read. */ --color-bg: var(--cream); --color-surface: var(--white); --color-text: var(--text-primary); --color-text-subtle: var(--text-secondary); --color-text-reversed: var(--white); --color-text-negative: var(--error); --color-border: var(--border-subtle); --color-border-light: var(--green-50); --color-primary: var(--green-800); --color-selected-dark: var(--green-800); --default-font-family: var(--font-body); /* Single-consumer scale tokens (card.css is the only reader of these) - safe to override directly. */ --rounded-xl: var(--radius-lg); --shadow-sm: var(--shadow-card); /* Per-component indirection hooks that button.css/input.css/table.css already expose. */ --btn-radius: var(--radius-pill); --input-radius: var(--radius-md); --input-focus-border-color: var(--green-800); --input-focus-glow: 0 0 0 4px rgba(22, 72, 59, .12); --table-header-color: var(--text-secondary); --table-header-border-color: var(--border-strong); } .font-display { font-family: var(--font-display); } .text-display-md { font-size: var(--text-display-md); } .text-heading { font-size: var(--text-heading); }