/* ============================================================================
   K9LogPro — Design System foundation (UI overhaul epic #835, Phase 1)
   ----------------------------------------------------------------------------
   The global design-token layer. Defines the canonical `--k9-*` token set
   (copied VERBATIM from docs/25-ui-design-system.md § 3, itself copied from
   docs/ui-mockups/11-saas-dogs.html) and bridges Bootstrap's own CSS variables
   onto those tokens so the EXISTING app adopts the Modern-SaaS palette + Inter
   in both themes WITHOUT a component restyle (that is Phase 3).

   THEME RULE (doc 25 § 3.5 / § 4.5): dark mode is gated ONLY on Bootstrap's
   native [data-bs-theme="dark"] on <html> (set by App.razor from the
   ThemePreference cookie; System falls back to the OS-media inline script).
   The mockups' standalone data-theme/localStorage toggle is deliberately NOT
   ported — do not introduce a second theme attribute.

   Loaded from App.razor AFTER bootstrap.min.css so the --bs-* bridge wins.
   ============================================================================ */

/* --- Self-hosted Inter (no font CDN — keeps the CSP connect-src/font-src
   tight). Variable woff2 spans weights 100–900, covering the 400/500/600/700/800
   weights doc 25 § 3.1 names. Two subsets: `latin` covers EN + FR; `latin-ext`
   adds the Hungarian ő/ű (U+0151/U+0171). Vendored from @fontsource-variable/inter. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('/fonts/inter/inter-latin-wght-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('/fonts/inter/inter-latin-ext-wght-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ============================================================================
   Design tokens — LIGHT (doc 25 § 3, verbatim, namespaced --k9-*)
   ============================================================================ */
