/* ============================================================
   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.

   Per-mode colour (the Rust states, the focus ring, semantic text
   values) is in rvs-tokens.css, selected by root classes (#1008).
   Status and priority chips are in rvs-tokens.css too (#1012).
   ============================================================ */

:root {
    /* --------------------------------------------------------
       Colors — Brand (Denim & Rust)
       Ink carries structure, Rust carries action. See RvsBrand.cs.
       -------------------------------------------------------- */
    --rvs-color-ink: #2F4C6B;               /* Denim */
    --rvs-color-paper: #F6F1E7;             /* Cream */
    --rvs-color-paper-neutral: #FAF8F3;     /* Cream, barely tinted */
    /* Rust (RvsBrand.Accent), its states and Dark's neutrals are in rvs-tokens.css (#1008, #1009). */
    --rvs-color-secondary: #2F4C6B;         /* Ink — structure */
    --rvs-color-secondary-hover: #26405A;

    /* --------------------------------------------------------
       Colors — Semantic / Status
       -------------------------------------------------------- */
    --rvs-color-success: #36704E;
    --rvs-color-success-bg: #E4EFE8;
    --rvs-color-warning: #92600F;
    --rvs-color-warning-bg: #FBF0DC;
    --rvs-color-error: #A3123F;
    --rvs-color-error-bg: #F9E3E1;
    --rvs-color-info: #3B6E91;
    --rvs-color-info-bg: #E3EDF3;

    /* --------------------------------------------------------
       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.72);
    --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 — the "Service Tag" logo kit's SVGs. Text is
       outlined, so they render in brand as images or CSS
       backgrounds. In markup, prefer the <BrandWordmark>
       component, which picks the file per variant.
       -------------------------------------------------------- */
    --rvs-mark-icon: url('/_content/RVS.UI.Shared/brand/icon.svg');
    --rvs-mark-glyph: url('/_content/RVS.UI.Shared/brand/glyph.svg');
    --rvs-mark-glyph-reversed: url('/_content/RVS.UI.Shared/brand/glyph-reversed.svg');
    --rvs-mark-logo: url('/_content/RVS.UI.Shared/brand/logo-horizontal.svg');
    --rvs-mark-logo-reversed: url('/_content/RVS.UI.Shared/brand/logo-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;
}