/* FireHub Portal — Level-1 alignment layer (2026-09-18, v0_1).
 * Drop-in for firehub-portal: copy to public/shared/portal-level1.css and load it AFTER
 * /shared/brand.css and /shared/gated.css (see 0001-portal-level1-link.patch).
 *
 * Presentation only. It changes no route, auth, Supabase, RLS, NDA, form behaviour or copy.
 * The ported components are ~97 % token-driven (partner-hub 115 var() / 3 hex, investor-room 111 / 3),
 * so redefining the tokens they consume converges the whole gated surface on the final public site's
 * Level-1 system (semantic colour, structural radius grammar, calm surfaces) without touching a
 * single component file. Typography stays as decided 2026-08-11 (Inter body · Satoshi display/CTA ·
 * JetBrains Mono technical only). --maxw 1880px (operational width, 2026-08-12) stays.
 */

:root {
  /* ---------- brand tokens (brand.css names) → Level 1 ---------- */
  --navy-950: #0a1b2d; --navy-900: #102a43; --navy-800: #1b3a5b; --navy-700: #2a4a6b; --navy-600: #3d5f80;
  --navy-500: #576a7c; --navy-400: #8499b0; --navy-300: #b8c5cf; --navy-200: #dce3e8; --navy-100: #eef2f5; --navy-50: #f6f8f8;
  /* orange = FireHub activity; fire-600 is used as small text → ≥ 4.5:1 on white */
  --fire-600: #b35200; --fire-500: #ff8d00; --fire-400: #ffa53a; --fire-300: #ffd3a3; --fire-200: #ffe3c2; --fire-50: #fff3e5;
  /* green only means confirmed / documented; text green ≥ 4.5:1 */
  --safe: #0f7a45; --safe-50: #e9f6ef;
  --warn: #b45309; --warn-50: #fff3e5;
  --danger: #b91c1c; --danger-50: #fee2e2;
  --paper: #faf8f4; --paper-2: #f3efe7; --paper-3: #ebe6db;
  --ink: var(--navy-900); --ink-soft: var(--navy-700); --ink-quiet: var(--navy-500);
  /* structural radius grammar (Visual Consolidation v0_3 §1.16): tight on structural surfaces */
  /* Pål 10.10: in the family of the FireHub app (Figma 09.10): cards 12, boxes and buttons 8, fields 4 */
  --radius-sm: 4px; --radius: 8px; --radius-lg: 12px;
  --ring: 0 0 0 1px var(--navy-100);
  --shadow-sm: 0 1px 0 rgba(16,42,67,.04), 0 1px 2px rgba(16,42,67,.05);
  --shadow: 0 14px 34px rgba(16,42,67,.06);
  --shadow-lg: 0 24px 60px rgba(16,42,67,.12), 0 2px 6px rgba(16,42,67,.06);
  --accent: var(--fire-500); --accent-strong: var(--fire-600); --accent-wash: var(--fire-50);

  /* ---------- legacy gated names (gated.css) → Level 1 ---------- */
  --orange: var(--fire-500); --orange-strong: var(--fire-600); --orange-wash: var(--fire-50); --orange-line: #f3d6b0;
  --green: var(--safe); --green-strong: #0f6b46; --green-wash: var(--safe-50); --green-line: #cfe9db;
  /* Siden er hvit, som på nettstedet; den varme #faf8f4 er en BOLK
     (--surface-2: .acc-row, .mat-card, fliser, tabellstriper), ikke sideflaten. */
  --bg: #ffffff; --surface: #ffffff; --surface-2: var(--paper);
  --line: var(--navy-200); --line-2: var(--navy-100);
  --r-sm: 4px; --r: 8px; --r-lg: 12px;
  --chip-green-bg: #e9f6ef; --chip-green-line: #cfe9db;
  --chip-gray-bg: #f3f6f7; --chip-gray-line: #dce3e8;
  --chip-orange-bg: #fff3e5; --chip-orange-line: #f3d6b0;

  /* ---------- status colours (UX contract, Pål 04.10): one new blue for information / in progress ----------
     Orange = primary action, navy = current task, blue = info/in progress, green = done, warn = attention, red = blocking.
     Text colours are ≥ 4.5:1 on white and on their own wash. Never use these as decoration. */
  --info: #1d5f99; --info-wash: #ebf3fa; --info-line: #bcd4ea;
  --current: var(--navy-900); --current-wash: var(--navy-50); --current-line: var(--navy-300);
  --warn-line: #f0cf9c; --danger-line: #f3b9b9;
}

