/*
 * Mohap.Web.Ui — semantic design-theme variables (Task 0.3).
 * Served by the RCL at _content/Mohap.Web.Ui/css/theme.css; consumed by BOTH apps
 * (Console + Portal).
 *
 * The new design system is the monochrome SLATE ramp + a single #2563EB accent.
 * Tailwind utilities (text-accent, bg-slate-50, border, …) are the PRIMARY mechanism;
 * these CSS custom properties exist only for the handful of places where a utility is
 * awkward (e.g. inside scoped component CSS, gradients, box-shadow colour-stops).
 *
 * ADDITIVE / ZERO regression — naming:
 *   Both apps already ship a tokens.css that defines bare --accent / --surface / --ink /
 *   --ink-2 / --muted / --line / --line-strong with DIFFERENT (navy/teal, QB-CLEAR)
 *   values. This file is linked AFTER those tokens.css files, so reusing those bare
 *   names here would OVERRIDE them and visually change every existing page. To guarantee
 *   no collision and no regression, EVERY variable below is namespaced with `--ui-`.
 *   New components (built in later phases) opt in to the new theme by reading `--ui-*`
 *   (or, preferably, by using the Tailwind utilities directly).
 *
 * Light-only: there is no dark theme. Do not add a prefers-color-scheme block here.
 */
:root {
  /* Accent — the single brand colour (#2563EB / blue-600). */
  --ui-accent: #2563EB;
  --ui-accent-hover: #1D4ED8; /* blue-700 */
  --ui-accent-tint: #EFF6FF;  /* blue-50  */

  /* Surfaces. */
  --ui-surface: #FFFFFF;      /* cards / panels / raised surfaces */
  --ui-surface-page: #F8FAFC; /* page background — slate-50 */

  /* Ink ramp (text). */
  --ui-ink: #0F172A;          /* slate-900 — primary text */
  --ui-ink-2: #334155;        /* slate-700 — secondary text */
  --ui-muted: #64748B;        /* slate-500 — muted / metadata text */

  /* Hairlines. */
  --ui-line: #E2E8F0;         /* slate-200 — default hairline border */
  --ui-line-strong: #CBD5E1;  /* slate-300 — stronger divider / input border */

  /* Danger — the ONE semantic exception to the monochrome palette: validation errors.
     Red is the clearest, most conventional invalid signal (matches Blazor's .invalid). */
  --ui-danger: #DC2626;       /* red-600  — invalid field border + message text */
  --ui-danger-ring: rgba(220, 38, 38, 0.20); /* red-600 @ 20% — invalid focus ring */
}

/* Blazor validation output — plain CSS here (NOT the Tailwind layer) because these class names
   are emitted by the framework at runtime and never appear in the scanned markup, so Tailwind would
   purge them. <ValidationMessage> → .validation-message (per-field); <ValidationSummary> →
   ul.validation-errors > li.validation-message. Both render in the semantic danger red. */
.validation-message {
  display: block;
  margin-block-start: 4px;
  font-size: 12px;
  font-weight: 500;
  color: var(--ui-danger);
}
.validation-errors {
  margin: 0;
  padding-inline-start: 1.1em;
  font-size: 12px;
  font-weight: 500;
  color: var(--ui-danger);
}

/* ── Self-hosted Inter (variable, WOFF2) — the UI typeface for BOTH apps ─────────────────
   Self-hosting (same-origin) removes the runtime Google Fonts CDN dependency, so text renders
   IDENTICALLY on the Linux box with no FOUT and no CSP third-party allowance. One variable file
   per subset covers every weight (100–900). unicode-range mirrors Google's Inter subsetting:
   `latin` for Western text, `latin-ext` for accented names. Arabic is self-hosted separately
   (each app's fonts.css → Noto Naskh Arabic via --font-ar). */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-latin.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+2074, 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-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}