/* ============================================================
   OceFilling Design Tokens — SINGLE SOURCE OF TRUTH for colors.
   Imported BEFORE app.css. Change app colors HERE, nowhere else.

   VALUES = the legacy palette (2026-07-20): the warm-stone
   experiment's values were reverted per user decision — the app
   must look exactly as before. The token ARCHITECTURE stays so
   future palette changes are one-line edits in this file.

   Layout:
   - --app-* scales (type/space/easing/density/component): additive,
     no visual effect until design-system.css classes adopt them.
   - --bit-clr-* overrides: ONLY the tokens app.css historically
     overrode, with their historical values. Everything not listed
     falls through to Bit's built-in defaults (success/warn/error/
     info, fg/bg families, shadows) — exactly as the app has always
     rendered. To restyle later, add the token here with a new value.
   - --bit-clr-pri itself is set per-tenant by ThemeService inline.
   ============================================================ */

/* === TYPOGRAPHY SCALE === */
:root {
    /* FAMILIARITY ROUND 2026-09-24: xs was 12px — the floor for anything read is
       13px (table heads, footer meta, sub-labels all consume xs). */
    --app-font-xs: 0.8rem;
    --app-font-sm: 0.875rem;
    --app-font-base: 1rem;
    --app-font-md: 1.125rem;
    --app-font-lg: 1.25rem;
    --app-font-xl: 1.5rem;
    --app-font-2xl: 2rem;
    --app-font-3xl: 2.5rem;
}

/* === SPACING SCALE === */
:root {
    --app-space-0: 0;
    --app-space-1: 0.25rem;
    --app-space-2: 0.5rem;
    --app-space-3: 0.75rem;
    --app-space-4: 1rem;
    --app-space-5: 1.25rem;
    --app-space-6: 1.5rem;
    --app-space-8: 2rem;
    --app-space-10: 2.5rem;
    --app-space-12: 3rem;
    --app-space-16: 4rem;
}

/* === EASING & TRANSITIONS === */
:root {
    --app-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --app-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --app-transition: 200ms cubic-bezier(0.33, 1, 0.68, 1);
}

/* === DENSITY & COMPONENT TOKENS === */
:root {
    --app-density: 1.15;
    --app-card-shadow: var(--id-shadow-card); /* identity 2026-09 */
    --app-card-border: 1px solid var(--bit-clr-brd-ter);
    --app-card-hover-shadow: 0 4px 12px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04);
    --app-card-hover-transform: translateY(-1px);
    /* IDENTITY 2026-09-25: buttons are Montserrat ExtraBold, uppercase; big figures
       (dashboard cards, fee totals, status-tab counts) Montserrat ExtraBold. */
    --app-btn-weight: var(--id-button-weight);
    --app-btn-font: var(--id-font-display);
    --app-btn-transform: var(--id-button-case);
    --app-btn-track: var(--id-button-track);
    --app-btn-hover-transform: translateY(-1px);
    --app-label-transform: none;
    --app-label-spacing: normal;
    --app-label-weight: var(--id-label-weight);
    --app-data-font: var(--id-font-display);
    --app-data-weight: var(--id-data-weight);
    --app-data-track: var(--id-data-track);
}

/* === ACCENT LADDER (round 2, 2026-09-24) ===
   Everything accent-coloured derives from the ONE tenant input, --bit-clr-pri.
   The brand colour does structure, never meaning. Each step has a floor, and
   Portal Design System.html checks every step live for each tenant palette.
   A tenant whose brand misses a floor pins the step with --tenant-accent-strong. */
