/* ============================================================
   RVS Design Tokens — CSS Custom Properties
   Consumed by Blazor.Intake and Blazor.Manager.

   The brand values here mirror RVS.UI.Shared/Theme/RvsBrand.cs
   ("RV Intake", Denim & Rust — Spec THEME-1). RvsBrand.cs is the
   authoritative copy; this file exists for the components that
   style themselves in plain CSS rather than through MudBlazor.
   Change both together.
   ============================================================ */

:root {
    /* --------------------------------------------------------
       Colors — Brand (Denim & Rust)
       Ink carries structure, Rust carries action. See RvsBrand.cs.
       -------------------------------------------------------- */
    --rvs-color-ink: #2F4C6B;               /* Denim */
    --rvs-color-ink-dark: #1B2A3C;          /* Denim, dark-mode ground */
    --rvs-color-paper: #F6F1E7;             /* Cream */
    --rvs-color-paper-neutral: #FAF8F3;     /* Cream, barely tinted */
    --rvs-color-primary: #C1502E;           /* Rust — action */
    --rvs-color-primary-hover: #A84525;     /* Rust, pressed */
    --rvs-color-primary-active: #8F3A1E;    /* Rust, active */
    --rvs-color-primary-on-dark: #E8956D;   /* Rust, on Ink/dark surfaces */
    --rvs-color-secondary: #2F4C6B;         /* Ink — structure */
    --rvs-color-secondary-hover: #26405A;

    /* --------------------------------------------------------
       Colors — Semantic / Status
       -------------------------------------------------------- */
    --rvs-color-success: #3F7D58;
    --rvs-color-success-bg: #E4EFE8;
    --rvs-color-warning: #C98A2C;
    --rvs-color-warning-bg: #FBF0DC;
    --rvs-color-error: #B3261E;
    --rvs-color-error-bg: #F9E3E1;
    --rvs-color-info: #3B6E91;
    --rvs-color-info-bg: #E3EDF3;

    /* --------------------------------------------------------
       Colors — Status badges
       -------------------------------------------------------- */
    --rvs-status-new-bg: #E4EFE8;
    --rvs-status-new-fg: #2F6344;
    --rvs-status-in-progress-bg: #E3EDF3;
    --rvs-status-in-progress-fg: #2F4C6B;
    --rvs-status-waiting-on-parts-bg: #FBF0DC;
    --rvs-status-waiting-on-parts-fg: #8F5A12;
    --rvs-status-waiting-on-customer-bg: #E0EEEC;
    --rvs-status-waiting-on-customer-fg: #14625A;
    --rvs-status-completed-bg: #EDE7F2;
    --rvs-status-completed-fg: #5A3A78;
    --rvs-status-cancelled-bg: #F1EDE5;
    --rvs-status-cancelled-fg: #5E5951;
    --rvs-status-default-bg: #F1EDE5;
    --rvs-status-default-fg: #3D4B58;

    /* --------------------------------------------------------
       Colors — Priority badges
       -------------------------------------------------------- */
    --rvs-priority-critical-bg: #B3261E;
    --rvs-priority-critical-fg: #FFFFFF;
    --rvs-priority-high-bg: #C98A2C;
    --rvs-priority-high-fg: #2B2B2B;
    --rvs-priority-medium-bg: #2F4C6B;
    --rvs-priority-medium-fg: #FFFFFF;
    --rvs-priority-low-bg: #E3DDD0;
    --rvs-priority-low-fg: #3D4B58;
    --rvs-priority-default-bg: #F1EDE5;
    --rvs-priority-default-fg: #3D4B58;

    /* --------------------------------------------------------
       Colors — Surfaces & Text
       -------------------------------------------------------- */
    --rvs-color-surface: #FFFFFF;
    --rvs-color-surface-secondary: #FAF8F3;
    --rvs-color-border: #E3DDD0;
    --rvs-color-text-primary: #20344A;
    --rvs-color-text-secondary: rgba(32, 52, 74, 0.68);
    --rvs-color-text-disabled: rgba(32, 52, 74, 0.38);

    /* --------------------------------------------------------
       Spacing — 4px base grid
       -------------------------------------------------------- */
    --rvs-space-xxs: 2px;
    --rvs-space-xs: 4px;
    --rvs-space-sm: 8px;
    --rvs-space-md: 16px;
    --rvs-space-lg: 24px;
    --rvs-space-xl: 32px;
    --rvs-space-xxl: 48px;

    /* --------------------------------------------------------
       Typography
       -------------------------------------------------------- */
    --rvs-font-family: 'Space Grotesk', 'Roboto', 'Helvetica', 'Arial', sans-serif;
    --rvs-font-size-xs: 0.75rem;    /* 12px */
    --rvs-font-size-sm: 0.8125rem;  /* 13px */
    --rvs-font-size-md: 0.875rem;   /* 14px */
    --rvs-font-size-lg: 1rem;       /* 16px */
    --rvs-font-size-xl: 1.25rem;    /* 20px */
    --rvs-font-size-xxl: 1.5rem;    /* 24px */
    --rvs-font-weight-regular: 400;
    --rvs-font-weight-semibold: 600;
    --rvs-font-weight-bold: 700;
    --rvs-line-height-tight: 1.2;
    --rvs-line-height-normal: 1.5;

    /* --------------------------------------------------------
       Border Radius
       -------------------------------------------------------- */
    --rvs-radius-sm: 4px;
    --rvs-radius-md: 8px;
    --rvs-radius-lg: 10px;
    --rvs-radius-pill: 9999px;

    /* --------------------------------------------------------
       Shadows
       -------------------------------------------------------- */
    --rvs-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.12);
    --rvs-shadow-md: 0 2px 4px rgba(0, 0, 0, 0.14);
    --rvs-shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.14);

    /* --------------------------------------------------------
       Images — shared assets from RVS.UI.Shared RCL
       Usage: background-image: var(--rvs-image-tetons)
       -------------------------------------------------------- */
    --rvs-image-tetons: url('/_content/RVS.UI.Shared/images/tetons.jpg');

    /* --------------------------------------------------------
       Brand marks — editable SVG sources from the logo kit.
       In-app chrome uses the inlined <BrandWordmark> component
       instead: an SVG loaded as an image cannot reach the
       self-hosted Space Grotesk, so its live text would fall
       back to a system font. These are for CSS backgrounds and
       for handing to anyone outside the app.
       -------------------------------------------------------- */
    --rvs-mark-icon: url('/_content/RVS.UI.Shared/brand/icon.svg');
    --rvs-mark-wordmark: url('/_content/RVS.UI.Shared/brand/wordmark-horizontal.svg');
    --rvs-mark-wordmark-reversed: url('/_content/RVS.UI.Shared/brand/wordmark-horizontal-reversed.svg');
}

/* --------------------------------------------------------
   Background — Tetons hero image
   Covers the full element, centred, no repeat.
   Usage: <div class="rvs-bg-tetons"> or Style="..." in Blazor
   -------------------------------------------------------- */
.rvs-bg-tetons {
    background-image: var(--rvs-image-tetons);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}