/*
 * AI Cookbook brand layer for the Filament panels (client /c and staff /admin).
 * Committed, not built: the panels use Filament's published CSS plus this
 * file, injected by a head render hook. Palettes come from ->colors()
 * (App\Support\Brand); this file only does what colours cannot: display
 * type, the wordmark, the auth backdrop and one contrast fix.
 * Tokens: docs/brand.md.
 */

:root {
    --ck-forest: #0f2e20;
    --ck-green-dark: #1a4a38;
    --ck-teal: #63c3a5;
    --ck-amber: #f4a24d;
    --ck-amber-edge: #a9631a;
    --ck-cream: #f5f0e8;
    --ck-ink: #1a2a22;
    --ck-display: 'Instrument Sans', var(--font-family, 'Inter'), ui-sans-serif, system-ui, sans-serif;
}

/* Display type: Instrument Sans at 600 with tight tracking, as plujo.com. */
.fi-header-heading,
.fi-simple-header-heading,
.fi-modal-heading,
.fi-section-header-heading,
.fi-wi-stats-overview-stat-value,
.ck-wordmark {
    font-family: var(--ck-display);
    letter-spacing: -0.022em;
}
.fi-header-heading,
.fi-simple-header-heading { font-weight: 600; }

/* Wordmark */
.ck-brand { display: inline-flex; align-items: center; gap: 0.55rem; white-space: nowrap; }
.ck-mark { flex: none; display: block; }
.ck-mark-tile { fill: var(--ck-forest); }
.dark .ck-mark-tile { fill: var(--ck-green-dark); stroke: rgba(99, 195, 165, 0.45); stroke-width: 2; }
.ck-wordmark { font-size: 1.125rem; font-weight: 600; color: var(--ck-ink); }
.dark .ck-wordmark { color: var(--ck-cream); }

/* Staff panel marker: same system, amber so staff always know which side they are on. */
.ck-badge {
    border-radius: 999px;
    padding: 0.2rem 0.55rem;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--ck-ink);
    background: var(--ck-amber);
    box-shadow: inset 0 0 0 1px var(--ck-amber-edge);
}

/* Footer endorsement */
.ck-footer { width: 100%; padding: 1.5rem 1rem; text-align: center; font-size: 0.75rem; color: rgb(var(--gray-500)); }
.ck-footer a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.ck-footer a:hover { color: rgb(var(--primary-600)); }
.dark .ck-footer { color: rgb(var(--gray-400)); }
.dark .ck-footer a:hover { color: rgb(var(--primary-400)); }

/* Sign-in, password reset, invitation: cream ground with plujo.com's
   drafting grid (teal at 6% / 3%), forest in dark mode. */
.fi-simple-layout {
    background-color: var(--ck-cream);
    background-image:
        linear-gradient(rgba(99, 195, 165, 0.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(99, 195, 165, 0.07) 1px, transparent 1px),
        linear-gradient(rgba(99, 195, 165, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(99, 195, 165, 0.035) 1px, transparent 1px);
    background-size: 80px 80px, 80px 80px, 20px 20px, 20px 20px;
}
.dark .fi-simple-layout {
    background-color: #0a2318;
    background-image:
        linear-gradient(rgba(99, 195, 165, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(99, 195, 165, 0.08) 1px, transparent 1px);
    background-size: 80px 80px, 80px 80px;
}
.fi-simple-main { box-shadow: 0 2px 4px rgba(15, 46, 32, 0.06), 0 18px 40px -16px rgba(15, 46, 32, 0.18); }

/* Contrast fix. Filament fills buttons with shade 500 in dark mode; for the
   green palette that is green #3d9e80, and white text on it is 3.3:1. Use
   600 (green-ink, 5.9:1) instead, 700 on hover. */
.dark .fi-btn.fi-color-primary:not(.fi-btn-outlined),
.dark .fi-btn.fi-color-success:not(.fi-btn-outlined) {
    background-color: rgba(var(--c-600), 1);
}
.dark .fi-btn.fi-color-primary:not(.fi-btn-outlined):hover { background-color: rgb(var(--primary-700)); }
.dark .fi-btn.fi-color-success:not(.fi-btn-outlined):hover { background-color: rgb(var(--success-700)); }