/* ============================================================
   iq-ai-base.css — Shared AskIQ design tokens + base components.

   Loaded by UI-Integration, Audit-Console, and Template-Studio.
   Single source of truth for color, typography, spacing, motion,
   and the small set of building-block components (cards, buttons,
   tables, badges, banners) that every AskIQ surface uses.

   Bump tokens in design_tokens.json + reflect here. Components in
   per-UI stylesheets should compose these tokens — never redefine.
   ============================================================ */

:root {
    /* ── Brand & semantic colors ─────────────────────────────── */
    --iqai-brand:           #2563EB;
    --iqai-brand-deep:      #1D4ED8;
    --iqai-brand-tint:      #EFF6FF;
    --iqai-accent:          #EC4E20;
    --iqai-success:         #059669;
    --iqai-warning:         #D97706;
    --iqai-critical:        #DC2626;
    --iqai-info:            #0891B2;

    /* ── Text ────────────────────────────────────────────────── */
    --iqai-text:            #111827;
    --iqai-text-muted:      #4B5563;
    --iqai-text-subtle:     #6B7280;
    --iqai-text-inverse:    #FFFFFF;

    /* ── Surfaces & borders ──────────────────────────────────── */
    --iqai-surface:         #FFFFFF;
    --iqai-surface-alt:     #F8F9FB;
    --iqai-background:      #F4F5F7;
    --iqai-border:          #E2E5EA;
    --iqai-border-strong:   #CBD5E1;
    --iqai-overlay:         rgba(15, 23, 42, 0.55);

    /* ── Typography ──────────────────────────────────────────── */
    --iqai-font-primary:    Calibri, 'Segoe UI', Inter, -apple-system, BlinkMacSystemFont, Arial, sans-serif;
    --iqai-font-mono:       Consolas, 'Liberation Mono', 'Courier New', monospace;
    --iqai-fs-xs:           0.786rem;  /* 11px @ 14px root */
    --iqai-fs-sm:           0.857rem;  /* 12px @ 14px root */
    --iqai-fs-base:         1rem;      /* 14px @ 14px root */
    --iqai-fs-md:           1.071rem;  /* 15px @ 14px root */
    --iqai-fs-lg:           1.214rem;  /* 17px @ 14px root */
    --iqai-fs-xl:           1.429rem;  /* 20px @ 14px root */
    --iqai-fs-2xl:          1.714rem;  /* 24px @ 14px root */
    --iqai-fs-3xl:          2rem;      /* 28px @ 14px root */
    --iqai-lh:              1.55;
    --iqai-ls-heading:      -0.015em;
    --iqai-ls-eyebrow:      0.04em;

    /* ── Spacing scale ───────────────────────────────────────── */
    --iqai-s1:              4px;
    --iqai-s2:              8px;
    --iqai-s3:              12px;
    --iqai-s4:              16px;
    --iqai-s5:              20px;
    --iqai-s6:              24px;
    --iqai-s8:              32px;
    --iqai-s10:             40px;
    --iqai-s12:             48px;

    /* ── Radius ──────────────────────────────────────────────── */
    --iqai-r-sm:            4px;
    --iqai-r-md:            6px;
    --iqai-r-card:          10px;
    --iqai-r-lg:            14px;
    --iqai-r-pill:          999px;

    /* ── Shadows ─────────────────────────────────────────────── */
    --iqai-shadow-card:     0 1px 3px rgba(15, 23, 42, 0.04), 0 1px 2px rgba(15, 23, 42, 0.04);
    --iqai-shadow-hover:    0 4px 12px rgba(15, 23, 42, 0.08), 0 2px 4px rgba(15, 23, 42, 0.04);
    --iqai-shadow-elevated: 0 8px 24px rgba(15, 23, 42, 0.10);

    /* ── Motion ──────────────────────────────────────────────── */
    --iqai-tx-fast:         0.12s ease;
    --iqai-tx-med:          0.20s ease;
    --iqai-tx-slow:         0.32s ease;
}