:root {
    --app-accent: var(--bit-clr-pri);
    /* fills that carry white text/glyphs — the primary action, rail dots, avatar.
       White on it ≥4.5:1 (Nationwide #ef6a26 → 5.2:1; #F97316 → 4.7:1; crimson → 9:1).
       Resolves the Submit button: white on raw #ef6a26 was 3.1:1. */
    /* IDENTITY 2026-09-25 (owner ruling): Nationwide pins this to its raw #F85918 via
       Theme.AccentStrong (ThemeService emits --tenant-accent-strong) - white on the raw
       orange, ~3.3:1, accepted. Tenants without a pin still derive. */
    --app-accent-strong: var(--tenant-accent-strong, color-mix(in srgb, var(--bit-clr-pri) 75%, #000));
    --app-accent-strong-hover: color-mix(in srgb, var(--app-accent-strong) 86%, #000);
    --app-on-accent: var(--bit-clr-pri-text);
    /* accent-coloured TEXT on white ≥4.5:1 */
    --app-accent-text: var(--bit-clr-pri-dark);
    --app-accent-soft: color-mix(in srgb, var(--bit-clr-pri) 8%, #fff);
    --app-accent-border: color-mix(in srgb, var(--bit-clr-pri) 30%, #fff);
}

/* === RADIUS (round 3, 2026-09-24) — two radii, settled ===
   control: buttons, inputs, selects, chips, rows inside a card, anything nested.
   surface: every card, panel, table card, step strip, status tabs, popover, modal.
   Was 6px (.section-card) vs 14px (.cx-card) vs 16px (.cx-modal): one surface value. */
:root {
    --app-radius-control: var(--bit-shp-brd-radius);
    --app-radius-surface: var(--id-radius-surface); /* identity 2026-09: was 10px */
}

/* === COMPONENT-LIBRARY FONT (identity 2026-09-25) ===
   Bit.BlazorUI components read --bit-tpg-font-family (default Segoe UI); point it at the
   app's text face so BitButton/BitTag/Bit modals never fall out of the identity. */
:root {
    --bit-tpg-font-family: var(--id-font-text);
}

/* === MIX COLOR (for color-mix backgrounds) === */
:root {
    --nw-mix-color: #ffffff;
    --mix-color: var(--nw-mix-color);
}

/* ============================================================
   LIGHT THEME — legacy palette (moved verbatim from app.css).
   --bit-clr-pri is set per-tenant by ThemeService inline style.
   ============================================================ */

/* [bit-theme] outranks Bit's own theme block on the pages that still load its stylesheet */
:root,
:root[bit-theme="light"] {
    /* --- The values the app read from Bit's stylesheet, so pages look the same without it --- */
    --bit-clr-err: var(--id-legacy-danger);
    --bit-clr-err-dark: var(--id-legacy-danger-dark);
    --bit-clr-suc: var(--id-legacy-success);
    --bit-clr-suc-dark: var(--id-legacy-success-dark);
    --bit-clr-wrn: var(--id-legacy-warning);
    --bit-clr-wrn-dark: var(--id-legacy-warning-dark);
    --bit-clr-swr: var(--id-legacy-caution);
    --bit-clr-inf: var(--id-legacy-info);
    --bit-clr-inf-dark: var(--id-legacy-info-dark);
    --bit-clr-brd-ter: var(--id-legacy-border);
    --bit-clr-fg-dis: var(--id-legacy-disabled-fg);
    --bit-clr-bg-dis: var(--id-legacy-disabled-bg);
    --bit-clr-brd-dis: var(--id-legacy-disabled-border);
    --bit-shd-sm: var(--id-legacy-shadow-sm);
    --bit-shd-md: var(--id-legacy-shadow-md);
    --bit-spa-scaling-factor: .5rem;
    --bit-clr-bg-pri-active: var(--id-legacy-pressed-bg);
    --bit-shp-brd-style: solid;
    --bit-shp-brd-width: .0625rem;

    /* --- Primary derivatives (auto-derived from ThemeService base) --- */
    --bit-clr-pri-hover: color-mix(in srgb, var(--bit-clr-pri) 85%, #000 15%);
    --bit-clr-pri-active: color-mix(in srgb, var(--bit-clr-pri) 75%, #000 25%);
    --bit-clr-pri-dark: color-mix(in srgb, var(--bit-clr-pri) 65%, #000 35%);
    --bit-clr-pri-dark-hover: color-mix(in srgb, var(--bit-clr-pri) 58%, #000 42%);
    --bit-clr-pri-dark-active: color-mix(in srgb, var(--bit-clr-pri) 52%, #000 48%);
    --bit-clr-pri-light: color-mix(in srgb, var(--bit-clr-pri) 50%, #fff 50%);
    --bit-clr-pri-light-hover: color-mix(in srgb, var(--bit-clr-pri) 60%, #fff 40%);
    --bit-clr-pri-light-active: color-mix(in srgb, var(--bit-clr-pri) 70%, #fff 30%);
    --bit-clr-pri-text: #FFF; /* Text remains white for contrast */

    /* --- Secondary --- */
    --bit-clr-sec: #2563eb;
    --bit-clr-sec-hover: #1d4ed8;
    --bit-clr-sec-active: #1e40af;
    --bit-clr-sec-dark: #1e3a8a;
    --bit-clr-sec-dark-hover: #172554;
    --bit-clr-sec-dark-active: #0f172a;
    --bit-clr-sec-light: #dbeafe;
    --bit-clr-sec-light-hover: #bfdbfe;
    --bit-clr-sec-light-active: #93c5fd;
    --bit-clr-sec-text: #fff;

    /* --- Borders --- */
    --bit-clr-brd-pri: #ccc;
    --bit-clr-brd-pri-hover: #D3D7DC;
    --bit-clr-brd-sec: var(--id-border); /* identity: border grey */

    /* --- Background / foreground (historical overrides only) --- */
    /* IDENTITY 2026-09-25: white cards and navigation, light grey app background */
    --bit-clr-bg-pri: var(--id-panel);
    --bit-clr-bg-sec: var(--id-bg);
    --bit-clr-bg-ter: var(--id-row-hover);
    --bit-clr-fg-ter: #71717A;

    /* FAMILIARITY ROUND 2026-09-24: the two ink tokens every --cx-* tier derives
       from are now SET here instead of inherited from Bit's defaults. Values = the
       old build's #1A1A1A / #5A5A5A (17.4:1 and 6.9:1 on white). An unset token was
       how the subtle tier drifted to 4.2:1 without a line of CSS changing. */
    /* IDENTITY 2026-09-25: black #0E1116 (titles, primary text), dark grey #2B313D (secondary) */
    --bit-clr-fg-pri: var(--id-ink);
    --bit-clr-fg-sec: var(--id-ink-2);

    /* --- Shape --- */
    --bit-shp-brd-radius: var(--id-radius-control);
}