/* ────────────────────────────────────────────────────────────────────────
 * Liftman design tokens (KGap-PRE-06)
 * ────────────────────────────────────────────────────────────────────────
 * Single source of truth for colour ramp, spacing, radii, typography,
 * shadow, z-layer, motion. Plus the two component classes that tag
 * helpers depend on: .pill (status pills) and .li (Lucide icons).
 *
 * Brand-aware tokens (--brand-primary, --brand-accent, --navy, --yellow)
 * are still rendered in base.html from `{{ brand.* }}` — the company brand
 * context. THIS file references them; never overwrite them.
 *
 * Holdco surfaces use their own design language (.cr-* / .lb-* from
 * PR #272) and intentionally don't import this file.
 * ─────────────────────────────────────────────────────────────────── */

:root {
    /* ── Surface ── */
    --surface-bg:        #f0f2f5;
    --surface-card:      #ffffff;
    --surface-muted:     #fafafa;
    --surface-divider:   #e8e8e8;
    --surface-overlay:   rgba(0,0,0,0.45);

    /* ── Text ── */
    --text-primary:      #1a1a1a;
    --text-secondary:    #4a4a4a;
    --text-muted:        #888;
    --text-disabled:     #bbb;
    --text-on-brand:     #ffffff;
    --text-on-accent:    #1a1a1a;
    --text-link:         #01007f;

    /* ── Status tones ── */
    --tone-success:      #2e7d32;
    --tone-success-bg:   #e8f5e9;
    --tone-warning:      #ef6c00;
    --tone-warning-bg:   #fff3e0;
    --tone-danger:       #c62828;
    --tone-danger-bg:    #ffebee;
    --tone-info:         #01579b;
    --tone-info-bg:      #e1f5fe;
    --tone-neutral:      #555;
    --tone-neutral-bg:   #f4f4f4;
    --tone-violet:       #4527a0;
    --tone-violet-bg:    #ede7f6;

    /* ── Spacing (4-px grid) ── */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;

    /* ── Radii ── */
    --radius-sm:    4px;
    --radius-md:    6px;
    --radius-lg:    10px;
    --radius-xl:    16px;
    --radius-pill:  9999px;

    /* ── Typography ── */
    --font-family:    'Maven Pro', -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    --font-mono:      ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --text-xs:        0.65rem;
    --text-sm:        0.78rem;
    --text-base:      0.9rem;
    --text-md:        1rem;
    --text-lg:        1.15rem;
    --text-xl:        1.4rem;
    --text-2xl:       1.7rem;
    --text-3xl:       2.1rem;
    --leading-tight:  1.2;
    --leading-normal: 1.5;
    --leading-loose:  1.75;
    --weight-regular: 400;
    --weight-medium:  500;
    --weight-bold:    700;

    /* ── Shadow ── */
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.06);
    --shadow-md: 0 2px 8px rgba(0,0,0,0.08);
    --shadow-lg: 0 8px 24px rgba(0,0,0,0.18);

    /* ── Z-layers ── */
    --z-header:   100;
    --z-overlay:  300;
    --z-sidebar:  400;
    --z-popover:  500;
    --z-toast:    800;
    --z-modal:    1000;

    /* ── Motion ── */
    --motion-fast:   0.12s;
    --motion-normal: 0.18s;
    --motion-slow:   0.30s;
    --easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ────────────────────────────────────────────────────────────────────────
 * Status pill — used by {% status_pill obj %} template tag
 * ──────────────────────────────────────────────────────────────────── */
.pill {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 2px 10px;
    border-radius: var(--radius-pill);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
    line-height: 1.4;
}
.pill-success {  background: var(--tone-success-bg);  color: var(--tone-success);  }
.pill-warning {  background: var(--tone-warning-bg);  color: var(--tone-warning);  }
.pill-danger  {  background: var(--tone-danger-bg);   color: var(--tone-danger);   }
.pill-info    {  background: var(--tone-info-bg);     color: var(--tone-info);     }
.pill-neutral {  background: var(--tone-neutral-bg);  color: var(--tone-neutral);  }
.pill-violet  {  background: var(--tone-violet-bg);   color: var(--tone-violet);   }
.pill-brand   {  background: var(--brand-primary);    color: var(--text-on-brand); }
.pill-accent  {  background: var(--brand-accent);     color: var(--text-on-accent); }

/* ────────────────────────────────────────────────────────────────────────
 * Lucide icon — used by {% lucide 'name' %} template tag
 * sprite at /static/icons/lucide.svg, symbol id pattern `li-<name>`
 * ──────────────────────────────────────────────────────────────────── */
.li {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
}
.li-sm { width: 0.875em; height: 0.875em; }
.li-lg { width: 1.25em;  height: 1.25em;  }
.li-2x { width: 2em;     height: 2em;     }
.li-3x { width: 3em;     height: 3em;     }