/* ============================================================
   FIMS Design System — Colors & Type Tokens
   Brand: Facilities Information Management System for EUSPA
   Source: FIMS v2.0 prototype (shared/fims-shell.css)
   ============================================================ */

/* Webfonts: Manrope (sans-serif UI) + Source Serif 4 (display) */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700;800&family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,600;0,8..60,700;1,8..60,400&display=swap');

:root{
  /* ---------- Brand core ---------- */
  --fims-gold:            #FCCD41; /* primary brand mark colour */
  --fims-gold-dark:       #D4A520;
  --fims-gold-light:      #FCCD41;
  --fims-navy:            #1a2744;
  --fims-navy-l:          #243352;
  --fims-navy-ll:         #2d3f62;
  --fims-ink:             #4e565b; /* brand ink, used on cards */
  --fims-shell-tone:      #353e3f; /* sidebar + topbar base */

  /* ---------- Neutrals (light theme) ---------- */
  --fims-bg:              #e0e4e4; /* page / canvas background */
  --fims-white:           #ffffff;
  --fims-card:            #ffffff;
  --fims-card-sub:        #f0f2f2;
  --fims-panel:           #ffffff;
  --fims-brd:             #d4d9d9;
  --fims-brd-l:           #e2e6e6;

  /* ---------- Foreground / text ---------- */
  --fims-fg1:             #1a2332; /* primary text */
  --fims-fg2:             #596578; /* secondary text */
  --fims-fg3:             #94a3b8; /* tertiary / meta */

  /* ---------- Semantic / status ---------- */
  --fims-teal:            #0d9488; /* primary action */
  --fims-teal-d:          rgba(13,148,136,.08);
  --fims-blue:            #2563eb; /* info, links */
  --fims-blue-d:          rgba(37,99,235,.08);
  --fims-amber:           #d97706; /* warning */
  --fims-amber-d:         rgba(217,119,6,.08);
  --fims-green:           #059669; /* success */
  --fims-green-d:         rgba(5,150,105,.08);
  --fims-red:             #dc2626; /* danger */
  --fims-red-d:           rgba(220,38,38,.08);
  --fims-purple:          #7c3aed; /* compliance / data-centre */
  --fims-purple-d:        rgba(124,58,237,.08);

  /* ---------- Environmental module accents ---------- */
  --fims-env-energy:      #2563eb;
  --fims-env-air:         #7c3aed;
  --fims-env-water:       #0891b2;
  --fims-env-waste:       #d97706;
  --fims-env-land:        #059669;
  --fims-env-fte:         #475569;

  /* ---------- Elevation ---------- */
  --fims-card-edge:       rgba(148,163,184,.28);
  --fims-card-shadow:     0 4px 16px rgba(15,23,42,.08);
  --fims-card-shadow-hover:0 8px 24px rgba(15,23,42,.12);
  --fims-shadow-md:       0 8px 24px rgba(15,23,42,.08);
  --fims-shadow-lg:       0 20px 45px rgba(15,23,42,.12);

  /* ---------- Radii ---------- */
  --fims-r-xs:            4px;
  --fims-r-sm:            6px;
  --fims-r-md:            10px;
  --fims-r-lg:            14px;
  --fims-r-xl:            16px;
  --fims-r-chip:          5px;  /* section chip radius */
  --fims-r-pill:          999px;

  /* ---------- Spacing scale ---------- */
  --fims-sp-1:            4px;
  --fims-sp-2:            8px;
  --fims-sp-3:            12px;
  --fims-sp-4:            14px;
  --fims-sp-5:            16px;
  --fims-sp-6:            18px;
  --fims-sp-7:            20px;
  --fims-sp-8:            22px;
  --fims-sp-9:            28px;

  /* ---------- Layout ---------- */
  --fims-sidebar-w:       240px;
  --fims-topbar-h:        62px;

  /* ---------- Transitions ---------- */
  --fims-tr-fast:         .15s ease;
  --fims-tr:              .2s ease;

  /* ---------- Type families ---------- */
  --fims-fn:              'Manrope', 'Inter', system-ui, -apple-system, sans-serif;
  --fims-fd:              'Source Serif 4', 'Source Serif Pro', Georgia, serif;

  /* ---------- Type scale (sans / UI) ---------- */
  --fims-ts-xs:           0.62rem;  /* 8.68px @ html 14 — kickers, chips */
  --fims-ts-sm:           0.72rem;  /* 10.08px — labels, captions */
  --fims-ts-body-s:       0.78rem;  /* 10.92px — dense table text */
  --fims-ts-body:         0.82rem;  /* 11.48px — body copy */
  --fims-ts-body-l:       0.88rem;  /* 12.32px — emphasised body */
  --fims-ts-btn:          0.75rem;  /* 10.5px — buttons */

  /* ---------- Type scale (serif / display) ---------- */
  --fims-ds-kpi-sm:       1.18rem;
  --fims-ds-kpi:          1.45rem;
  --fims-ds-kpi-lg:       1.68rem;
  --fims-ds-h3:           1rem;
  --fims-ds-h2:           1.3rem;
  --fims-ds-h1:           1.78rem;
  --fims-ds-hero:         2rem;

  /* ---------- Weights ---------- */
  --fims-fw-regular:      400;
  --fims-fw-medium:       500;
  --fims-fw-semi:         600;
  --fims-fw-bold:         700;
  --fims-fw-heavy:        800;
}

