/* ============================================
   KoNote2 Default Theme
   Brand identity layer — swappable per agency.
   Agencies override these variables via the
   admin UI (Phase 6) or by replacing this file.
   ============================================ */

:root {
    /* --- Brand --- */
    --kn-primary: #0d7377;
    --kn-primary-hover: #0a5c5f;
    --kn-primary-focus: rgba(13, 115, 119, 0.25);
    --kn-primary-subtle: rgba(13, 115, 119, 0.08);
    --kn-secondary: #4a5568;

    /* --- Typography (tighter than Pico defaults) --- */
    --pico-font-size: 15px;
    --pico-line-height: 1.5;
    --pico-typography-spacing-vertical: 1rem;

    /* --- Status colours --- */
    --kn-success-bg: #d4edda;
    --kn-success-fg: #1a5632;
    --kn-info-bg: #d1ecf1;
    --kn-info-fg: #0c5460;
    --kn-warning-bg: #fff3cd;
    --kn-warning-fg: #856404;
    --kn-danger-bg: #f8d7da;
    --kn-danger-fg: #842029;
    --kn-neutral-bg: #e9ecef;
    --kn-neutral-fg: #495057;

    /* --- Surfaces --- */
    --kn-page-bg: #f7f6f3;
    --kn-card-bg: #ffffff;
    --kn-card-hover-bg: #fefefe;
    --kn-border: #d1d5db;
    --kn-border-light: #e8e6e1;

    /* --- Text --- */
    --kn-text: #1a202c;
    --kn-text-secondary: #4a5568;
    --kn-text-muted: #718096;
    --kn-text-faint: #a0aec0;
    --kn-text-inverse: #ffffff;

    /* --- Spacing (4px grid) --- */
    --kn-space-xs: 4px;
    --kn-space-sm: 8px;
    --kn-space-md: 12px;
    --kn-space-base: 16px;
    --kn-space-lg: 24px;
    --kn-space-xl: 32px;
    --kn-space-2xl: 48px;
    --kn-section-gap: 2rem;

    /* --- Radii --- */
    --kn-radius-badge: 4px;
    --kn-radius-card: 8px;
    --kn-radius-sm: 4px;

    /* --- Shadows --- */
    --kn-shadow-card: 0 1px 3px rgba(0, 0, 0, 0.06), 0 0 0 0.5px rgba(0, 0, 0, 0.04);
    --kn-shadow-card-hover: 0 2px 8px rgba(0, 0, 0, 0.08), 0 0 0 0.5px rgba(0, 0, 0, 0.06);
    --kn-shadow-note-hover: 0 2px 8px rgba(0, 0, 0, 0.08);
    --kn-shadow-nav: 0 1px 2px rgba(0, 0, 0, 0.05);

    /* --- Transitions --- */
    --kn-transition: 150ms ease;

    /* --- Override Pico defaults --- */
    --pico-primary: var(--kn-primary);
    --pico-primary-hover: var(--kn-primary-hover);
    --pico-primary-focus: var(--kn-primary-focus);
    --pico-background-color: var(--kn-page-bg);
    --pico-card-background-color: var(--kn-card-bg);
    --pico-card-border-radius: var(--kn-radius-card);
    --pico-card-box-shadow: var(--kn-shadow-card);
    --pico-border-radius: var(--kn-radius-sm);
    --pico-form-element-spacing-vertical: 0.5rem;
    --pico-form-element-spacing-horizontal: 0.75rem;
}

/* --- Dark mode (follows device/OS setting automatically) ---
   Pico CSS handles its own dark mode via prefers-color-scheme.
   This block ensures KoNote's custom --kn-* variables also adapt. */
@media (prefers-color-scheme: dark) {
    :root {
        --kn-primary-subtle: rgba(13, 115, 119, 0.15);

        --kn-success-bg: #1a3a2a;
        --kn-success-fg: #a3d9b1;
        --kn-info-bg: #1a3040;
        --kn-info-fg: #90cdf4;
        --kn-warning-bg: #3d2e0a;
        --kn-warning-fg: #f6e05e;
        --kn-danger-bg: #3b1a1a;
        --kn-danger-fg: #feb2b2;
        --kn-neutral-bg: #2d3748;
        --kn-neutral-fg: #cbd5e0;

        --kn-page-bg: var(--pico-background-color);
        --kn-card-bg: #1e2533;
        --kn-card-hover-bg: #242d3d;
        --kn-border: #4a5568;
        --kn-border-light: #2d3748;

        --kn-text: #e2e8f0;
        --kn-text-secondary: #cbd5e0;
        --kn-text-muted: #b8c5d4;   /* Brightened for WCAG AA (5.2:1 on #1e2533) */
        --kn-text-faint: #8e9bb0;   /* Brightened for WCAG AA (4.6:1 on #1e2533) */

        --kn-shadow-card: 0 1px 3px rgba(0, 0, 0, 0.2), 0 0 0 0.5px rgba(255, 255, 255, 0.05);
        --kn-shadow-card-hover: 0 2px 8px rgba(0, 0, 0, 0.3), 0 0 0 0.5px rgba(255, 255, 255, 0.08);
        --kn-shadow-note-hover: 0 2px 8px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.08);
        --kn-shadow-nav: 0 1px 2px rgba(0, 0, 0, 0.15);
    }
}

/* --- Tighter heading sizes --- */
h1 { font-size: 1.5rem; margin-bottom: 0.5rem; }
h2 { font-size: 1.25rem; margin-bottom: 0.5rem; }
h3 { font-size: 1.1rem; margin-bottom: 0.5rem; }
h4 { font-size: 1rem; margin-bottom: 0.5rem; }