/* ── Reset + base ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    font-family: var(--iqai-font-primary);
    font-size: var(--iqai-fs-base);
    line-height: var(--iqai-lh);
    color: var(--iqai-text);
    background: var(--iqai-background);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--iqai-font-primary);
    color: var(--iqai-text);
    letter-spacing: var(--iqai-ls-heading);
    margin: 0 0 var(--iqai-s3);
    font-weight: 600;
    line-height: 1.25;
}
h1 { font-size: var(--iqai-fs-3xl); font-weight: 700; }
h2 { font-size: var(--iqai-fs-2xl); }
h3 { font-size: var(--iqai-fs-xl); }
h4 { font-size: var(--iqai-fs-lg); }
h5 { font-size: var(--iqai-fs-md); }
h6 { font-size: var(--iqai-fs-base); }

p { margin: 0 0 var(--iqai-s3); }

a {
    color: var(--iqai-brand);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color var(--iqai-tx-fast);
}
a:hover { border-bottom-color: var(--iqai-brand); }

code, pre, kbd {
    font-family: var(--iqai-font-mono);
    font-size: 12px;
}

/* ── Cards & surfaces ─────────────────────────────────────────── */
.iqai-card {
    background: var(--iqai-surface);
    border: 1px solid var(--iqai-border);
    border-radius: var(--iqai-r-card);
    box-shadow: var(--iqai-shadow-card);
    padding: var(--iqai-s5) var(--iqai-s6);
    transition: box-shadow var(--iqai-tx-med), border-color var(--iqai-tx-med);
}
.iqai-card:hover { box-shadow: var(--iqai-shadow-hover); }
.iqai-card-flat   { box-shadow: none; }
.iqai-card-tinted { background: var(--iqai-surface-alt); }

.iqai-section-eyebrow {
    text-transform: uppercase;
    font-size: var(--iqai-fs-xs);
    font-weight: 600;
    letter-spacing: var(--iqai-ls-eyebrow);
    color: var(--iqai-text-subtle);
    margin: 0 0 var(--iqai-s2);
}

/* ── Buttons ──────────────────────────────────────────────────── */
.iqai-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--iqai-s2);
    padding: 8px 14px;
    font-family: var(--iqai-font-primary);
    font-size: var(--iqai-fs-sm);
    font-weight: 500;
    border-radius: var(--iqai-r-md);
    border: 1px solid var(--iqai-border-strong);
    background: var(--iqai-surface);
    color: var(--iqai-text);
    cursor: pointer;
    transition: all var(--iqai-tx-fast);
    white-space: nowrap;
}
.iqai-btn:hover {
    border-color: var(--iqai-brand);
    color: var(--iqai-brand);
    background: var(--iqai-brand-tint);
}
.iqai-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: var(--iqai-surface-alt);
}
.iqai-btn-primary {
    background: var(--iqai-brand);
    color: var(--iqai-text-inverse);
    border-color: var(--iqai-brand);
}
.iqai-btn-primary:hover {
    background: var(--iqai-brand-deep);
    border-color: var(--iqai-brand-deep);
    color: var(--iqai-text-inverse);
}
.iqai-btn-ghost {
    background: transparent;
    border-color: transparent;
    color: var(--iqai-text-muted);
}
.iqai-btn-ghost:hover {
    background: var(--iqai-brand-tint);
    color: var(--iqai-brand);
    border-color: transparent;
}
.iqai-btn-sm { padding: 4px 10px; font-size: var(--iqai-fs-xs); }

/* ── Badges & pills ───────────────────────────────────────────── */
.iqai-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    font-size: var(--iqai-fs-xs);
    font-weight: 600;
    border-radius: var(--iqai-r-pill);
    background: var(--iqai-surface-alt);
    color: var(--iqai-text-muted);
    border: 1px solid var(--iqai-border);
}
.iqai-badge-brand   { background: var(--iqai-brand-tint); color: var(--iqai-brand-deep); border-color: rgba(37,99,235,0.18); }
.iqai-badge-success { background: rgba(5,150,105,0.10);  color: var(--iqai-success);    border-color: rgba(5,150,105,0.22); }
.iqai-badge-warning { background: rgba(217,119,6,0.10);  color: var(--iqai-warning);    border-color: rgba(217,119,6,0.22); }
.iqai-badge-critical{ background: rgba(220,38,38,0.10);  color: var(--iqai-critical);   border-color: rgba(220,38,38,0.22); }
.iqai-badge-info    { background: rgba(8,145,178,0.10);  color: var(--iqai-info);       border-color: rgba(8,145,178,0.22); }

/* ── Tables ───────────────────────────────────────────────────── */
.iqai-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: var(--iqai-fs-sm);
    background: var(--iqai-surface);
    border-radius: var(--iqai-r-card);
    overflow: hidden;
    border: 1px solid var(--iqai-border);
}
.iqai-table thead th {
    background: var(--iqai-surface-alt);
    color: var(--iqai-text-subtle);
    font-weight: 600;
    text-transform: uppercase;
    font-size: var(--iqai-fs-xs);
    letter-spacing: var(--iqai-ls-eyebrow);
    text-align: left;
    padding: 10px 14px;
    border-bottom: 1px solid var(--iqai-border);
}
.iqai-table tbody td {
    padding: 10px 14px;
    border-bottom: 1px solid var(--iqai-border);
    color: var(--iqai-text);
}
.iqai-table tbody tr:last-child td { border-bottom: none; }
.iqai-table tbody tr:hover td { background: var(--iqai-surface-alt); }