/* ---------- Dark theme overrides ---------- */
:root[data-theme="dark"]{
  --fims-navy:            #0f172a;
  --fims-navy-l:          #18233b;
  --fims-navy-ll:         #22304e;
  --fims-bg:              #0b1220;
  --fims-white:           #111a2e;
  --fims-card:            #101a2f;
  --fims-card-sub:        #101a2f;
  --fims-panel:           #111b31;
  --fims-brd:             #26344f;
  --fims-brd-l:           #1b2740;
  --fims-fg1:             #e2e8f0;
  --fims-fg2:             #b5c2d8;
  --fims-fg3:             #8ea0bf;
  --fims-teal-d:          rgba(45,212,191,.16);
  --fims-blue-d:          rgba(96,165,250,.16);
  --fims-amber-d:         rgba(251,191,36,.16);
  --fims-green-d:         rgba(52,211,153,.16);
  --fims-red-d:           rgba(248,113,113,.16);
  --fims-purple-d:        rgba(167,139,250,.16);
  --fims-card-edge:       rgba(148,163,184,.24);
  --fims-card-shadow:     0 14px 30px rgba(2,8,23,.3);
  --fims-card-shadow-hover:0 18px 36px rgba(2,8,23,.38);
  --fims-shadow-md:       0 10px 30px rgba(2,8,23,.35);
  --fims-shadow-lg:       0 24px 60px rgba(2,8,23,.55);
}

/* ============================================================
   Semantic typography elements
   Use these selectors to style typical content blocks the FIMS
   way without having to re-apply tokens by hand.
   ============================================================ */

.fims-kicker{
  font-family:var(--fims-fn);
  font-size:var(--fims-ts-xs);
  font-weight:var(--fims-fw-heavy);
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--fims-teal);
}

.fims-eyebrow{
  font-family:var(--fims-fn);
  font-size:.64rem;
  font-weight:var(--fims-fw-heavy);
  letter-spacing:.45px;
  text-transform:uppercase;
  color:var(--fims-fg3);
}

.fims-h1, h1.fims{
  font-family:var(--fims-fd);
  font-size:var(--fims-ds-h1);
  font-weight:var(--fims-fw-bold);
  letter-spacing:-.04em;
  line-height:1.06;
  color:var(--fims-fg1);
}

.fims-hero, h1.fims-hero{
  font-family:var(--fims-fd);
  font-size:var(--fims-ds-hero);
  font-weight:var(--fims-fw-bold);
  letter-spacing:-.05em;
  line-height:1.03;
  color:var(--fims-fg1);
}

.fims-h2, h2.fims{
  font-family:var(--fims-fd);
  font-size:var(--fims-ds-h2);
  font-weight:var(--fims-fw-bold);
  letter-spacing:-.02em;
  line-height:1.18;
  color:var(--fims-fg1);
}

.fims-h3, h3.fims{
  font-family:var(--fims-fd);
  font-size:var(--fims-ds-h3);
  font-weight:var(--fims-fw-bold);
  letter-spacing:-.02em;
  color:var(--fims-fg1);
}

.fims-kpi{
  font-family:var(--fims-fd);
  font-size:var(--fims-ds-kpi);
  font-weight:var(--fims-fw-bold);
  letter-spacing:-.03em;
  line-height:1.12;
  color:var(--fims-fg1);
}
.fims-kpi small{
  font-family:var(--fims-fn);
  font-size:.5em;
  font-weight:var(--fims-fw-semi);
  color:var(--fims-fg2);
  margin-left:2px;
}

.fims-body, p.fims{
  font-family:var(--fims-fn);
  font-size:var(--fims-ts-body);
  line-height:1.62;
  color:var(--fims-fg2);
}

.fims-body-sm{
  font-family:var(--fims-fn);
  font-size:var(--fims-ts-body-s);
  line-height:1.55;
  color:var(--fims-fg2);
}

.fims-label{
  font-family:var(--fims-fn);
  font-size:var(--fims-ts-xs);
  font-weight:var(--fims-fw-heavy);
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--fims-fg3);
}

.fims-mono{
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:.78rem;
}

/* Section chip — the signature FIMS pattern for section titles */
.fims-section-chip{
  display:inline-flex;align-items:center;gap:7px;
  padding:5px 10px;
  border-radius:var(--fims-r-chip);
  background:var(--fims-bg);
  color:var(--fims-shell-tone);
  font-family:var(--fims-fn);
  font-size:var(--fims-ts-xs);
  font-weight:var(--fims-fw-heavy);
  letter-spacing:.12em;
  text-transform:uppercase;
  line-height:1;
}
.fims-section-chip::before{
  content:'';width:8px;height:8px;border-radius:50%;background:currentColor;flex-shrink:0;
}