/**
 * Abagility — system-wide design tokens
 * Green primary (#19AC76), lavender sidebar (#f3d3ff), Cami PriB headings,
 * Source Sans Pro body. Use --ab-* in theme CSS.
 */

:root {
    /* -------------------------------------------------------------------------
     * Color — Primary (base #19AC76)
     * ------------------------------------------------------------------------- */
    --ab-primary-50: #edf9f3;
    --ab-primary-100: #d4f2e4;
    --ab-primary-200: #a9e5c9;
    --ab-primary-300: #6fd4a6;
    --ab-primary-400: #3fc48a;
    --ab-primary-500: #19ac76;
    --ab-primary-600: #159266;
    --ab-primary-700: #117852;
    --ab-primary-800: #0d5e40;
    --ab-primary-900: #08442e;
    --ab-primary-500-rgb: 25, 172, 118;

    /* -------------------------------------------------------------------------
     * Color — Secondary (base #25B57A)
     * ------------------------------------------------------------------------- */
    --ab-secondary-50: #eefaf4;
    --ab-secondary-100: #d6f3e6;
    --ab-secondary-200: #ade7cd;
    --ab-secondary-300: #75d5ad;
    --ab-secondary-400: #42c48f;
    --ab-secondary-500: #25b57a;
    --ab-secondary-600: #1f9a68;
    --ab-secondary-700: #197b54;
    --ab-secondary-800: #135f42;
    --ab-secondary-900: #0c4330;
    --ab-secondary-500-rgb: 37, 181, 122;

    /* -------------------------------------------------------------------------
     * Color — Tertiary — darker green for solid buttons / emphasis
     * ------------------------------------------------------------------------- */
    --ab-tertiary-50: #e8f6ef;
    --ab-tertiary-100: #c8ead8;
    --ab-tertiary-200: #93d36f;
    --ab-tertiary-300: #5fbf8f;
    --ab-tertiary-400: #33a872;
    --ab-tertiary-500: #14835c;
    --ab-tertiary-600: #117552;
    --ab-tertiary-700: #0e6245;
    --ab-tertiary-800: #0b4f38;
    --ab-tertiary-900: #083c2b;
    --ab-tertiary-500-rgb: 20, 131, 92;

    /* -------------------------------------------------------------------------
     * Color — Neutral (base #64748B)
     * ------------------------------------------------------------------------- */
    --ab-neutral-50: #f8fafc;
    --ab-neutral-100: #f1f5f9;
    --ab-neutral-200: #e2e8f0;
    --ab-neutral-300: #cbd5e1;
    --ab-neutral-400: #94a3b8;
    --ab-neutral-500: #64748b;
    --ab-neutral-600: #475569;
    --ab-neutral-700: #334155;
    --ab-neutral-800: #1e293b;
    --ab-neutral-900: #0f172a;
    --ab-neutral-500-rgb: 100, 116, 139;

    /* -------------------------------------------------------------------------
     * Semantic
     * ------------------------------------------------------------------------- */
    --ab-color-text: var(--ab-neutral-700);
    --ab-color-text-muted: var(--ab-neutral-500);
    --ab-color-headline: var(--ab-neutral-900);
    --ab-color-on-primary-solid: #ffffff;
    --ab-color-danger: #dc2626;
    --ab-color-danger-hover: #b91c1c;
    --ab-color-danger-rgb: 220, 38, 38;

    --ab-surface-page: #ffffff;
    --ab-surface-sidebar: #f3d3ff;
    --ab-surface-subtle: var(--ab-neutral-100);
    --ab-surface-card: #ffffff;
    --ab-border-default: var(--ab-neutral-200);
    --ab-border-strong: var(--ab-neutral-300);

    /* -------------------------------------------------------------------------
     * Typography
     * ------------------------------------------------------------------------- */
    --ab-font-display: "Wicked Mouse", system-ui, sans-serif;
    --ab-font-headline: "Cami PriB", system-ui, sans-serif;
    --ab-font-body: "Source Sans Pro", system-ui, -apple-system, sans-serif;
    --ab-font-label: var(--ab-font-body);

    --ab-text-headline: var(--ab-color-headline);
    --ab-text-body: var(--ab-color-text);
    --ab-text-label: var(--ab-color-text-muted);

    --ab-font-size-xs: 0.75rem;
    --ab-font-size-sm: 0.875rem;
    --ab-font-size-base: 1rem;
    --ab-font-size-lg: 1.125rem;
    --ab-font-size-xl: 1.25rem;
    --ab-font-size-2xl: 1.5rem;
    --ab-font-size-3xl: 1.875rem;

    --ab-font-weight-normal: 400;
    --ab-font-weight-medium: 500;
    --ab-font-weight-semibold: 600;
    --ab-font-weight-bold: 700;

    --ab-line-tight: 1.25;
    --ab-line-normal: 1.5;
    --ab-line-relaxed: 1.625;

    /* -------------------------------------------------------------------------
     * Radius & shadow
     * ------------------------------------------------------------------------- */
    --ab-radius-sm: 0.375rem;
    --ab-radius-md: 0.5rem;
    --ab-radius-lg: 0.75rem;
    --ab-radius-xl: 1rem;
    --ab-radius-pill: 9999px;

    --ab-shadow-card: 0 1px 2px rgba(15, 23, 42, 0.05), 0 4px 14px rgba(15, 23, 42, 0.06);
    --ab-shadow-elevated: 0 8px 24px rgba(15, 23, 42, 0.08);

    /* -------------------------------------------------------------------------
     * Spacing scale (rem)
     * ------------------------------------------------------------------------- */
    --ab-space-1: 0.25rem;
    --ab-space-2: 0.5rem;
    --ab-space-3: 0.75rem;
    --ab-space-4: 1rem;
    --ab-space-5: 1.25rem;
    --ab-space-6: 1.5rem;
    --ab-space-8: 2rem;
    --ab-space-10: 2.5rem;

    /* -------------------------------------------------------------------------
     * Component tokens — buttons (guide: primary = dark teal solid)
     * ------------------------------------------------------------------------- */
    --ab-btn-font-weight: var(--ab-font-weight-medium);
    --ab-btn-padding-y: var(--ab-space-2);
    --ab-btn-padding-x: var(--ab-space-4);
    --ab-btn-radius: var(--ab-radius-md);

    --ab-btn-primary-bg: var(--ab-primary-500);
    --ab-btn-primary-bg-hover: var(--ab-primary-600);
    --ab-btn-primary-color: var(--ab-color-on-primary-solid);

    --ab-btn-secondary-bg: var(--ab-neutral-200);
    --ab-btn-secondary-bg-hover: var(--ab-neutral-300);
    --ab-btn-secondary-color: var(--ab-neutral-900);

    --ab-btn-inverted-bg: var(--ab-neutral-900);
    --ab-btn-inverted-bg-hover: var(--ab-neutral-800);
    --ab-btn-inverted-color: #ffffff;

    --ab-btn-outline-bg: transparent;
    --ab-btn-outline-border: var(--ab-neutral-900);
    --ab-btn-outline-color: var(--ab-neutral-900);
    --ab-btn-outline-hover-bg: var(--ab-neutral-100);

    /* Inputs / search bar */
    --ab-input-bg: var(--ab-neutral-100);
    --ab-input-border: transparent;
    --ab-input-radius: var(--ab-radius-md);
    --ab-input-padding-y: var(--ab-space-2);
    --ab-input-padding-x: var(--ab-space-3);

    /* Progress / accent bars */
    --ab-progress-track: var(--ab-primary-100);
    --ab-progress-fill: var(--ab-tertiary-500);

    /* Focus ring (keyboard) */
    --ab-focus-ring: 0 0 0 3px rgba(var(--ab-primary-500-rgb), 0.35);

    /* -------------------------------------------------------------------------
     * Legacy compatibility aliases (existing app/admin/auth CSS)
     * ------------------------------------------------------------------------- */
    --bs-primary: var(--ab-primary-500);
    --bs-success: #c3e26c;
    --bs-info: #62c372;
    --bs-warning: #f59e0b;
    --bs-danger: var(--ab-color-danger);

    --bf-primary: var(--ab-primary-500);
    --bf-body-bg: #f2f3f5;
    --bf-black: var(--ab-neutral-900);
    --bf-blue: var(--ab-primary-500);
    --bf-grey: var(--ab-neutral-500);
    --bf-light-grey: var(--ab-neutral-300);
    --bf-white: #ffffff;
    --bf-success: #16a34a;

    --bf-sidebar-bg: var(--ab-surface-sidebar);
    --bf-sidebar-bg-active: #e8c4ff;
    --bf-sidebar-subnav-bg-active: #ddb8f5;
    --bf-sidebar-text: var(--ab-primary-700);

    --info: var(--ab-secondary-500);
    --warning: #f59e0b;
    --danger: var(--ab-color-danger);
    --dark: var(--ab-neutral-900);

    --blue: var(--ab-primary-500);
    --red: var(--ab-color-danger);
    --orange: #f59e0b;
    --light: var(--ab-neutral-100);
    --inverse: var(--ab-neutral-900);
    --indigo: var(--ab-secondary-500);
    --purple: var(--ab-tertiary-500);
    --pink: var(--ab-primary-500);
    --yellow: #facc15;
    --green: #16a34a;
    --teal: var(--ab-secondary-500);
    --lime: #84cc16;
    --cyan: #06b6d4;
    --white: #ffffff;
    --gray: var(--ab-neutral-500);
    --gray-dark: var(--ab-neutral-800);

    --blue-rgb: var(--ab-primary-500-rgb);
    --red-rgb: var(--ab-color-danger-rgb);
    --orange-rgb: 245, 158, 11;
    --light-rgb: 241, 245, 249;
    --dark-rgb: 15, 23, 42;
    --inverse-rgb: 15, 23, 42;
    --indigo-rgb: var(--ab-secondary-500-rgb);
    --purple-rgb: var(--ab-tertiary-500-rgb);
    --pink-rgb: var(--ab-primary-500-rgb);
    --yellow-rgb: 250, 204, 21;
    --green-rgb: 22, 163, 74;
    --teal-rgb: var(--ab-secondary-500-rgb);
    --lime-rgb: 132, 204, 22;
    --cyan-rgb: 6, 182, 212;
    --white-rgb: 255, 255, 255;
    --gray-rgb: var(--ab-neutral-500-rgb);
    --gray-dark-rgb: 30, 41, 59;
}