/* ── Banners ──────────────────────────────────────────────────── */
.iqai-banner {
    display: flex;
    align-items: flex-start;
    gap: var(--iqai-s3);
    padding: var(--iqai-s4) var(--iqai-s5);
    border-radius: var(--iqai-r-card);
    border: 1px solid var(--iqai-border);
    background: var(--iqai-surface-alt);
    margin: var(--iqai-s3) 0;
    font-size: var(--iqai-fs-sm);
    color: var(--iqai-text);
}
.iqai-banner-warning  { background: rgba(217,119,6,0.07);  border-color: rgba(217,119,6,0.30);  color: var(--iqai-warning); }
.iqai-banner-critical { background: rgba(220,38,38,0.07);  border-color: rgba(220,38,38,0.30);  color: var(--iqai-critical); }
.iqai-banner-success  { background: rgba(5,150,105,0.07);  border-color: rgba(5,150,105,0.30);  color: var(--iqai-success); }
.iqai-banner-info     { background: var(--iqai-brand-tint); border-color: rgba(37,99,235,0.22); color: var(--iqai-brand-deep); }

/* ── KPI cards (cross-UI shared) ──────────────────────────────── */
.iqai-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--iqai-s3);
}
.iqai-kpi {
    background: var(--iqai-surface);
    border: 1px solid var(--iqai-border);
    border-radius: var(--iqai-r-card);
    padding: var(--iqai-s4) var(--iqai-s5);
    box-shadow: var(--iqai-shadow-card);
    transition: box-shadow var(--iqai-tx-med);
}
.iqai-kpi:hover { box-shadow: var(--iqai-shadow-hover); }
.iqai-kpi-label {
    font-size: var(--iqai-fs-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--iqai-ls-eyebrow);
    color: var(--iqai-text-subtle);
    margin-bottom: var(--iqai-s2);
}
.iqai-kpi-value {
    font-size: 24px;
    font-weight: 700;
    color: var(--iqai-text);
    line-height: 1.1;
    margin-bottom: var(--iqai-s1);
}
.iqai-kpi-trend { font-size: var(--iqai-fs-sm); color: var(--iqai-text-muted); }
.iqai-kpi-trend.up   { color: var(--iqai-success); }
.iqai-kpi-trend.down { color: var(--iqai-critical); }

/* ── Chart card (cross-UI) ────────────────────────────────────── */
.iqai-chart-card {
    background: var(--iqai-surface);
    border: 1px solid var(--iqai-border);
    border-radius: var(--iqai-r-card);
    padding: var(--iqai-s5) var(--iqai-s6);
    box-shadow: var(--iqai-shadow-card);
    margin: var(--iqai-s3) 0;
    transition: box-shadow var(--iqai-tx-med), border-color var(--iqai-tx-med);
}
.iqai-chart-card:hover {
    box-shadow: var(--iqai-shadow-hover);
    border-color: rgba(37, 99, 235, 0.22);
}
.iqai-chart-empty {
    padding: var(--iqai-s8) var(--iqai-s5);
    text-align: center;
    color: var(--iqai-text-subtle);
    background: var(--iqai-surface-alt);
    border: 1px dashed var(--iqai-border);
    border-radius: var(--iqai-r-card);
    font-style: italic;
}

/* ── Forms ────────────────────────────────────────────────────── */
.iqai-input {
    width: 100%;
    padding: 8px 12px;
    font-family: var(--iqai-font-primary);
    font-size: var(--iqai-fs-sm);
    border: 1px solid var(--iqai-border-strong);
    border-radius: var(--iqai-r-md);
    background: var(--iqai-surface);
    color: var(--iqai-text);
    transition: border-color var(--iqai-tx-fast), box-shadow var(--iqai-tx-fast);
}
.iqai-input:focus {
    outline: none;
    border-color: var(--iqai-brand);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

/* ── Print ────────────────────────────────────────────────────── */
/* -- Responsive breakpoints ----------------------------------------- */
@media (min-width: 1440px) {
    .iqai-card-grid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
}

@media (max-width: 1024px) {
    .iqai-kpi-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .iqai-kpi-grid { grid-template-columns: 1fr 1fr; }
    .iqai-card-grid { grid-template-columns: 1fr; }
    .iqai-table { font-size: var(--iqai-fs-xs); }
}

@media (max-width: 480px) {
    .iqai-kpi-grid { grid-template-columns: 1fr; }
    .iqai-badge { font-size: 9px; }
}

@media print {
    body { background: #ffffff; }
    .iqai-card, .iqai-kpi, .iqai-chart-card { box-shadow: none; page-break-inside: avoid; }
}

/* ── Reduced motion ───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition: none !important;
        animation: none !important;
    }
}