/*
 * scale-theme.css — asetrix.online skin for the live production dashboard.
 *
 * Adopts asetrix.online's exact design tokens (cyan accent, zinc neutrals,
 * Inter/JetBrains Mono, its radii + shadows + brand gradient), mapped onto the
 * token names the dashboard component CSS (Home.razor.css) consumes — scoped to
 * `.scale-dashboard` so the app shell is untouched. Light is default; dark
 * follows the shell theme. Also breaks the page out to full-bleed.
 */

.page-content:has(.scale-dashboard) { max-width: none; padding: 0.75rem 1rem; }
@media (max-width: 768px) { .page-content:has(.scale-dashboard) { padding: 0.5rem; } }

/* ── asetrix.online · light ───────────────────────────────────────────── */
.scale-dashboard {
    --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;

    --accent: #0E7490;
    --accent2: #0891B2;
    --brand-gradient: linear-gradient(135deg, #0891B2 0%, #0E7490 58%, #155E75 100%);

    --surface: #FFFFFF;
    --surface2: #FAFAFA;
    --surface3: #F4F4F5;
    --border: #E5E7EB;
    --border2: #D4D4D8;

    --text: #09090B;
    --text2: #52525B;
    --text3: #71717A;

    --success: #15803D;
    --danger:  #B91C1C;
    --warning: #B45309;
    --info:    #1D4ED8;

    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 9999px;

    --shadow-xs: 0 1px 2px 0 rgba(0,0,0,0.04);
    --shadow-sm: 0 1px 3px 0 rgba(0,0,0,0.06), 0 1px 2px -1px rgba(0,0,0,0.04);
    --shadow-md: 0 4px 6px -2px rgba(0,0,0,0.06), 0 2px 4px -2px rgba(0,0,0,0.04);
    --shadow-lg: 0 12px 24px -8px rgba(0,0,0,0.10), 0 4px 8px -4px rgba(0,0,0,0.06);

    --badge-accent-bg: #CFFAFE;    --badge-accent-border: #67E8F9;    --badge-accent-text: #155E75;
    --badge-info-bg: #DBEAFE;      --badge-warning-bg: #FEF3C7;       --badge-danger-bg: #FEE2E2;

    --row-hover: rgba(14,116,144,0.035);
    --dur: 220ms;
    --dur-lg: 340ms;
    --ease: cubic-bezier(0.32, 0.72, 0, 1);

    --accent-rgb: 14, 116, 144;

    /* Performance ramp — "are we hitting target", deliberately separate from the
       cyan --accent ("brand / interactive"). Aliased to the semantic colours so it
       is theme-paired: the fixed hexes this replaced failed WCAG AA on one ground
       or the other (e.g. #D97706 was 3.05:1 on the light card header). */
    --perf-under: var(--danger);
    --perf-near:  var(--warning);
    --perf-on:    var(--success);
}

/* ── asetrix.online · dark ────────────────────────────────────────────── */
[data-theme="dark"] .scale-dashboard {
    --accent: #22D3EE;
    --accent2: #06B6D4;
    --brand-gradient: linear-gradient(135deg, #06B6D4 0%, #22D3EE 58%, #67E8F9 100%);

    --surface: #0E0F11;
    --surface2: #141518;
    --surface3: #1B1D21;
    --border: #23252A;
    --border2: #2E3137;

    --text: #F4F4F5;
    --text2: #A1A1AA;
    --text3: #8A8A94;

    --success: #34D399;
    --danger:  #F87171;
    --warning: #FBBF24;
    --info:    #60A5FA;

    --shadow-xs: 0 1px 2px 0 rgba(0,0,0,0.30);
    --shadow-sm: 0 1px 3px 0 rgba(0,0,0,0.40), 0 1px 2px -1px rgba(0,0,0,0.30);
    --shadow-md: 0 4px 6px -2px rgba(0,0,0,0.45), 0 2px 4px -2px rgba(0,0,0,0.35);
    --shadow-lg: 0 12px 24px -8px rgba(0,0,0,0.55), 0 4px 8px -4px rgba(0,0,0,0.40);

    --badge-accent-bg: rgba(34,211,238,0.10);  --badge-accent-border: rgba(34,211,238,0.30);  --badge-accent-text: #67E8F9;
    --badge-info-bg: rgba(96,165,250,0.12);    --badge-warning-bg: rgba(251,191,36,0.12);     --badge-danger-bg: rgba(248,113,113,0.12);

    --row-hover: rgba(34,211,238,0.05);
    --accent-rgb: 34, 211, 238;

    /* Dark ramp rides the dark semantic colours (#F87171 / #FBBF24 / #34D399),
       which clear AA on the dark card grounds where the light ramp did not. */
    --perf-under: var(--danger);
    --perf-near:  var(--warning);
    --perf-on:    var(--success);
}