/* -----------------------------------------------------------------------------
 * Base typography helpers
 * ----------------------------------------------------------------------------- */
.ab-headline,
h1.ab-headline,
h2.ab-headline,
h3.ab-headline {
    font-family: var(--ab-font-headline);
    color: var(--ab-text-headline);
    font-weight: var(--ab-font-weight-semibold);
    line-height: var(--ab-line-tight);
}

body {
    font-family: var(--ab-font-body);
    color: var(--ab-color-text);
    background: var(--ab-surface-page);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--ab-font-headline);
    color: var(--ab-color-headline);
}

.ab-body {
    font-family: var(--ab-font-body);
    color: var(--ab-text-body);
    font-size: var(--ab-font-size-base);
    line-height: var(--ab-line-normal);
}

.ab-label {
    font-family: var(--ab-font-label);
    color: var(--ab-text-label);
    font-size: var(--ab-font-size-sm);
    font-weight: var(--ab-font-weight-medium);
}

/* -----------------------------------------------------------------------------
 * Surfaces
 * ----------------------------------------------------------------------------- */
.ab-page-bg {
    background-color: var(--ab-surface-page);
}

.ab-card {
    background: var(--ab-surface-card);
    border-radius: var(--ab-radius-md);
    box-shadow: var(--ab-shadow-card);
    border: none;
}

