/* ============================================================
   Entwine design tokens (ENT-233 / M11.ux.6, extended by ENT-254)

   Sits on top of Bootstrap 5 — components opt in by referencing
   `var(--...)` instead of hard-coded values. Don't replace Bootstrap;
   override only where the prototype's visual hierarchy was the goal.

   Reference: Entwine_re-design_Prototype/Entwine_re-design_Prototype.html
   inline <style> :root section (~lines 301–355).
   ============================================================ */

/* ── Geist webfonts (ENT-254) ─────────────────────────────────
   Self-hosted from /wwwroot/fonts/geist/. Variable-weight .woff2
   files cover the full 100–900 range each. License: SIL OFL 1.1
   (see fonts/geist/OFL.txt). */
@font-face {
    font-family: "Geist";
    src: url("../fonts/geist/Geist-variable.woff2") format("woff2-variations"),
         url("../fonts/geist/Geist-variable.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Geist Mono";
    src: url("../fonts/geist/GeistMono-variable.woff2") format("woff2-variations"),
         url("../fonts/geist/GeistMono-variable.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

:root {
    /* ── Brand — Entwine blue ─────────────────────────────────── */
    --brand-50:  oklch(0.97 0.02 248);
    --brand-100: oklch(0.94 0.04 248);
    --brand-200: oklch(0.88 0.07 248);
    --brand-300: oklch(0.80 0.10 248);
    --brand-400: oklch(0.70 0.14 248);
    --brand-500: oklch(0.62 0.18 248);
    --brand-600: oklch(0.55 0.19 252);
    --brand-700: oklch(0.46 0.19 260);
    --brand-800: oklch(0.36 0.16 264);

    /* ── Neutrals — cool grey ─────────────────────────────────── */
    --bg:        oklch(0.985 0.003 250);
    --surface:   #ffffff;
    --surface-2: oklch(0.975 0.004 250);
    --surface-3: oklch(0.96 0.005 250);
    --border:    oklch(0.92 0.006 250);
    --border-strong: oklch(0.86 0.008 250);
    --text:      oklch(0.22 0.012 260);
    --text-2:    oklch(0.42 0.012 260);
    --text-3:    oklch(0.58 0.010 260);
    --text-4:    oklch(0.72 0.008 260);

    /* ── Status — semantic colour pairs ───────────────────────── */
    --ok:        oklch(0.62 0.14 152);
    --ok-bg:     oklch(0.96 0.04 152);
    --warn:      oklch(0.72 0.14 75);
    --warn-bg:   oklch(0.97 0.05 80);
    --risk:      oklch(0.60 0.18 25);
    --risk-bg:   oklch(0.96 0.04 25);
    --info:      oklch(0.62 0.14 240);
    --info-bg:   oklch(0.96 0.04 240);
    --violet:    oklch(0.58 0.16 295);
    --violet-bg: oklch(0.97 0.04 295);

    /* ── Radii — 5-step scale ─────────────────────────────────── */
    --r-1: 4px;
    --r-2: 6px;
    --r-3: 10px;
    --r-4: 14px;
    --r-5: 20px;

    /* ── Shadow — 3-step scale ────────────────────────────────── */
    --shadow-1: 0 1px 0 rgba(15, 23, 42, 0.04), 0 1px 2px rgba(15, 23, 42, 0.04);
    --shadow-2: 0 1px 0 rgba(15, 23, 42, 0.05), 0 4px 12px -2px rgba(15, 23, 42, 0.06);
    --shadow-pop: 0 12px 32px -8px rgba(15, 23, 42, 0.18), 0 2px 6px rgba(15, 23, 42, 0.06);

    /* ── Spacing rhythm (density adjustable below) ────────────── */
    --space-card-pad: 18px;
    --space-row-pad: 12px;
    --space-section: 24px;

    /* ── Type ─────────────────────────────────────────────────── */
    --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
    --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* ── Density variants — opt-in via [data-density="compact"|"comfortable"]. */
[data-density="compact"] {
    --space-card-pad: 14px;
    --space-row-pad: 8px;
    --space-section: 18px;
}
[data-density="comfortable"] {
    --space-card-pad: 22px;
    --space-row-pad: 16px;
    --space-section: 32px;
}

/* ── Dark mode — matched to Bootstrap's data-bs-theme="dark" so the existing
     dark toggle in _ThemePanel keeps working. */
[data-bs-theme="dark"] {
    --bg:        oklch(0.18 0.012 260);
    --surface:   oklch(0.22 0.013 260);
    --surface-2: oklch(0.245 0.013 260);
    --surface-3: oklch(0.28 0.013 260);
    --border:    oklch(0.32 0.012 260);
    --border-strong: oklch(0.40 0.014 260);
    --text:      oklch(0.96 0.005 260);
    --text-2:    oklch(0.78 0.010 260);
    --text-3:    oklch(0.64 0.012 260);
    --text-4:    oklch(0.52 0.010 260);

    --brand-50:  oklch(0.28 0.06 248);
    --brand-100: oklch(0.32 0.08 248);
    --brand-200: oklch(0.36 0.10 248);

    --ok-bg:     oklch(0.30 0.06 152);
    --warn-bg:   oklch(0.32 0.07 75);
    --risk-bg:   oklch(0.30 0.07 25);
    --info-bg:   oklch(0.30 0.06 240);
    --violet-bg: oklch(0.30 0.07 295);

    --shadow-1: 0 1px 0 rgba(0,0,0,0.30), 0 1px 2px rgba(0,0,0,0.30);
    --shadow-2: 0 1px 0 rgba(0,0,0,0.30), 0 4px 12px -2px rgba(0,0,0,0.40);
    --shadow-pop: 0 14px 36px -8px rgba(0,0,0,0.55), 0 2px 6px rgba(0,0,0,0.30);
}

/* The Bootstrap 5 variable remap lives in entwineapp.css instead of here.
   Why: app.min.css (loaded after this file per _Layout.cshtml) defines
   --bs-* variables at :root with the same specificity, so source order
   decides the winner. Putting the remap in entwineapp.css (loaded after
   app.min.css) ensures our values win the cascade. */

/* ── Utility classes that pair with the tokens ─────────────── */
.tabular     { font-variant-numeric: tabular-nums; }
.entw-mono   { font-family: var(--font-mono); font-feature-settings: "zero", "ss01"; letter-spacing: -0.01em; }

/* Semantic pill — prototype `.pill` pattern. Use for status badges where
   Bootstrap's `bg-*` classes feel too saturated. */
.entw-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 500;
    background: var(--surface-3);
    color: var(--text-2);
    white-space: nowrap;
}
.entw-pill.ok    { background: var(--ok-bg);   color: var(--ok); }
.entw-pill.warn  { background: var(--warn-bg); color: oklch(0.45 0.12 75); }
.entw-pill.risk  { background: var(--risk-bg); color: var(--risk); }
.entw-pill.info  { background: var(--info-bg); color: var(--info); }
.entw-pill.brand { background: var(--brand-100); color: var(--brand-700); }
[data-bs-theme="dark"] .entw-pill.warn  { color: oklch(0.85 0.12 80); }
[data-bs-theme="dark"] .entw-pill.brand { color: oklch(0.86 0.12 248); }

/* ENT-233: opt-in card variant matching the prototype `.card` shadow + radius.
   Apply with `class="card entw-card"` to upgrade an existing Bootstrap card. */
.entw-card {
    border-color: var(--border) !important;
    border-radius: var(--r-4) !important;
    box-shadow: var(--shadow-1) !important;
}
.entw-card:hover { box-shadow: var(--shadow-2) !important; }

/* ENT-252: delta pill (trend indicator). Pairs with an inline icon. */
.entw-delta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 500;
}
.entw-delta.up    { color: var(--ok); }
.entw-delta.down  { color: var(--risk); }
.entw-delta.flat  { color: var(--text-3); }

/* ENT-252: status dot for breakdown rows + activity feeds. */
.dot-status {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    display: inline-block;
    flex: 0 0 6px;
    background: var(--text-4);
}
.dot-status.ok      { background: var(--ok); }
.dot-status.healthy { background: oklch(0.70 0.13 152); }
.dot-status.warn    { background: var(--warn); }
.dot-status.risk    { background: var(--risk); }
.dot-status.info    { background: var(--info); }
.dot-status.brand   { background: var(--brand-600); }