/* FRIOP theme — approved redesign 2026-10-07 (D-redesign-look-only-2026-10-07).
   Look only: colours, type, spacing. Pages keep their own markup and behaviour.
   Tokens match docs/prototypes/portal-redesign-prototype.html. */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&display=swap');

:root {
  --ground: #F5F6F8; --surface: #FFFFFF; --surface-2: #ECEEF2; --surface-3: #F8F9FB;
  --ink: #111827; --ink-soft: #4B5565; --ink-faint: #6B7280; --ink-axis: #9AA1AE;
  --line: #E4E7EC; --line-soft: #F0F1F4; --grid: #EEF0F3;
  --side: #111A2B; --side-hover: #1B2537; --side-on: #22304A; --side-ink: #B4BCCB; --side-label: #8D97AB;
  --brand: #2563EB; --brand-ink: #1D4ED8; --brand-soft: #EEF2FF; --mark: #3B82F6;
  --good: #166534; --good-soft: #DCFCE7; --good-dot: #16A34A;
  --warn: #92400E; --warn-soft: #FEF3C7; --warn-dot: #D97706;
  --crit: #991B1B; --crit-soft: #FEE2E2; --crit-dot: #DC2626;
  --violet: #5B21B6; --violet-soft: #EDE9FE;
  --sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #0D1320; --surface: #151D2D; --surface-2: #1E2840; --surface-3: #19223A;
    --ink: #EEF1F6; --ink-soft: #AEB6C6; --ink-faint: #8A93A6; --ink-axis: #6F7890;
    --line: #263049; --line-soft: #1F283C; --grid: #222B40;
    --side: #0A101C; --side-hover: #151D2D; --side-on: #1E2A42;
    --brand: #5B8DF6; --brand-ink: #8CB0FA; --brand-soft: #1C2A4A;
    --good: #6EE7A0; --good-soft: #143224; --warn: #FBBF5A; --warn-soft: #33270F;
    --crit: #FCA5A5; --crit-soft: #3A1A1A; --violet: #C4B5FD; --violet-soft: #2A2147;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --ground: #0D1320; --surface: #151D2D; --surface-2: #1E2840; --surface-3: #19223A;
  --ink: #EEF1F6; --ink-soft: #AEB6C6; --ink-faint: #8A93A6; --ink-axis: #6F7890;
  --line: #263049; --line-soft: #1F283C; --grid: #222B40;
  --side: #0A101C; --side-hover: #151D2D; --side-on: #1E2A42;
  --brand: #5B8DF6; --brand-ink: #8CB0FA; --brand-soft: #1C2A4A;
  --good: #6EE7A0; --good-soft: #143224; --warn: #FBBF5A; --warn-soft: #33270F;
  --crit: #FCA5A5; --crit-soft: #3A1A1A; --violet: #C4B5FD; --violet-soft: #2A2147;
  color-scheme: dark;
}

/* ---- shared building blocks ---- */
.ft-card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.ft-field { display: flex; flex-direction: column; gap: 6px; }
.ft-field label { font-size: 13px; font-weight: 600; color: var(--ink-soft); }
.ft-field input {
  min-height: 42px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--surface); color: var(--ink); font: inherit; font-size: 14px; outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.ft-field input::placeholder { color: var(--ink-axis); }
.ft-field input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.ft-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 16px; border: 0; border-radius: 9px;
  background: #2563EB; color: #fff; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
}
.ft-primary:hover { background: #1D4ED8; }
.ft-primary:disabled { opacity: .6; cursor: not-allowed; }
.ft-error {
  font-size: 13px; font-weight: 500; color: var(--crit); background: var(--crit-soft);
  padding: 10px 14px; border-radius: 8px;
}
.ft-muted { color: var(--ink-soft); }
.ft-faint { color: var(--ink-faint); }