/* ────────────────────────────────────────────────────────────────────────────
   portal-theme.css — Design tokens + reusable component classes that mirror
   spartan-portal-web.html (the customer portal).

   Pulled in as a thin additive layer over the existing styles.css. Each new
   internal-CRM surface that ships from iteration 12 onward uses these
   classes — gives us a coherent visual language without a full rewrite.
   Existing pages keep their current look until we explicitly migrate them.

   Palette source: spartan-portal-web.html uses Tailwind's stone-* warm
   greys, white surface, black `#0A0A0A` sidebar, red `#C41230` accent.
   These tokens recreate that without pulling in Tailwind.
   ──────────────────────────────────────────────────────────────────────── */

:root {
  /* Surface */
  --portal-bg:        #FAFAF9;        /* warm body bg */
  --portal-surface:   #FFFFFF;        /* card bg */
  --portal-sidebar:   #0A0A0A;        /* dark sidebar */
  --portal-overlay:   rgba(10,10,10,.4);

  /* Stone palette (warm greys) */
  --stone-50:  #FAFAF9;
  --stone-100: #F5F5F4;
  --stone-200: #E7E5E4;
  --stone-300: #D6D3D1;
  --stone-400: #A8A29E;
  --stone-500: #78716C;
  --stone-600: #57534E;
  --stone-700: #44403C;
  --stone-800: #292524;
  --stone-900: #1C1917;

  /* Brand */
  --spartan-red:        #C41230;
  --spartan-red-hover:  #A30E26;
  --spartan-red-soft:   #FFE4E6;

  /* Status colours (same as v1 styles.css so existing pages don't shift) */
  --status-green:  #15803D;
  --status-amber:  #B45309;
  --status-blue:   #1D4ED8;
  --status-purple: #7C3AED;

  /* Radius */
  --portal-radius-sm: 10px;
  --portal-radius-md: 14px;
  --portal-radius-lg: 16px;   /* rounded-2xl in Tailwind */
  --portal-radius-xl: 20px;

  /* Shadows */
  --portal-shadow-sm:  0 1px 3px rgba(0,0,0,.06);
  --portal-shadow-md:  0 4px 14px rgba(0,0,0,.08);
  --portal-shadow-lg:  0 10px 35px rgba(0,0,0,.2);

  /* Typography */
  --portal-font-display: 'Archivo', 'Syne', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --portal-font-body:    'Archivo', 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* Display heading — 32-46px range tracked tight, matches portal hero H1s. */
.portal-h1 {
  font-family: var(--portal-font-display);
  font-weight: 800;
  font-size: clamp(28px, 4vw, 46px);
  line-height: 1.02;
  letter-spacing: -0.015em;
  color: var(--stone-900);
  margin: 0;
}

/* Section heading — used for "Recent team calls", "Today" etc. */
.portal-h2 {
  font-family: var(--portal-font-display);
  font-weight: 700;
  font-size: clamp(20px, 2.5vw, 26px);
  line-height: 1.15;
  color: var(--stone-900);
  margin: 0;
}

/* Tiny uppercase label (the "QUOTE · SURVEY · DESIGN" track in the portal).
   Iter 33 fidelity pass: matches the spartan-portal-web source exactly —
   text-[10px] / uppercase / tracking-[0.22em] / text-stone-400 / font-semibold.
   The 0.22em tracking gives the label its airy, almost-spaced-out look that
   reads as design language rather than as a heading. */
.portal-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--stone-400);
}

/* Card — `rounded-2xl border border-stone-200 bg-white p-5 lg:p-6` in
   Tailwind terms. Default padding is 16px; .portal-card-pad-lg bumps it. */
.portal-card {
  background: var(--portal-surface);
  border: 1px solid var(--stone-200);
  border-radius: var(--portal-radius-lg);
  padding: 16px;
  box-shadow: var(--portal-shadow-sm);
}
.portal-card-pad-lg { padding: 20px 24px; }
.portal-card-flat    { box-shadow: none; }

/* Buttons */
.portal-btn-primary {
  background: var(--spartan-red);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-family: var(--portal-font-body);
  font-weight: 600;
  font-size: 12.5px;
  padding: 8px 14px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background .12s;
}
.portal-btn-primary:hover { background: var(--spartan-red-hover); }

.portal-btn-ghost {
  background: var(--portal-surface);
  color: var(--stone-700);
  border: 1px solid var(--stone-200);
  border-radius: 10px;
  font-family: var(--portal-font-body);
  font-weight: 500;
  font-size: 12.5px;
  padding: 7px 13px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background .12s, border-color .12s;
}
.portal-btn-ghost:hover { background: var(--stone-100); border-color: var(--stone-300); }

/* Chip/pill — used for status indicators inline with text. */
.portal-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 20px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.portal-chip-green  { background: #DCFCE7; color: var(--status-green); border: 1px solid #86EFAC; }
.portal-chip-amber  { background: #FEF3C7; color: var(--status-amber); border: 1px solid #FCD34D; }
.portal-chip-red    { background: var(--spartan-red-soft); color: var(--spartan-red); border: 1px solid #FECACA; }
.portal-chip-blue   { background: #DBEAFE; color: var(--status-blue); border: 1px solid #93C5FD; }
.portal-chip-stone  { background: var(--stone-100); color: var(--stone-700); border: 1px solid var(--stone-200); }

/* Divider — thin warm-grey line used between card sections. */
.portal-divider {
  border: none;
  border-top: 1px solid var(--stone-200);
  margin: 14px 0;
}

/* Two-tier "stat" — a tiny label above a big number. Used for KPI cards.
   Iter 33: stat-label aligned with portal-label exactly (text-[10px] /
   tracking-[0.22em] / stone-400 / 600). Stat value bumped to 26px Archivo
   with -.015em tracking to match the portal hero KPI tiles. */
.portal-stat-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--stone-400);
}
.portal-stat-value {
  font-family: var(--portal-font-display);
  font-weight: 800;
  font-size: 26px;
  letter-spacing: -0.015em;
  color: var(--stone-900);
  line-height: 1.05;
  margin-top: 6px;
}
.portal-stat-sub {
  font-size: 11.5px;
  color: var(--stone-500);
  margin-top: 2px;
}

/* Empty-state — the dashed grey card the portal shows when no data exists. */
.portal-empty {
  background: var(--portal-surface);
  border: 1px dashed var(--stone-300);
  border-radius: var(--portal-radius-md);
  padding: 28px 18px;
  text-align: center;
  font-size: 12.5px;
  color: var(--stone-500);
}