/* Cupo design tokens — the single source of every colour, size and duration in the backoffice.
   Nothing below this file may write a literal colour, radius or font-size; see Cupo/DESIGN.md.

   Load order matters: this file comes AFTER the Radzen theme so the --rz-* bridge at the bottom
   wins, and BEFORE cupo-app.css / cupo-components.css, which only reference tokens. */

/* Both faces ship inside the Radzen.Blazor package's static web assets, so they are same-origin
   (the portal CSP allows font-src 'self' only) and already downloaded by the Radzen theme —
   aliasing them here costs no extra bytes. Renaming the families is deliberate: it keeps Cupo's
   type independent of whatever family names a future Radzen version declares. If Radzen is ever
   dropped, copy the two woff2 files (with their licences) into wwwroot/fonts and repoint these. */
@font-face {
    font-family: 'Cupo Sans';
    src: url('/_content/Radzen.Blazor/fonts/SourceSans3VF-Upright.ttf.woff2') format('woff2-variations'),
         url('/_content/Radzen.Blazor/fonts/SourceSans3VF-Upright.ttf.woff2') format('woff2');
    font-weight: 200 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Cupo Sans';
    src: url('/_content/Radzen.Blazor/fonts/SourceSans3VF-Italic.ttf.woff2') format('woff2-variations'),
         url('/_content/Radzen.Blazor/fonts/SourceSans3VF-Italic.ttf.woff2') format('woff2');
    font-weight: 200 900;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Cupo Symbols';
    src: url('/_content/Radzen.Blazor/fonts/MaterialSymbolsOutlined.woff2') format('woff2-variations'),
         url('/_content/Radzen.Blazor/fonts/MaterialSymbolsOutlined.woff2') format('woff2');
    font-weight: 100 700;
    font-style: normal;
    font-display: block;
}

:root {
    /* ---- Palette -------------------------------------------------------------------------
       One hue family (petrol, ~195°) carries every neutral and every piece of chrome. Colour is
       reserved for STATE: ok / warn / crit are the only off-hue values in the interface, which is
       what makes a red row visible at a glance in a 300-row table. */

    --cu-ink-900: #0c1b21;
    --cu-ink-800: #10242b;
    --cu-ink-700: #163038;
    --cu-ink-600: #1d3d47;
    --cu-ink-400: #6e8b95;
    --cu-ink-200: #a9c1c8;
    --cu-ink-100: #d6e3e7;

    --cu-paper: #f2f5f6;
    --cu-surface: #ffffff;
    --cu-surface-2: #f7f9fa;
    --cu-surface-3: #eef3f4;

    --cu-line: #dfe6e8;
    --cu-line-strong: #c4d1d5;

    --cu-text: #14262d;
    --cu-text-muted: #5c7078;
    --cu-text-faint: #84979d;
    --cu-text-on-ink: #eaf2f4;

    --cu-accent: #0b7285;
    --cu-accent-strong: #075a6a;
    --cu-accent-soft: #e0f0f3;
    --cu-accent-line: #9ccdd7;
    --cu-accent-on-ink: #4ec5db;

    --cu-ok: #1e7a45;
    --cu-ok-soft: #e2f2e8;
    --cu-ok-line: #a8d4ba;

    --cu-warn: #a65b08;
    --cu-warn-soft: #fbeedd;
    --cu-warn-line: #e2bd8a;

    --cu-crit: #b3251e;
    --cu-crit-soft: #fbe7e5;
    --cu-crit-line: #e5aaa6;

    --cu-focus: #0b7285;
    --cu-focus-on-ink: #4ec5db;

    /* ---- Type ----------------------------------------------------------------------------
       Two voices from one variable family plus the system mono. Sans at 400/600 is prose and
       labels; sans at 800 with tight tracking is a heading; mono is anything a machine wrote
       (ids, region codes, SKUs, zone names) so identifiers never get mistaken for prose. */

    --cu-font: 'Cupo Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
    --cu-font-mono: ui-monospace, 'SF Mono', 'JetBrains Mono', 'Cascadia Mono', Menlo, Consolas, monospace;

    --cu-fs-micro: 0.6875rem;
    --cu-fs-small: 0.75rem;
    --cu-fs-data: 0.8125rem;
    --cu-fs-body: 0.875rem;
    --cu-fs-lead: 0.9375rem;
    --cu-fs-h3: 1rem;
    --cu-fs-h2: 1.1875rem;
    --cu-fs-h1: 1.5rem;
    --cu-fs-display: 2rem;

    --cu-lh-tight: 1.2;
    --cu-lh: 1.45;
    --cu-lh-loose: 1.6;

    --cu-track-tight: -0.015em;
    --cu-track-wide: 0.08em;

    /* ---- Space (4px grid) ---------------------------------------------------------------- */

    --cu-s1: 0.25rem;
    --cu-s2: 0.5rem;
    --cu-s3: 0.75rem;
    --cu-s4: 1rem;
    --cu-s5: 1.5rem;
    --cu-s6: 2rem;
    --cu-s7: 3rem;

    /* ---- Shape and depth ------------------------------------------------------------------
       Small radii and near-flat surfaces: this is a tool, not a card feed. The only real shadow
       belongs to things that float above the page (dialogs, menus, toasts). */

    --cu-r-sm: 3px;
    --cu-r: 5px;
    --cu-r-lg: 8px;
    --cu-r-pill: 999px;

    --cu-shadow-1: 0 1px 2px rgba(12, 27, 33, 0.07);
    --cu-shadow-2: 0 10px 32px rgba(12, 27, 33, 0.18);

    /* ---- Chrome --------------------------------------------------------------------------- */

    --cu-topbar-h: 3rem;
    --cu-rail-w: 14.5rem;
    --cu-gutter: 3px;
    --cu-row-h: 2.375rem;
    --cu-row-h-dense: 1.875rem;

    /* ---- Motion ---------------------------------------------------------------------------- */

    --cu-dur: 120ms;
    --cu-dur-slow: 220ms;
    --cu-ease: cubic-bezier(0.2, 0, 0.2, 1);

    --cu-z-rail: 1100;
    --cu-z-topbar: 1200;
    --cu-z-dialog: 2000;
    --cu-z-toast: 3000;
}

