/* Hanken Grotesk — self-hosted (SingleInterface design system), replaces the
 * former Google Fonts @import (DM Sans / Playfair / JetBrains Mono). */
@font-face {
  font-family: 'Hanken Grotesk';
  src: url('fonts/HankenGrotesk-VariableFont_wght.ttf') format('truetype-variations'),
       url('fonts/HankenGrotesk-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Hanken Grotesk';
  src: url('fonts/HankenGrotesk-Italic-VariableFont_wght.ttf') format('truetype-variations'),
       url('fonts/HankenGrotesk-Italic-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* --- SECTION 1: DESIGN TOKENS ---
 * Re-mapped to the SingleInterface Design System palette (see
 * /singleinterface-design skill). Token NAMES are kept as-is so every
 * component/utility below (and the page-level <style> in index.html /
 * login.html) needs no changes — only the underlying values moved to SI's
 * light, blue-accented system. */

:root {

  /* Colour — page/canvas surfaces (was "Void" dark; now SI's light system) */
  --color-void:            #F9FAFD;   /* SI surface-base — page bg */
  --color-void-mid:        #FFFFFF;   /* SI surface-elevated — sidebar / dark-card bg */
  --color-void-light:      #F3F6FC;   /* input / tinted surface */

  /* Colour — Iris (Brand Primary) → SI primary blue */
  --color-iris-deep:       #0E0071;   /* SI primary-deep (hover/press, headings accent) */
  --color-iris:            #0070FC;   /* SI primary-accent (CTAs, links, active state) */
  --color-iris-mid:        #0070FC;   /* SI primary-accent (kept distinct from -deep only) */
  --color-iris-light:      #EFF6FF;   /* SI blue-50 tint (badges, active nav bg) */

  /* Colour — Beam (Accent) → SI success green, used to distinguish
     lead/achievement metrics from spend metrics (mirrors SI's green trend chips) */
  --color-beam:            #16A34A;
  --color-beam-dark:       #15803D;
  --color-beam-light:      #F0FDF4;

  /* Colour — Stage / Fog / Mist (Light Backgrounds) */
  --color-stage:           #F9FAFD;   /* SI surface-base */
  --color-fog:             #F3F6FC;   /* metric-tile tint */
  --color-mist:            #E5E7EB;   /* SI border-default */

  /* Colour — Signals */
  --color-signal-green:    #16A34A;
  --color-signal-amber:    #CA8A04;
  --color-signal-red:      #DC2626;

  /* Colour — Neutrals */
  --color-neutral-900:     #111827;   /* SI text-primary */
  --color-neutral-500:     #6B7280;   /* SI text-tertiary */
  --color-neutral-200:     #D1D5DB;
  --color-white:           #FFFFFF;

  /* Typography — Font Families (100% Hanken Grotesk, per SI system — no
     separate display/serif face; mono falls back to the system stack) */
  --font-display: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body:    'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;

  /* Typography — Type Scale */
  --text-display:  700 64px/1.1 var(--font-display);
  --text-h1:       400 40px/1.2 var(--font-display);
  --text-h2:       500 28px/1.3 var(--font-body);
  --text-h3:       500 20px/1.4 var(--font-body);
  --text-h4:       500 16px/1.5 var(--font-body);
  --text-body-lg:  400 16px/1.7 var(--font-body);
  --text-body:     400 14px/1.7 var(--font-body);
  --text-body-sm:  400 12px/1.6 var(--font-body);
  --text-label:    500 11px/1.4 var(--font-body);
  --text-data-lg:  500 20px/1.3 var(--font-mono);
  --text-data:     400 14px/1.5 var(--font-mono);

  /* Spacing — 4px base grid */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* Border Radius */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:  12px;
  --radius-xl:  16px;
  --radius-full: 9999px;

  /* Elevation — SI's card shadow leans blue, not neutral (brand-distinctive) */
  --shadow-sm:   0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md:   0 4px 6px rgba(17, 24, 39, 0.08);
  --shadow-lg:   0 10px 20px rgba(17, 24, 39, 0.10);
  --shadow-card: 0 2px 8px rgba(0, 112, 252, 0.08);

  /* Easing Curves */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:  cubic-bezier(0.7, 0, 0.84, 0);

  /* Durations */
  --duration-fast:  150ms;
  --duration-base:  200ms;
  --duration-slow:  300ms;
}


/* --- SECTION 2: BASE RESET AND GLOBAL STYLES --- */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  font: var(--text-body);
  font-family: var(--font-body);
  background-color: var(--color-stage);
  color: var(--color-neutral-900);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'tnum' 1; /* tabular numerals — SI convention, keeps KPI columns aligned */
}

img,
video,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: var(--color-iris);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

::selection {
  background-color: var(--color-iris-light);
  color: var(--color-iris-deep);
}

button,
input,
select,
textarea {
  font: inherit;
}


/* --- SECTION 3: TYPOGRAPHY UTILITY CLASSES --- */

/* Type Scale */

.text-display {
  font: var(--text-display);
  letter-spacing: -0.02em;
}

.text-h1 {
  font: var(--text-h1);
  letter-spacing: -0.01em;
}

.text-h2 {
  font: var(--text-h2);
}

.text-h3 {
  font: var(--text-h3);
}

.text-h4 {
  font: var(--text-h4);
}

.text-body-lg {
  font: var(--text-body-lg);
}

.text-body {
  font: var(--text-body);
}

.text-body-sm {
  font: var(--text-body-sm);
}

.text-label {
  font: var(--text-label);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.text-data-lg {
  font: var(--text-data-lg);
  font-family: var(--font-mono);
}

.text-data {
  font: var(--text-data);
  font-family: var(--font-mono);
}

/* Colour Modifiers */

.text-primary {
  color: var(--color-neutral-900);
}

.text-secondary {
  color: var(--color-neutral-500);
}

.text-iris {
  color: var(--color-iris);
}

.text-beam {
  color: var(--color-beam-dark);
}

.text-success {
  color: var(--color-signal-green);
}

.text-warning {
  color: var(--color-signal-amber);
}

.text-danger {
  color: var(--color-signal-red);
}

.text-on-dark {
  color: var(--color-white);
}


/* --- SECTION 4: SURFACE CLASSES --- */

.surface-void {
  background-color: var(--color-void);
  color: var(--color-white);
}

.surface-void-mid {
  background-color: var(--color-void-mid);
  color: var(--color-white);
}

.surface-stage {
  background-color: var(--color-stage);
  color: var(--color-neutral-900);
}

.surface-fog {
  background-color: var(--color-fog);
  color: var(--color-neutral-900);
}

.surface-iris {
  background-color: var(--color-iris);
  color: var(--color-white);
}

.surface-iris-light {
  background-color: var(--color-iris-light);
  color: var(--color-iris-deep);
}

.surface-beam {
  background-color: var(--color-beam);
  color: var(--color-void);
}


/* --- SECTION 5: COMPONENT CLASSES --- */

/* Card — Standard Light (SI's elevated white card, blue-tinted shadow) */
.sp-card {
  background-color: var(--color-white);
  border: 0.5px solid var(--color-mist);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-card);
}

/* Card — was the dark-canvas variant; now an alias of .sp-card so every
   surface (filter bar, table wrappers) renders as the same SI light card. */
.sp-card-dark {
  background-color: var(--color-white);
  border: 0.5px solid var(--color-mist);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-card);
}

/* Metric Card */
.sp-metric-card {
  background-color: var(--color-fog);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}

.sp-metric-card .sp-metric-value {
  font: var(--text-data-lg);
  font-family: var(--font-body);
  font-variant-numeric: tabular-nums;
  color: var(--color-neutral-900);
}

.sp-metric-card .sp-metric-label {
  font: var(--text-body-sm);
  color: var(--color-neutral-500);
}

/* Badge */
.sp-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: var(--radius-sm);
  font: var(--text-label);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.sp-badge-iris {
  background-color: var(--color-iris-light);
  color: var(--color-iris-deep);
}

.sp-badge-beam {
  background-color: var(--color-beam-light);
  color: var(--color-beam-dark);
}

.sp-badge-green {
  background-color: #F0FDF4;
  color: #15803D;
}

.sp-badge-red {
  background-color: #FEF2F2;
  color: #B91C1C;
}

.sp-badge-amber {
  background-color: #FEFCE8;
  color: #A16207;
}

.sp-badge-dark {
  background-color: #F3F4F6;
  color: #6B7280;
}

/* Button — Primary */
.sp-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  background-color: var(--color-iris);
  color: var(--color-white);
  border: none;
  padding: 10px 20px;
  border-radius: var(--radius-md);
  font: var(--text-body);
  font-weight: 500;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-out),
              transform      var(--duration-fast) var(--ease-out);
  white-space: nowrap;
  text-decoration: none;
}

