/* ============================================================
   FreightManager Brand Tokens — CSS Layer

   Source of truth for C#: FreightBrandTokens.cs
   Source of truth for MudBlazor: FreightBrandThemeFactory + CustomTheme
     → generates --mud-palette-* at runtime via MudThemeProvider

   What lives here:
   - Color tokens (--freight-brand-color-*) kept for the Landing app,
     which uses Bootstrap and has no access to --mud-palette-*.
   - Typography, shadow, focus and border-radius tokens not covered
     by --mud-palette-*.
   - Base HTML resets using --mud-palette-* with --freight-brand-* fallback
     so both apps render correctly.
   - Shared utility classes.

   In the main app (FreightManager), component CSS uses --mud-palette-*
   exclusively; --freight-brand-color-* vars are defined but not referenced
   in site.css or root.css.
   ============================================================ */

:root {
    color-scheme: light;

    /* Color palette — kept for FreightManager.Landing (Bootstrap, no MudBlazor).
       The main app generates equivalent values via MudThemeProvider. */
    --freight-brand-color-primary: #c86f2a;
    --freight-brand-color-primary-strong: #a95b1f;
    --freight-brand-color-primary-soft: #e8c2a2;
    --freight-brand-color-primary-wash: #f7ede4;
    --freight-brand-color-surface-canvas: #f5f3f0;
    --freight-brand-color-surface-base: #ffffff;
    --freight-brand-color-surface-raised: #fcfaf8;
    --freight-brand-color-surface-inverse: #181513;
    --freight-brand-color-text-strong: #1f1a17;
    --freight-brand-color-text-muted: #5f5650;
    --freight-brand-color-text-disabled: #9c9087;
    --freight-brand-color-border-subtle: #ded7d1;
    --freight-brand-color-border-strong: #bdafa4;
    --freight-brand-color-info: #3f6f82;
    --freight-brand-color-success: #2f7a57;
    --freight-brand-color-warning: #c98a35;
    --freight-brand-color-error: #b34a40;

    /* Typography — not in --mud-palette-*, used by both apps */
    --freight-brand-font-family: "Aptos", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    --freight-brand-font-size-body: 0.95rem;
    --freight-brand-line-height-body: 1.55;
    --freight-brand-letter-spacing-body: 0.002em;
    --freight-brand-letter-spacing-heading: -0.02em;

    /* Layout */
    --freight-brand-border-radius: 10px;

    /* Effects — not in --mud-palette-*, used by both apps */
    --freight-brand-focus-ring: 0 0 0 3px rgba(200, 111, 42, 0.18);
    --freight-brand-shadow-soft: 0 10px 24px rgba(31, 26, 23, 0.08);
    --freight-brand-shadow-raised: 0 18px 40px rgba(31, 26, 23, 0.12);
}

html {
    background-color: var(--mud-palette-background, var(--freight-brand-color-surface-canvas));
}

body {
    margin: 0;
    background-color: var(--mud-palette-background, var(--freight-brand-color-surface-canvas));
    color: var(--mud-palette-text-primary, var(--freight-brand-color-text-strong));
    font-family: var(--freight-brand-font-family);
    font-size: var(--freight-brand-font-size-body);
    line-height: var(--freight-brand-line-height-body);
    letter-spacing: var(--freight-brand-letter-spacing-body);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin-top: 0;
    color: var(--mud-palette-text-primary, var(--freight-brand-color-text-strong));
    font-family: var(--freight-brand-font-family);
    font-weight: 600;
    letter-spacing: var(--freight-brand-letter-spacing-heading);
}

p,
li,
label,
input,
button,
textarea,
select {
    font-family: var(--freight-brand-font-family);
}

a {
    color: var(--mud-palette-primary, var(--freight-brand-color-primary));
    text-decoration-color: rgba(200, 111, 42, 0.3);
    text-underline-offset: 0.15em;
}

a:hover {
    color: var(--mud-palette-primary-darken, var(--freight-brand-color-primary-strong));
}

hr {
    border: 0;
    border-top: 1px solid var(--mud-palette-lines-default, var(--freight-brand-color-border-subtle));
}

::selection {
    background-color: rgba(200, 111, 42, 0.18);
    color: var(--mud-palette-text-primary, var(--freight-brand-color-text-strong));
}

/* Shared focus baseline. MudBlazor manages focus for its own components internally;
   this rule covers native DOM elements and shell controls in both apps.
   App-level focus exceptions must be declared in root.css or site.css, not here. */
:focus-visible {
    outline: none;
    box-shadow: var(--freight-brand-focus-ring);
}

input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    box-shadow: none;
}

/* Utility classes — work in both apps via fallback chain */
.freight-brand-surface {
    background-color: var(--mud-palette-surface, var(--freight-brand-color-surface-base));
    color: var(--mud-palette-text-primary, var(--freight-brand-color-text-strong));
    border: 1px solid var(--mud-palette-lines-default, var(--freight-brand-color-border-subtle));
    border-radius: var(--freight-brand-border-radius);
    box-shadow: var(--freight-brand-shadow-soft);
}

.freight-brand-surface-raised {
    background-color: var(--mud-palette-drawer-background, var(--freight-brand-color-surface-raised));
    color: var(--mud-palette-text-primary, var(--freight-brand-color-text-strong));
    border: 1px solid var(--mud-palette-lines-default, var(--freight-brand-color-border-subtle));
    border-radius: var(--freight-brand-border-radius);
    box-shadow: var(--freight-brand-shadow-raised);
}

.freight-brand-kicker {
    color: var(--mud-palette-text-secondary, var(--freight-brand-color-text-muted));
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.freight-brand-muted {
    color: var(--mud-palette-text-secondary, var(--freight-brand-color-text-muted));
}