/* -----------------------------------------------------------------------------
 * Admin component vocabulary (DESIGN.md content-card, data-table, kpi-card)
 * ----------------------------------------------------------------------------- */
.ab-section-kicker {
    font-family: var(--ab-font-body);
    font-size: 0.75rem;
    font-weight: var(--ab-font-weight-semibold);
    line-height: 1.43;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ab-color-text-muted);
    margin-bottom: 0.25rem;
}

.ab-display,
h1.ab-display,
h2.ab-display,
h3.ab-display {
    font-family: var(--ab-font-headline);
    font-weight: var(--ab-font-weight-semibold);
    color: var(--ab-color-headline);
    line-height: var(--ab-line-tight);
}

.ab-data-card {
    background: var(--ab-surface-card);
    border-radius: var(--ab-radius-md);
    box-shadow: var(--ab-shadow-card);
    border: none;
    overflow: hidden;
}

.ab-data-card .card-header {
    background: var(--ab-surface-card);
    border-bottom: 1px solid var(--ab-border-default);
}

.ab-data-card .card-title,
.ab-data-card h5 {
    font-family: var(--ab-font-headline);
    font-weight: var(--ab-font-weight-semibold);
    font-size: 1.125rem;
    color: var(--ab-color-headline);
}

.ab-data-table thead th {
    font-family: var(--ab-font-body);
    font-weight: var(--ab-font-weight-semibold);
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ab-color-text-muted);
    border-bottom: 1px solid var(--ab-border-default);
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