.sp-btn-primary:hover {
  background-color: var(--color-iris-deep);
  text-decoration: none;
}

.sp-btn-primary:active {
  transform: scale(0.98);
}

/* Button — Secondary */
.sp-btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  background-color: transparent;
  color: var(--color-iris);
  border: 0.5px solid var(--color-iris);
  padding: 10px 20px;
  border-radius: var(--radius-md);
  font: var(--text-body);
  font-weight: 500;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-out),
              transform        var(--duration-fast) var(--ease-out);
  white-space: nowrap;
  text-decoration: none;
}

.sp-btn-secondary:hover {
  background-color: var(--color-iris-light);
  text-decoration: none;
}

.sp-btn-secondary:active {
  transform: scale(0.98);
}

/* Button — Ghost (outline, sits on white cards — e.g. the filter bar) */
.sp-btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  background-color: var(--color-white);
  color: var(--color-neutral-900);
  border: 1px solid var(--color-mist);
  padding: 10px 20px;
  border-radius: var(--radius-md);
  font: var(--text-body);
  font-weight: 500;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-out),
              transform        var(--duration-fast) var(--ease-out);
  white-space: nowrap;
  text-decoration: none;
}

.sp-btn-ghost:hover {
  background-color: var(--color-fog);
  text-decoration: none;
}

