/* ─────────────────────────────────────────────────────────────────────
   Airview Limo — Design Tokens
   Single source of truth for colors, spacing, radii, shadows, and type.
   Imported by both staff (base_v2.html) and driver (portal/login/invoice)
   templates so the two surfaces stay visually consistent.
   ───────────────────────────────────────────────────────────────────── */

:root {
    /* ── Brand ─────────────────────────────────────────────────────── */
    --color-brand-900: #0a1f3d;   /* primary navy (buttons, table headers) */
    --color-brand-800: #102a43;
    --color-brand-700: #15375f;
    --color-brand-600: #1a3a5c;
    --color-brand-500: #334e68;
    --color-brand-400: #627d98;
    --color-accent:    #ca8a04;   /* gold accent (sparingly) */

    /* Aliases (use these in components, not raw brand-* unless needed) */
    --color-primary:        var(--color-brand-900);
    --color-primary-hover:  var(--color-brand-700);
    --color-primary-soft:   rgba(10, 31, 61, 0.08);

    /* ── Surfaces ──────────────────────────────────────────────────── */
    --color-bg:           #f8fafc;
    --color-surface:      #ffffff;
    --color-surface-alt:  #f1f5f9;
    --color-overlay:      rgba(15, 23, 42, 0.55);

    /* ── Text ──────────────────────────────────────────────────────── */
    --color-text:         #0f172a;
    --color-text-muted:   #475569;
    --color-text-subtle:  #94a3b8;
    --color-text-invert:  #ffffff;

    /* ── Borders ───────────────────────────────────────────────────── */
    --color-border:       #e2e8f0;
    --color-border-strong:#cbd5e1;
    --color-border-focus: var(--color-brand-700);

    /* ── Semantic (status) ─────────────────────────────────────────── */
    --color-success:      #16a34a;
    --color-success-bg:   #dcfce7;
    --color-warning:      #d97706;
    --color-warning-bg:   #fef3c7;
    --color-danger:       #dc2626;
    --color-danger-bg:    #fee2e2;
    --color-info:         #2563eb;
    --color-info-bg:      #dbeafe;

    /* ── Spacing scale (4px base) ──────────────────────────────────── */
    --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 (3-tier system) ─────────────────────────────────────── */
    --radius-sm: 6px;    /* inputs, buttons, small badges */
    --radius-md: 10px;   /* cards, panels */
    --radius-lg: 16px;   /* modals, hero containers */
    --radius-pill: 999px;

    /* ── Shadows ───────────────────────────────────────────────────── */
    --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
    --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
    --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08);
    --shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.10);
    --shadow-focus: 0 0 0 3px rgba(10, 31, 61, 0.18);

    /* ── Typography ────────────────────────────────────────────────── */
    --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

    /* Type scale (rem-based; 1rem = 16px when html font-size = 100%) */
    --text-xs:  0.75rem;   /* 12px */
    --text-sm:  0.875rem;  /* 14px */
    --text-base:1rem;      /* 16px */
    --text-lg:  1.125rem;  /* 18px */
    --text-xl:  1.25rem;   /* 20px */
    --text-2xl: 1.5rem;    /* 24px */
    --text-3xl: 1.875rem;  /* 30px */
    --text-4xl: 2.25rem;   /* 36px */

    --leading-tight:  1.2;
    --leading-snug:   1.35;
    --leading-normal: 1.55;

    /* ── Motion ────────────────────────────────────────────────────── */
    --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --duration-fast:   120ms;
    --duration-base:   200ms;
    --duration-slow:   320ms;

    /* ── Z-index scale ─────────────────────────────────────────────── */
    --z-dropdown: 100;
    --z-sticky:   200;
    --z-modal:    1000;
    --z-toast:    2000;
}