.ab-data-table tbody td {
    font-family: var(--ab-font-body);
    font-size: 0.875rem;
    font-weight: var(--ab-font-weight-normal);
    line-height: 1.5;
    vertical-align: middle;
}

.ab-data-table tbody tr:hover {
    background-color: rgba(var(--ab-primary-500-rgb), 0.05);
}

.ab-data-table tbody .badge {
    font-size: 0.75rem;
    font-weight: var(--ab-font-weight-semibold);
}

.ab-metric-card {
    background: var(--ab-surface-card);
    border-radius: var(--ab-radius-xl);
    box-shadow: var(--ab-shadow-card);
    border: none;
}

.ab-metric-card__icon {
    width: 52px;
    height: 52px;
    border-radius: var(--ab-radius-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.25rem;
}

.ab-metric-card__icon--primary {
    background-color: rgba(var(--ab-tertiary-500-rgb), 0.12);
    color: var(--ab-tertiary-500);
}

.ab-metric-card__icon--secondary {
    background-color: rgba(var(--ab-secondary-500-rgb), 0.12);
    color: var(--ab-secondary-500);
}

.ab-metric-card__icon--accent {
    background-color: rgba(var(--ab-primary-500-rgb), 0.12);
    color: var(--ab-primary-500);
}

.ab-metric-card__icon--danger {
    background-color: rgba(var(--ab-color-danger-rgb), 0.12);
    color: var(--ab-color-danger);
}

.ab-metric-card__value {
    font-family: var(--ab-font-body);
    font-size: 0.875rem;
    font-weight: var(--ab-font-weight-semibold);
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
    color: var(--ab-color-headline);
    margin: 0;
}

.ab-icon-action {
    color: var(--ab-primary-500);
}

.ab-icon-action--danger {
    color: var(--ab-color-danger);
}

.ab-tabular {
    font-variant-numeric: tabular-nums;
}

/* -----------------------------------------------------------------------------
 * Buttons (namespaced to avoid clashing with Bootstrap)
 * ----------------------------------------------------------------------------- */
.ab-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ab-space-2);
    font-family: var(--ab-font-body);
    font-weight: var(--ab-btn-font-weight);
    font-size: var(--ab-font-size-sm);
    line-height: 1.25;
    padding: var(--ab-btn-padding-y) var(--ab-btn-padding-x);
    border-radius: var(--ab-btn-radius);
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition:
        background-color 0.15s ease,
        border-color 0.15s ease,
        color 0.15s ease,
        box-shadow 0.15s ease;
}

.ab-btn:focus-visible {
    outline: none;
    box-shadow: var(--ab-focus-ring);
}

.ab-btn-primary {
    background-color: var(--ab-btn-primary-bg);
    color: var(--ab-btn-primary-color);
}

.ab-btn-primary:hover {
    background-color: var(--ab-btn-primary-bg-hover);
    color: var(--ab-btn-primary-color);
}