.sp-btn-ghost:active {
  transform: scale(0.98);
}

/* Pill — Location / Network indicator */
.sp-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 4px 12px;
  border-radius: var(--radius-full);
  border: 0.5px solid var(--color-mist);
  background-color: var(--color-white);
  font: var(--text-body-sm);
  color: var(--color-neutral-900);
  white-space: nowrap;
}

.sp-pill-dot {
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background-color: var(--color-neutral-200);
}

.sp-pill-dot.live {
  background-color: var(--color-signal-green);
}

.sp-pill-dot.pending {
  background-color: var(--color-signal-amber);
}

.sp-pill-dot.inactive {
  background-color: var(--color-neutral-200);
}

/* Divider */
.sp-divider {
  height: 0.5px;
  background-color: var(--color-mist);
  border: none;
  margin: var(--space-6) 0;
}


/* --- SECTION 6: LAYOUT UTILITIES --- */

.sp-container {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--space-6);
}

.sp-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

.sp-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
}

.sp-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
}

.sp-flex {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.sp-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* Mobile-first: collapse all grids to single column below 640px */
@media (max-width: 640px) {
  .sp-grid-2,
  .sp-grid-3,
  .sp-grid-4 {
    grid-template-columns: minmax(0, 1fr);
  }

  .sp-container {
    padding-inline: var(--space-4);
  }
}


/* --- SECTION 7: DARK CANVAS UTILITY OVERRIDES --- */

/*
  Apply .dark-canvas to any wrapper that uses surface-void or surface-void-mid
  to automatically remap context-sensitive utilities.
*/

.dark-canvas {
  color: var(--color-white);
}

.dark-canvas .text-primary {
  color: var(--color-white);
}

.dark-canvas .text-secondary {
  color: rgba(255, 255, 255, 0.55);
}

.dark-canvas .text-on-dark {
  color: var(--color-white);
}

.dark-canvas .sp-divider {
  background-color: rgba(255, 255, 255, 0.08);
}

/* Light cards inside dark canvas become dark cards */
.dark-canvas .sp-card {
  background-color: var(--color-void-mid);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: none;
}

/* Metric card on dark canvas */
.dark-canvas .sp-metric-card {
  background-color: var(--color-void-light);
}

.dark-canvas .sp-metric-card .sp-metric-label {
  color: rgba(255, 255, 255, 0.55);
}

/* Pills on dark canvas */
.dark-canvas .sp-pill {
  background-color: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.80);
}

/* Links on dark canvas */
.dark-canvas a {
  color: var(--color-iris-mid);
}


/* --- SECTION 8: ANIMATION UTILITIES --- */

/* Keyframes */

@keyframes sp-reveal-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes sp-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Reveal — fade up */
.sp-reveal {
  animation: sp-reveal-in var(--duration-slow) var(--ease-out) both;
}

/* Staggered reveal — each direct child gets an incremental delay */
.sp-reveal-stagger > *:nth-child(1) {
  animation: sp-reveal-in var(--duration-slow) var(--ease-out) 0ms   both;
}
.sp-reveal-stagger > *:nth-child(2) {
  animation: sp-reveal-in var(--duration-slow) var(--ease-out) 80ms  both;
}
.sp-reveal-stagger > *:nth-child(3) {
  animation: sp-reveal-in var(--duration-slow) var(--ease-out) 160ms both;
}
.sp-reveal-stagger > *:nth-child(4) {
  animation: sp-reveal-in var(--duration-slow) var(--ease-out) 240ms both;
}
.sp-reveal-stagger > *:nth-child(5) {
  animation: sp-reveal-in var(--duration-slow) var(--ease-out) 320ms both;
}
.sp-reveal-stagger > *:nth-child(6) {
  animation: sp-reveal-in var(--duration-slow) var(--ease-out) 400ms both;
}

/* Fade in — opacity only */
.sp-fade-in {
  animation: sp-fade-in var(--duration-base) var(--ease-out) both;
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  .sp-reveal,
  .sp-reveal-stagger > *,
  .sp-fade-in {
    animation: none;
    opacity: 1;
    transform: none;
  }
}