/* Acopio design tokens — translated from the Stitch project "Acopio"
   (project id 13096948188384264225). This is the source of truth for
   colors, typography, spacing, and radii for the marketing surfaces.
   MudBlazor-based screens are unaffected; they continue to use the
   MudBlazor theme. */

/* Fluid root font-size. Anchored so 1920px renders at the historical
   16px baseline (today's "correct" reading size) and scales up for
   high-density / 4K displays. Floor 14px on narrow viewports keeps
   text legible on mobile; ceiling caps the scale at ~24px on 5K+.
   Because the rest of the design system is rem-based (sidebar width,
   header height, paddings, gaps), changing the root cascades fluidly. */
html {
    font-size: clamp(0.875rem, 0.625rem + 0.3125vw, 1.5rem);
}

:root {
    /* Color tokens (MD3 palette from Stitch) */
    --color-surface: #0b1326;
    --color-surface-dim: #0b1326;
    --color-surface-bright: #31394d;
    --color-surface-container-lowest: #060e20;
    --color-surface-container-low: #131b2e;
    --color-surface-container: #171f33;
    --color-surface-container-high: #222a3d;
    --color-surface-container-highest: #2d3449;
    --color-surface-variant: #2d3449;
    --color-background: #0b1326;

    --color-on-background: #dae2fd;
    --color-on-surface: #dae2fd;
    --color-on-surface-variant: #bec8d2;

    --color-primary: #89ceff;
    --color-primary-container: #0ea5e9;
    --color-on-primary: #00344d;
    --color-on-primary-container: #003751;

    --color-secondary: #bcc7de;
    --color-secondary-container: #3e495d;
    --color-on-secondary: #263143;
    --color-on-secondary-container: #aeb9d0;

    --color-tertiary: #3cddc7;
    --color-tertiary-container: #00af9d;

    --color-outline: #88929b;
    --color-outline-variant: #3e4850;

    --color-error: #ffb4ab;
    --color-violet: #c4b5fd;
    --color-amber-400: #fbbf24;

    /* Channel triples for `rgb(var(--token) / α)` tints */
    --color-primary-rgb: 137 206 255;
    --color-primary-container-rgb: 14 165 233;
    --color-secondary-rgb: 188 199 222;
    --color-tertiary-rgb: 60 221 199;
    --color-on-secondary-container-rgb: 174 185 208;
    --color-slate-800-rgb: 31 39 64;
    --color-error-rgb: 255 180 171;
    --color-violet-rgb: 196 181 253;
    --color-amber-400-rgb: 251 191 36;

    /* Slate accents used in header / footer chrome */
    --color-slate-950: #060e20;
    --color-slate-900: #0b1326;
    --color-slate-800: #1f2740;
    --color-slate-700: #2d3449;
    --color-slate-500: #6b7591;
    --color-slate-400: #9aa3bd;
    --color-slate-200: #d8dff0;
    --color-slate-50:  #f4f6fb;

    /* Typography */
    --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-display: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-mono-caps: "Space Grotesk", ui-monospace, "Cascadia Mono", Menlo, monospace;

    /* Typography sizes are rem-based so they scale with the fluid root
       font-size declared on `html` above. The px reference values are
       what each token resolves to at the 1920px-anchored baseline. */
    --text-h1-size: 2.25rem;      /* 36px @ 1920px */
    --text-h1-line: 1.2;
    --text-h1-tracking: -0.02em;
    --text-h1-weight: 700;

    --text-h2-size: 1.5rem;       /* 24px @ 1920px */
    --text-h2-line: 1.3;
    --text-h2-tracking: -0.01em;
    --text-h2-weight: 600;

    --text-body-base-size: 1rem;  /* 16px @ 1920px */
    --text-body-base-line: 1.5;
    --text-body-base-weight: 400;

    --text-body-sm-size: 0.875rem; /* 14px @ 1920px */
    --text-body-sm-line: 1.5;
    --text-body-sm-weight: 400;

    --text-label-caps-size: 0.75rem;       /* 12px @ 1920px */
    --text-label-caps-sm-size: 0.6875rem;  /* 11px @ 1920px */
    --text-label-caps-xs-size: 0.625rem;   /* 10px @ 1920px */
    --text-label-caps-line: 1.2;
    --text-label-caps-tracking: 0.05em;
    --text-label-caps-weight: 600;

    /* Radii — `--radius-pill` is the true full-round; `--radius-full` is legacy 12px */
    --radius-default: 0.125rem;
    --radius-lg: 0.375rem;
    --radius-xl: 0.5rem;
    --radius-full: 0.75rem;
    --radius-pill: 9999px;

    /* Spacing */
    --space-unit-1: 0.25rem;
    --space-unit-2: 0.5rem;
    --space-unit-4: 1rem;
    --space-unit-8: 2rem;
    --space-gutter: 1.5rem;
    --space-margin: 2rem;
    --maxw-content: 80rem; /* matches Stitch max-w-7xl (marketing) */
    --maxw-app: 90rem;     /* matches Stitch dashboard max-w-[1440px] */

    /* App shell */
    --app-header-height: 4rem;       /* Stitch h-16 */
    --app-sidebar-width: 15rem;      /* Stitch w-60 */
    --app-content-padding-top: 6rem; /* header + breathing room (Stitch pt-24) */

    /* Status indicators */
    --color-status-ok: #10b981;      /* Stitch emerald-500 */
    --color-status-warn: #f59e0b;    /* Stitch amber-500 */
}

.material-symbols-outlined {
    font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
    vertical-align: middle;
}