/* NEPREM Portal — Design Tokens (v2.12.402)
 *
 * Single source of truth for color, spacing, radius, typography
 * across the portal. Tokens are CSS custom properties so they can be
 * referenced anywhere a portal renderer outputs inline styles or a
 * shortcode emits a <style> block.
 *
 * Mapping convention:
 *   --np-color-...   colors (text, surface, brand, status)
 *   --np-space-...   spacing scale (0–32 in 8ths-of-rem)
 *   --np-radius-...  border-radius scale
 *   --np-font-...    font-family + sizing
 *   --np-shadow-...  elevation
 *
 * Existing inline styles continue to work; this file just makes a
 * consistent palette available globally so new components (or future
 * refactors) can match the rest of the portal without copy-pasting
 * hex codes.
 */

:root {
    /* ── Brand ───────────────────────────────────────────────────── */
    --np-color-brand:         #0f3d22;
    --np-color-brand-strong:  #0a2a18;
    --np-color-brand-tint:    #ecf3ee;

    /* ── Surfaces ────────────────────────────────────────────────── */
    --np-color-bg:            #ffffff;
    --np-color-surface:       #f8fafc;
    --np-color-surface-2:     #f1f5f9;
    --np-color-border:        #e2e8f0;
    --np-color-border-strong: #cbd5e1;

    /* ── Text ────────────────────────────────────────────────────── */
    --np-color-text:          #0f172a;
    --np-color-text-muted:    #475569;
    --np-color-text-faint:    #64748b;
    --np-color-text-disabled: #94a3b8;
    --np-color-text-on-brand: #ffffff;

    /* ── Status ──────────────────────────────────────────────────── */
    --np-color-success:       #15803d;
    --np-color-success-bg:    #dcfce7;
    --np-color-warn:          #b45309;
    --np-color-warn-bg:       #fef3c7;
    --np-color-danger:        #991b1b;
    --np-color-danger-bg:     #fee2e2;
    --np-color-info:          #1d4ed8;
    --np-color-info-bg:       #dbeafe;

    /* ── Tints (for stat cards / dash cards) ─────────────────────── */
    --np-tint-violet:         #7c3aed;
    --np-tint-blue:           #2563eb;
    --np-tint-cyan:           #0891b2;
    --np-tint-green:          #15803d;
    --np-tint-amber:          #b45309;
    --np-tint-red:            #dc2626;
    --np-tint-pink:           #db2777;

    /* ── Spacing ─────────────────────────────────────────────────── */
    --np-space-1:  0.25rem;   /*  4px */
    --np-space-2:  0.5rem;    /*  8px */
    --np-space-3:  0.75rem;   /* 12px */
    --np-space-4:  1rem;      /* 16px */
    --np-space-5:  1.25rem;   /* 20px */
    --np-space-6:  1.5rem;    /* 24px */
    --np-space-8:  2rem;      /* 32px */
    --np-space-10: 2.5rem;    /* 40px */
    --np-space-12: 3rem;      /* 48px */

    /* ── Radius ──────────────────────────────────────────────────── */
    --np-radius-sm: 4px;
    --np-radius:    8px;
    --np-radius-md: 10px;
    --np-radius-lg: 12px;
    --np-radius-xl: 16px;
    --np-radius-pill: 9999px;

    /* ── Typography ──────────────────────────────────────────────── */
    --np-font:        -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, "Helvetica Neue", sans-serif;
    --np-font-mono:   ui-monospace, "SF Mono", Menlo, Consolas, "Courier New", monospace;
    --np-text-xs:     0.75rem;   /* 12px */
    --np-text-sm:     0.875rem;  /* 14px */
    --np-text-base:   1rem;      /* 16px */
    --np-text-lg:     1.125rem;  /* 18px */
    --np-text-xl:     1.25rem;   /* 20px */
    --np-text-2xl:    1.5rem;    /* 24px */
    --np-text-3xl:    1.875rem;  /* 30px */

    /* ── Shadow / Elevation ──────────────────────────────────────── */
    --np-shadow-sm:  0 1px 2px rgba(15, 23, 42, 0.06);
    --np-shadow:     0 2px 4px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04);
    --np-shadow-md:  0 4px 12px rgba(15, 23, 42, 0.10);
    --np-shadow-lg:  0 12px 32px rgba(15, 23, 42, 0.12);

    /* ── Transitions ─────────────────────────────────────────────── */
    --np-transition: 0.15s ease;
}

/* ── Print + reduced-motion overrides ───────────────────────────── */
@media print {
    :root {
        --np-shadow-sm: none;
        --np-shadow: none;
        --np-shadow-md: none;
        --np-shadow-lg: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --np-transition: 0s;
    }
}

/* ── Utility classes available everywhere ───────────────────────── */
.np-text-success { color: var(--np-color-success); }
.np-text-warn    { color: var(--np-color-warn); }
.np-text-danger  { color: var(--np-color-danger); }
.np-text-muted   { color: var(--np-color-text-muted); }
.np-text-faint   { color: var(--np-color-text-faint); }
.np-mono         { font-family: var(--np-font-mono); }

.np-pill {
    display: inline-block;
    padding: 2px 10px;
    border-radius: var(--np-radius-pill);
    font-size: var(--np-text-xs);
    font-weight: 600;
    line-height: 1.5;
}
.np-pill-success { background: var(--np-color-success-bg); color: var(--np-color-success); }
.np-pill-warn    { background: var(--np-color-warn-bg);    color: var(--np-color-warn); }
.np-pill-danger  { background: var(--np-color-danger-bg);  color: var(--np-color-danger); }
.np-pill-info    { background: var(--np-color-info-bg);    color: var(--np-color-info); }

/* Focus rings — accessibility AA */
:where(button, a, input, select, textarea):focus-visible {
    outline: 2px solid var(--np-color-brand);
    outline-offset: 2px;
    border-radius: var(--np-radius-sm);
}

/* Mobile breakpoint helper — show below 640px */
@media (max-width: 640px) {
    .np-hide-mobile { display: none !important; }
}
@media (min-width: 641px) {
    .np-show-mobile { display: none !important; }
}