/* ---- Bridge: shared Hp* component library (Lib/Ui, _content/Ui/hp-ui.css) -------------------
   Lib/Ui is shared verbatim with the Hostport portal and expresses every portal-specific value as
   a --hp-* token. Cupo supplies the values. Pages built on Cu* primitives never touch these; they
   exist so the Hp* components still in use by not-yet-migrated pages inherit the new design
   instead of rendering against undefined tokens (which computes to 0 / transparent, not to a
   fallback). Delete a line here only when nothing in Cupo or Lib/Ui references it. */

:root {
    --hp-text: var(--cu-text);
    --hp-text-muted: var(--cu-text-muted);
    --hp-surface: var(--cu-surface);
    --hp-surface-raised: var(--cu-surface-2);
    --hp-border-subtle: var(--cu-line);
    --hp-primary: var(--cu-accent);
    --hp-primary-accent: var(--cu-accent-strong);
    --hp-primary-muted: var(--cu-accent-soft);
    --hp-success: var(--cu-ok);
    --hp-warning: var(--cu-warn);
    --hp-danger: var(--cu-crit);
    --hp-radius: var(--cu-r);
    --hp-radius-sm: var(--cu-r-sm);
    --hp-radius-lg: var(--cu-r-lg);
    --hp-shadow-sm: var(--cu-shadow-1);
    --hp-shadow: var(--cu-shadow-2);
    --hp-brand-font: var(--cu-font);

    --hp-page-header-gap-bottom: var(--cu-s1);
    --hp-page-header-title-size: var(--cu-fs-h1);
    --hp-page-header-subtitle-size: var(--cu-fs-body);

    --hp-card-bg: var(--cu-surface);
    --hp-card-header-padding: var(--cu-s3) var(--cu-s4);
    --hp-card-header-bg: var(--cu-surface-2);
    --hp-card-header-font-size: var(--cu-fs-h3);
    --hp-card-header-border: 1px solid var(--cu-line);

    --hp-stat-card-bg: var(--cu-surface);
    --hp-stat-value-size: var(--cu-fs-h2);
    --hp-stat-label-weight: 600;
    --hp-stat-label-transform: uppercase;
    --hp-stat-label-letter-spacing: var(--cu-track-wide);
    --hp-stat-label-margin: 0 0 var(--cu-s1);

    --hp-empty-state-padding: var(--cu-s6) var(--cu-s4);
    --hp-empty-state-icon-size: var(--cu-fs-display);
    --hp-empty-state-title-size: var(--cu-fs-h3);
    --hp-empty-state-description-size: var(--cu-fs-body);
    --hp-empty-state-actions-margin-top: var(--cu-s1);

    --hp-section-margin-bottom: 0;
    --hp-section-title-size: var(--cu-fs-h3);
}

/* ---- Bridge: Radzen theme ------------------------------------------------------------------
   Cupo's own components use no Radzen markup, but ~60 pages still do and their dialogs, grids and
   notifications render from the "software" theme. Repointing the handful of --rz-* roots the theme
   derives everything else from drags those pages into the new palette and type instead of leaving
   two visual systems side by side. Remove this block once no page renders a Radzen component. */

:root {
    --rz-text-font-family: var(--cu-font);
    --rz-body-font-size: var(--cu-fs-body);
    --rz-text-color: var(--cu-text);
    --rz-text-secondary-color: var(--cu-text-muted);
    --rz-body-background-color: var(--cu-paper);
    --rz-base-background-color: var(--cu-surface);
    --rz-base-50: var(--cu-surface-2);
    --rz-base-100: var(--cu-surface-3);
    --rz-base-200: var(--cu-line);
    --rz-base-300: var(--cu-line-strong);
    --rz-border-radius: var(--cu-r);
    --rz-primary: var(--cu-accent);
    --rz-primary-dark: var(--cu-accent-strong);
    --rz-primary-darker: var(--cu-accent-strong);
    --rz-primary-light: var(--cu-accent-soft);
    --rz-primary-lighter: var(--cu-accent-soft);
    --rz-success: var(--cu-ok);
    --rz-success-lighter: var(--cu-ok-soft);
    --rz-warning: var(--cu-warn);
    --rz-warning-lighter: var(--cu-warn-soft);
    --rz-danger: var(--cu-crit);
    --rz-danger-lighter: var(--cu-crit-soft);
    --rz-info: var(--cu-accent);
    --rz-info-lighter: var(--cu-accent-soft);
}