.ab-btn-secondary {
    background-color: var(--ab-btn-secondary-bg);
    color: var(--ab-btn-secondary-color);
}

.ab-btn-secondary:hover {
    background-color: var(--ab-btn-secondary-bg-hover);
    color: var(--ab-btn-secondary-color);
}

.ab-btn-inverted {
    background-color: var(--ab-btn-inverted-bg);
    color: var(--ab-btn-inverted-color);
}

.ab-btn-inverted:hover {
    background-color: var(--ab-btn-inverted-bg-hover);
    color: var(--ab-btn-inverted-color);
}

.ab-btn-outline {
    background-color: var(--ab-btn-outline-bg);
    border-color: var(--ab-btn-outline-border);
    color: var(--ab-btn-outline-color);
}

.ab-btn-outline:hover {
    background-color: var(--ab-btn-outline-hover-bg);
    color: var(--ab-btn-outline-color);
}

.ab-btn-danger {
    background-color: var(--ab-color-danger);
    color: #fff;
    border-color: var(--ab-color-danger);
}

.ab-btn-danger:hover {
    background-color: var(--ab-color-danger-hover);
    color: #fff;
}

.ab-btn-icon {
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border-radius: var(--ab-radius-pill);
}

.ab-btn-icon.ab-btn-primary {
    background-color: var(--ab-tertiary-500);
}

.ab-btn-icon.ab-btn-danger {
    background-color: var(--ab-color-danger);
}

/* -----------------------------------------------------------------------------
 * Form controls
 * ----------------------------------------------------------------------------- */
.ab-input,
.ab-input-search {
    font-family: var(--ab-font-body);
    font-size: var(--ab-font-size-sm);
    color: var(--ab-color-text);
    background: var(--ab-input-bg);
    border: 1px solid var(--ab-input-border);
    border-radius: var(--ab-input-radius);
    padding: var(--ab-input-padding-y) var(--ab-input-padding-x);
    width: 100%;
    max-width: 100%;
    transition:
        box-shadow 0.15s ease,
        border-color 0.15s ease;
}

.ab-input::placeholder,
.ab-input-search::placeholder {
    color: var(--ab-color-text-muted);
}

.ab-input:focus,
.ab-input-search:focus {
    outline: none;
    border-color: var(--ab-primary-400);
    box-shadow: var(--ab-focus-ring);
}

.ab-input-search {
    padding-left: 2.5rem;
    background-repeat: no-repeat;
    background-position: 0.75rem 50%;
    background-size: 1rem 1rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2364748b' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'/%3E%3C/svg%3E");
}

/* -----------------------------------------------------------------------------
 * Progress strips (loading / meter)
 * ----------------------------------------------------------------------------- */
.ab-progress {
    height: 0.5rem;
    border-radius: var(--ab-radius-pill);
    background: var(--ab-progress-track);
    overflow: hidden;
}

.ab-progress-bar {
    height: 100%;
    border-radius: var(--ab-radius-pill);
    background: var(--ab-progress-fill);
    transition: width 0.3s ease;
}

/* -----------------------------------------------------------------------------
 * Pills / chips (accent)
 * ----------------------------------------------------------------------------- */
.ab-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--ab-space-2);
    font-family: var(--ab-font-body);
    font-size: var(--ab-font-size-sm);
    font-weight: var(--ab-font-weight-medium);
    padding: var(--ab-space-1) var(--ab-space-3);
    border-radius: var(--ab-radius-pill);
    background: var(--ab-primary-100);
    color: var(--ab-tertiary-600);
}

/* -----------------------------------------------------------------------------
 * Tab / bottom nav shell (light pill on pale bg)
 * ----------------------------------------------------------------------------- */
.ab-nav-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--ab-space-2);
    padding: var(--ab-space-2);
    background: var(--ab-neutral-100);
    border-radius: var(--ab-radius-pill);
}

.ab-nav-pill .ab-nav-pill-active {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--ab-radius-pill);
    background: var(--ab-tertiary-500);
    color: #fff;
}