/* ── Dark mode tokens (opt-in via .dark on <html> or <body>) ──────── */
.dark {
    --color-bg:           #0d1117;
    --color-surface:      #161b22;
    --color-surface-alt:  #1c2128;
    --color-text:         #e6edf3;
    --color-text-muted:   #8b949e;
    --color-text-subtle:  #6e7681;
    --color-border:       #30363d;
    --color-border-strong:#484f58;
    --color-primary-soft: rgba(88, 166, 255, 0.12);

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.35);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5);
    --shadow-focus: 0 0 0 3px rgba(88, 166, 255, 0.35);
}

/* ── Accessibility helpers ────────────────────────────────────────── */
.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0);
    white-space: nowrap; border: 0;
}
.skip-to-content {
    position: absolute;
    top: -40px; left: 8px;
    background: var(--color-primary);
    color: var(--color-text-invert);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-sm);
    z-index: var(--z-toast);
    text-decoration: none;
    font-weight: 600;
    transition: top var(--duration-fast) var(--ease-out);
}
.skip-to-content:focus { top: 8px; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* ─────────────────────────────────────────────────────────────────────
   Shared components — usable in any template that imports tokens.
   Prefix `av-` (Airview) to avoid collision with template-local classes.
   ───────────────────────────────────────────────────────────────────── */

/* ── Skeleton loader ──────────────────────────────────────────────────
   Usage:
     <div class="av-skeleton" style="height: 16px; width: 60%;"></div>
     <div class="av-skeleton-row"></div>           // pre-sized 16px row
     <div class="av-skeleton-card"></div>          // pre-sized card block
*/
.av-skeleton,
.av-skeleton-row,
.av-skeleton-card {
    background: linear-gradient(
        90deg,
        var(--color-surface-alt) 0%,
        #ffffff 50%,
        var(--color-surface-alt) 100%
    );
    background-size: 200% 100%;
    animation: av-skeleton-shimmer 1.4s ease-in-out infinite;
    border-radius: var(--radius-sm);
}
.av-skeleton-row { height: 16px; width: 100%; margin: var(--space-2) 0; }
.av-skeleton-card { height: 80px; width: 100%; border-radius: var(--radius-md); }

@keyframes av-skeleton-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.dark .av-skeleton,
.dark .av-skeleton-row,
.dark .av-skeleton-card {
    background: linear-gradient(
        90deg,
        var(--color-surface-alt) 0%,
        var(--color-surface) 50%,
        var(--color-surface-alt) 100%
    );
    background-size: 200% 100%;
}

/* Group of N rows for table-like content */
.av-skeleton-list {
    padding: var(--space-4);
}
.av-skeleton-list .av-skeleton-row { margin: var(--space-3) 0; }
.av-skeleton-list .av-skeleton-row:nth-child(odd) { width: 85%; }

/* ── Empty state ──────────────────────────────────────────────────────
   Usage:
     <div class="av-empty">
       <div class="av-empty-icon"><svg>…</svg></div>
       <div class="av-empty-title">No invoices yet</div>
       <div class="av-empty-text">Your first statement will appear here.</div>
       <a class="av-empty-cta" href="…">Upload a document</a>
     </div>
*/
.av-empty {
    text-align: center;
    padding: var(--space-10) var(--space-5);
    color: var(--color-text-muted);
}
.av-empty-icon {
    width: 56px; height: 56px;
    margin: 0 auto var(--space-4);
    border-radius: var(--radius-pill);
    background: var(--color-surface-alt);
    color: var(--color-text-subtle);
    display: inline-flex; align-items: center; justify-content: center;
}
.av-empty-icon svg { width: 28px; height: 28px; }
.av-empty-title {
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: var(--space-1);
}
.av-empty-text {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    max-width: 340px;
    margin: 0 auto;
    line-height: var(--leading-snug);
}
.av-empty-cta {
    display: inline-flex; align-items: center; gap: var(--space-2);
    margin-top: var(--space-5);
    padding: var(--space-2) var(--space-4);
    background: var(--color-primary);
    color: var(--color-text-invert);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    font-weight: 600;
    text-decoration: none;
    transition: background var(--duration-fast) var(--ease-out);
}
.av-empty-cta:hover { background: var(--color-primary-hover); }