/* Sideflaten er hvit fra første maling — også før Angular har startet, der
   bare brand.css gjelder (den satte #faf8f4 på body). */
body { background: #fff; }

/* ---------- global component language owned by gated.css (no encapsulation → safe to refine here) ---------- */
/* Buttons in the app's family (Pål 10.10, Figma 09.10): 8 px corners, the small button 36 px tall on a computer (44 on a phone, mobile.css). */
.btn { border-radius: 8px; }
.btn-sm { min-height: 36px; }
/* Primary CTA: Level-1 orange carries DARK ink (white on #ff8d00 is ~2.4:1). */
.btn-primary { color: #10253a; box-shadow: none; }
.btn-primary:hover { background: #ff9d24; }
.btn-primary:disabled { background: var(--fire-300); color: #6b4a2a; }
.btn-ghost { border-color: var(--navy-200); }
.btn-ghost:hover { background: var(--navy-50); border-color: var(--navy-300); }
/* Status chips: hard-coded attention colour → semantic token (≥ 4.5:1). */
.sb-pill.o { color: #9a4100; }
.sb-pill.n { color: var(--navy-600); }
/* NDA state surfaces keep the left rule; the rule reads as FireHub activity, never as a status. */
#ndaPanel, #ndaStatus { border-left-color: var(--fire-500); }
/* Focus visibility for every interactive element: the public site's own ring (site.css), 2026-09-22. */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 3px solid #176998; outline-offset: 3px; }

/* ---------- reduced motion: composed final states, nothing hidden ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* ---------- UI Foundation LOCKED v0.3, scoped (lane 1, Pål 12.10 svar 13 A: «fargene fra UI Foundation v0.3») ----------
 * One page at a time while the rest of FOC keeps the tokens above: a page that has moved wraps itself in .fh-v03 and every
 * shared building block inside it (fh-stat-tile, fh-line-chart, .btn, .fh-chip …) reads the v0.3 values through the same token
 * names. When all of FOC moves, these values become the :root ones and the class goes. First page: /admin/likviditet.
 * Canvas #F7F7F4, surfaces white and #F2F3F0, text #1A1D21 / #4F565F / #66707A, border #DADDD8, brand #FF8D00 only as an accent,
 * the primary action #C45400 with white text, status colours v0.3, cards 10 px, controls 8 px, the chart palette v0.3. */
.fh-v03 {
  --v03-canvas: #F7F7F4;
  --bg: #F7F7F4; --surface: #FFFFFF; --surface-2: #F2F3F0; --paper: #F2F3F0;
  --ink: #1A1D21; --ink-soft: #4F565F; --ink-quiet: #66707A; --line: #DADDD8; --line-2: #ECEEEA;
  --orange: #FF8D00; --orange-strong: #C45400; --orange-wash: #FFF3E5; --orange-line: #FFD7AE; --fire-500: #C45400;
  --info: #245B9E; --info-wash: #EDF4FC; --info-line: #C8DCF3;
  --green: #176B49; --green-strong: #176B49; --green-wash: #EBF7F1; --green-line: #C7E6D6;
  --warn: #74520D; --warn-50: #FFF6DE; --warn-line: #EEDAA5;
  --danger: #943838; --danger-50: #FDEEEE; --danger-line: #F2CCCC;
  --r: 10px; --r-lg: 10px;
  /* fh-line-chart tones: s2 #3F6F9D, s3 #7A68B0, s4 #D39A2C, s6 #2B8F86 (the v0.3 chart palette) */
  --navy-400: #3F6F9D; --fire-300: #D39A2C; --chart-3: #7A68B0; --chart-6: #2B8F86;
  background: var(--v03-canvas);
  color: var(--ink);
  font-family: 'Inter', system-ui, sans-serif;
}
.fh-v03 .btn { border-radius: 8px; }
.fh-v03 .btn-primary { background: #C45400; color: #FFFFFF; }
.fh-v03 .btn-primary:hover { background: #AD4700; }
.fh-v03 .btn-primary:disabled { background: #E3B08F; color: #FFFFFF; }
.fh-v03 :focus-visible { outline-color: #1E6FE8; }