:root {
  --k9-font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --k9-accent: #6d5efc;
  --k9-accent-soft: #efedff;
  --k9-accent-press: #5a4ce0;

  --k9-radius-lg: 20px;
  --k9-radius-md: 14px;
  --k9-radius-sm: 10px;
  --k9-radius-pill: 999px;

  --k9-bg: #f6f7f9;
  --k9-surface: #fff;
  --k9-surface-2: #fbfbfc;
  --k9-hairline: #e7e8ec;
  --k9-hairline-strong: #d8dade;

  --k9-text: #15171c;
  --k9-text-2: #5a606b;
  /* --text-3 darkened from the mockup's #8b919c (only ~3.0:1 on the light surfaces)
     to clear WCAG AA 4.5:1 for the small text it drives — table headers, form hints,
     fact labels, placeholders, breadcrumb. Intentional deviation from the mockup for
     the § 7 contrast requirement (audit 2026-07-10). */
  --k9-text-3: #6c7179;

  --k9-shadow-sm: 0 1px 2px rgba(16, 18, 24, .04), 0 1px 3px rgba(16, 18, 24, .04);
  --k9-shadow-md: 0 6px 16px rgba(16, 18, 24, .06), 0 2px 6px rgba(16, 18, 24, .04);
  --k9-shadow-lift: 0 14px 34px rgba(16, 18, 24, .10), 0 4px 10px rgba(16, 18, 24, .05);
  --k9-ring: rgba(109, 94, 252, .18);

  /* --green / --amber darkened from the mockup's #128a4f / #9a6400 (3.93:1 / 4.43:1
     on their -bg fills, below AA) to clear 4.5:1 for the 11px badge text-on-fill the
     § 7 contrast rule promises. Light only — the dark tokens already clear AA.
     Deviation from the mockup for AA (audit 2026-07-10). */
  --k9-green: #107e48;
  --k9-green-bg: #e6f6ee;
  --k9-amber: #966200;
  --k9-amber-bg: #fbf0db;
  --k9-neutral: #4b5160;
  --k9-neutral-bg: #eceef1;

  /* Fail / destructive — FINALISED in Phase 1 (doc 25 § 3.4 / § 8.4 left it open).
     Chosen palette-consistent with the green/amber/neutral pairs: a deep
     saturated text on a very pale tinted fill (light), bright text on a very
     dark tinted fill (dark). */
  --k9-red: #c4332b;
  --k9-red-bg: #fbe9e7;

  /* ==========================================================================
     Phase 3 (primitive library, #842) additions — all theme-independent unless
     a dark override appears in the [data-bs-theme="dark"] block below. These
     live INSIDE the exempt token block so the component layer stays literal-free.
     ========================================================================== */

  /* Text / icon that sits on the fixed-hue accent + brand surfaces (primary
     button label, brand mark, badge-on-accent, chip.active). The accent is the
     same violet in both themes, so white-on-accent clears AA in both — no dark
     override. Tokenising it lets the Phase-2 shell drop its raw `#fff`. */
  --k9-on-accent: #fff;

  /* Accent as a small-text / icon FOREGROUND color, contrast-tuned per theme: a
     DARKER violet in light (#6355e5 — the mockup's #6d5efc reads only ~3.9:1 on the
     accent-soft chip/badge fill, below AA) and a LIGHTER violet in dark (see the dark
     block — #6d5efc is ~3.9:1 on the dark surface). Use this for accent-colored TEXT
     (links, active tab/nav labels, accent-soft chips/badges, the required-asterisk) +
     small accent icons; keep raw --k9-accent for backgrounds, borders, focus rings,
     and gradient stops (its identity hue is unchanged). doc 25 § 7 (audit 2026-07-10;
     the light darkening extends the #842 dark lightening). */
  --k9-accent-text: #6355e5;
  --k9-accent-text-press: var(--k9-accent-press);

  /* Role-badge "Admin" tone — the one MembershipRole colour with no existing
     semantic token (Owner reuses --k9-accent, Trainer --k9-green, Assistant
     --k9-neutral). Finalised in Phase 3 from docs/ui-mockups/16-saas-organization.html
     (light); the dark override is in the dark token block below. */
  --k9-role-admin: #1c5bd1;
  --k9-role-admin-bg: #e8f0fe;

  /* Favourite-star "on" fill (cards / table / detail) — doc 25 § 3.4. Same in
     both themes. */
  --k9-fav: #f5b301;

  /* Avatar / brand monogram gradient + the lighter accent stop used by chart
     bars (doc 25 § 3.4). The lighter violet stops are literals only here, in the
     exempt token block; the component layer references the var. */
  --k9-accent-grad-2: #9488ff;
  --k9-avatar-grad: linear-gradient(135deg, var(--k9-accent), #a98bff);

  /* Mobile-drawer scrim — a fixed dark veil, theme-independent by design
     (migrated from MainLayout.razor.css so the shell CSS is literal-free). */
  --k9-scrim: rgba(8, 10, 14, .45);
}

/* ============================================================================
   Design tokens — DARK (doc 25 § 3, verbatim) — gated on [data-bs-theme="dark"]
   ============================================================================ */
[data-bs-theme="dark"] {
  --k9-bg: #0c0d10;
  --k9-surface: #16181d;
  --k9-surface-2: #1b1e24;
  --k9-hairline: #262a31;
  --k9-hairline-strong: #313742;

  --k9-text: #f1f3f6;
  --k9-text-2: #a4abb7;
  /* --text-3 lightened from the mockup's #757d8b (4.0–4.3:1 on the dark card/inset
     surfaces, below AA) to clear 4.5:1 for the small text it drives. Deviation from
     the mockup for the § 7 contrast requirement (audit 2026-07-10). */
  --k9-text-3: #808794;
  --k9-accent-soft: #221f3d;

  --k9-shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --k9-shadow-md: 0 8px 22px rgba(0, 0, 0, .45);
  --k9-shadow-lift: 0 18px 40px rgba(0, 0, 0, .55);
  --k9-ring: rgba(109, 94, 252, .32);

  --k9-green: #4ad991;
  --k9-green-bg: #10301f;
  --k9-amber: #f0bb5b;
  --k9-amber-bg: #33260c;
  --k9-neutral: #aeb5c1;
  --k9-neutral-bg: #23262d;

  /* Fail / destructive (dark) — see the light pair above. */
  --k9-red: #f0726e;
  --k9-red-bg: #3a1513;

  /* Role-badge "Admin" tone (dark) — the mockup's dark role-admin override
     (docs/ui-mockups/16-saas-organization.html). Phase 3 (#842). */
  --k9-role-admin: #6ea2f5;
  --k9-role-admin-bg: #10213f;

  /* Accent-as-foreground, lightened for AA on the dark surface — the same values
     the Phase-1 link bridge uses (#9b8cff / #b3a6ff). #6d5efc is only ~3.9:1 on the
     dark surface; these clear AA. Phase 3 a11y review (#842). */
  --k9-accent-text: #9b8cff;
  --k9-accent-text-press: #b3a6ff;
}

/* ============================================================================
   Bootstrap variable bridge — LIGHT  (the PERMANENT Bootstrap↔token integration
   layer — NOT a removable "sunset shim"; #901)
   ----------------------------------------------------------------------------
   Maps Bootstrap's theme variables onto the --k9-* tokens so existing Bootstrap
   markup (links, utilities, forms, tables, text/bg/border helpers) adopts the
   palette + Inter with NO component restyle. The var-based mappings below
   re-theme automatically in dark mode through the --k9-* indirection; only the
   numeric `*-rgb` tuples (which can't reference a var) are restated per theme.

   This is a PERMANENT layer, not a shim to delete. Phase 4 migrated every page,
   but the app deliberately keeps a large Bootstrap surface bridged forever — the
   locked `.form-check` inputs (converting them to .k9-toggle buttons would break
   EditForm/@bind registration), the theme-aware colored `.alert`s, and the whole
   grid + utility layer (.text-muted / .border / .bg-* / row/col). Deleting these
   remaps would revert every one of those surfaces to Bootstrap's default blue +
   system font. There is no separable "component-remap block" to trim — app.css's
   .btn-primary recolor consumes --k9-accent in-rule, and the .table-* dark
   overrides consume the bridged --bs-* vars in-rule; neither is a trimmable
   --bs-* remap block. See #901.
   ============================================================================ */
:root {
  --bs-font-sans-serif: var(--k9-font);
  --bs-body-font-family: var(--k9-font);

  --bs-primary: var(--k9-accent);
  --bs-primary-rgb: 109, 94, 252;

  /* Bridged Bootstrap links track the contrast-tuned --k9-accent-text (not the raw
     --k9-accent fill), so bootstrap-rendered links clear AA on the light page bg the
     same way the .k9-* link/badge foregrounds do (audit 2026-07-10). Dark is set in
     the dark bridge block. */
  --bs-link-color: var(--k9-accent-text);
  --bs-link-color-rgb: 99, 85, 229;
  --bs-link-hover-color: var(--k9-accent-press);
  --bs-link-hover-color-rgb: 90, 76, 224;

  --bs-body-bg: var(--k9-surface);
  --bs-body-bg-rgb: 255, 255, 255;
  --bs-body-color: var(--k9-text);
  --bs-body-color-rgb: 21, 23, 28;

  --bs-emphasis-color: var(--k9-text);
  --bs-emphasis-color-rgb: 21, 23, 28;
  --bs-secondary-color: var(--k9-text-2);
  --bs-tertiary-color: var(--k9-text-3);

  --bs-border-color: var(--k9-hairline);
  --bs-secondary-bg: var(--k9-surface-2);
  --bs-tertiary-bg: var(--k9-surface-2);
}

/* Bootstrap variable bridge — DARK (the theme-varying numeric tuples + the
   dark-tuned link color). */
[data-bs-theme="dark"] {
  --bs-body-bg-rgb: 22, 24, 29;
  --bs-body-color-rgb: 241, 243, 246;
  --bs-emphasis-color-rgb: 241, 243, 246;

  /* The accent (#6d5efc) reads at only ~3.9:1 on the dark surface — below the
     WCAG AA 4.5:1 text threshold doc 25 § 7 requires in BOTH themes. Lighten
     links in dark to clear AA while keeping the violet identity (mirrors
     Bootstrap's own lighter-link-in-dark approach; the light accent stays for
     light mode via the :root bridge). */
  --bs-link-color: #9b8cff;
  --bs-link-color-rgb: 155, 140, 255;
  --bs-link-hover-color: #b3a6ff;
  --bs-link-hover-color-rgb: 179, 166, 255;
}

/* Apply the app type face to the document body (doc 25 § 3.1). */
body {
  font-family: var(--k9-font);
}