/* =========================================================
   Sentinel Prime — Foundations
   Type + color tokens extracted from the reference interface.
   Load this once and consume the variables in components.
   ========================================================= */

/* ---- Type ---- */
/* Poppins — the real Sentinel Prime product typeface, supplied by the brand team. */
@font-face { font-family: "Poppins"; src: url("fonts/Poppins-Thin.otf") format("opentype");            font-weight: 100; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("fonts/Poppins-ThinItalic.otf") format("opentype");      font-weight: 100; font-style: italic; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("fonts/Poppins-ExtraLight.otf") format("opentype");      font-weight: 200; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("fonts/Poppins-ExtraLightItalic.otf") format("opentype");font-weight: 200; font-style: italic; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("fonts/Poppins-Light.otf") format("opentype");           font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("fonts/Poppins-LightItalic.otf") format("opentype");     font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("fonts/Poppins-Regular.otf") format("opentype");         font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("fonts/Poppins-Italic.otf") format("opentype");          font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("fonts/Poppins-Medium.otf") format("opentype");          font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("fonts/Poppins-MediumItalic.otf") format("opentype");    font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("fonts/Poppins-SemiBold.otf") format("opentype");        font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("fonts/Poppins-SemiBoldItalic.otf") format("opentype");  font-weight: 600; font-style: italic; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("fonts/Poppins-Bold.otf") format("opentype");            font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("fonts/Poppins-BoldItalic.otf") format("opentype");      font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("fonts/Poppins-ExtraBold.otf") format("opentype");       font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("fonts/Poppins-ExtraBoldItalic.otf") format("opentype"); font-weight: 800; font-style: italic; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("fonts/Poppins-Black.otf") format("opentype");           font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("fonts/Poppins-BlackItalic.otf") format("opentype");     font-weight: 900; font-style: italic; font-display: swap; }

:root {
  /* Font stacks. Poppins is the confirmed product typeface. */
  --font-sans: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  /* Type scale — tuned for data-dense CRM layouts */
  --fs-12: 12px;   /* meta, table sort hints */
  --fs-13: 13px;   /* form labels, stat card labels */
  --fs-14: 14px;   /* body, inputs, table cells */
  --fs-15: 15px;   /* primary body in dense areas */
  --fs-16: 16px;   /* section cards, emphasized body */
  --fs-18: 18px;   /* section titles ("Transaction", "Acquisition") */
  --fs-20: 20px;   /* stat card values */
  --fs-22: 22px;   /* page title ("Player List") */
  --fs-26: 26px;   /* occasional display */

  --lh-tight:  1.15;
  --lh-snug:   1.25;
  --lh-normal: 1.45;
  --lh-loose:  1.6;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;
  --fw-extra:   800;

  --tracking-caps: 0.06em;   /* ALL-CAPS stat card labels */
  --tracking-body: 0em;

  /* ---- Color primitives ----
     Sentinel has a deep navy chrome, a blue/indigo action palette,
     and a soft pastel data-card family with matching accent dots. */

  /* Navy / chrome */
  --navy-950: #0F111C;       /* sidebar bottom */
  --navy-900: #141627;       /* sidebar base */
  --navy-850: #1B1D33;       /* sidebar hover */
  --navy-800: #252748;       /* dark surface accent */
  --navy-700: #2E3154;

  /* Neutral surface */
  --bg-app:    #F3F4F6;      /* behind cards */
  --bg-surface:#FFFFFF;      /* cards, inputs */
  --bg-muted:  #F7F8FA;      /* subtle contrast */
  --bg-sunken: #EEF0F3;      /* nested panel */

  /* Borders */
  --border-subtle: #E5E7EB;
  --border-default:#D6DAE1;
  --border-strong: #B8BDC7;

  /* Text */
  --fg-primary:   #171923;
  --fg-secondary: #4A4F5C;
  --fg-tertiary:  #6B7280;
  --fg-quiet:     #9AA0AD;
  --fg-placeholder:#B5B9C3;
  --fg-on-dark:   #FFFFFF;
  --fg-on-dark-muted:#A7ACC0;

  /* Brand / action */
  --brand-500: #4F5BFF;      /* primary buttons, pill fills */
  --brand-600: #3D4AE6;      /* primary button hover */
  --brand-700: #2C38BF;      /* primary button press */
  --brand-100: #E7E9FF;      /* pill background selected */
  --brand-050: #F1F2FF;      /* faintest tint */

  /* Action secondaries (icon-buttons in reference) */
  --accent-green-500: #16A34A;
  --accent-green-600: #15803D;
  --accent-red-500:   #E53935;
  --accent-red-600:   #C1272B;

  /* Info banner (reference "Information :" strip) */
  --info-bg:     #E6EBFE;
  --info-border: #CBD4FA;
  --info-fg:     #1F2A7A;

  /* Stat-card pastel palette — accent dot + background pair.
     Order matches the card grid in the reference. */
  --stat-yellow-bg:  #FFF7D6;  --stat-yellow-dot:  #F2C94C;
  --stat-indigo-bg:  #E8EAFF;  --stat-indigo-dot:  #6574F4;
  --stat-pink-bg:    #FFE1E7;  --stat-pink-dot:    #EC5E78;
  --stat-teal-bg:    #D9F5EE;  --stat-teal-dot:    #2FBFA3;
  --stat-lilac-bg:   #EDE3FA;  --stat-lilac-dot:   #A073E8;
  --stat-mint-bg:    #D6F3ED;  --stat-mint-dot:    #1FB491;
  --stat-peach-bg:   #FFE7D6;  --stat-peach-dot:   #F08C3A;
  --stat-coral-bg:   #FFDCDC;  --stat-coral-dot:   #E6554F;
  --stat-salmon-bg:  #FFE0DA;  --stat-salmon-dot:  #F06248;
  --stat-celery-bg:  #EAF7D5;  --stat-celery-dot:  #8BC13B;
  --stat-sky-bg:     #E0F2FA;  --stat-sky-dot:     #3FA8E0;
  --stat-violet-bg:  #E5E3FA;  --stat-violet-dot:  #7B72E8;
  --stat-ice-bg:     #E3ECFB;  --stat-ice-dot:     #5A8AE8;
  --stat-rose-bg:    #FFE0EC;  --stat-rose-dot:    #EA5C97;
  --stat-butter-bg:  #FFF4C4;  --stat-butter-dot:  #E7B83A;
  --stat-grass-bg:   #DDF2C8;  --stat-grass-dot:   #68B23D;
  --stat-amber-bg:   #FFE3B5;  --stat-amber-dot:   #E89533;
  --stat-grape-bg:   #ECD8F5;  --stat-grape-dot:   #A85BD9;

  /* Status / semantic */
  --success-bg: #E6F7EC; --success-fg: #15803D; --success-border:#BBE8C8;
  --warning-bg: #FEF5D7; --warning-fg: #92650D; --warning-border:#F5DC93;
  --danger-bg:  #FEE3E2; --danger-fg:  #B42318; --danger-border: #F5B5B0;
  --info-pill-bg:  #E6EDFE; --info-pill-fg: #2C3FB0;

  /* Radii */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;   /* default inputs, cards */
  --radius-lg: 10px;  /* stat cards, primary buttons */
  --radius-xl: 14px;  /* outer panels */
  --radius-pill: 999px;

  /* Elevation */
  --shadow-xs: 0 1px 1px rgba(15, 17, 28, 0.04);
  --shadow-sm: 0 1px 2px rgba(15, 17, 28, 0.06), 0 1px 1px rgba(15, 17, 28, 0.04);
  --shadow-md: 0 4px 10px rgba(15, 17, 28, 0.06), 0 1px 2px rgba(15, 17, 28, 0.04);
  --shadow-lg: 0 10px 24px rgba(15, 17, 28, 0.08), 0 2px 6px rgba(15, 17, 28, 0.04);
  --shadow-focus: 0 0 0 3px rgba(79, 91, 255, 0.22);

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

  /* Motion */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-emphasized: cubic-bezier(0.2, 0, 0, 1.2);
  --dur-fast: 120ms;
  --dur-med:  200ms;
  --dur-slow: 320ms;
}

/* ---- Semantic type roles ---- */
.sp-page-title,
h1.sp {
  font: var(--fw-bold) var(--fs-22)/var(--lh-snug) var(--font-sans);
  color: var(--fg-primary);
  letter-spacing: -0.01em;
  margin: 0;
}

.sp-section-title,
h2.sp {
  font: var(--fw-bold) var(--fs-18)/var(--lh-snug) var(--font-sans);
  color: var(--fg-primary);
  margin: 0;
}

.sp-card-value {
  font: var(--fw-bold) var(--fs-20)/var(--lh-tight) var(--font-sans);
  color: var(--fg-primary);
}

.sp-eyebrow,
.sp-stat-label {
  font: var(--fw-semibold) var(--fs-12)/1.2 var(--font-sans);
  color: var(--fg-tertiary);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.sp-label {
  font: var(--fw-semibold) var(--fs-13)/1.3 var(--font-sans);
  color: var(--fg-primary);
}

.sp-body {
  font: var(--fw-regular) var(--fs-14)/var(--lh-normal) var(--font-sans);
  color: var(--fg-secondary);
}

.sp-body-sm {
  font: var(--fw-regular) var(--fs-13)/var(--lh-normal) var(--font-sans);
  color: var(--fg-secondary);
}

.sp-meta {
  font: var(--fw-regular) var(--fs-12)/1.4 var(--font-sans);
  color: var(--fg-quiet);
}

.sp-link {
  color: var(--brand-500);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
.sp-link:hover { color: var(--brand-600); }

.sp-mono {
  font-family: var(--font-mono);
  font-size: var(--fs-13);
  color: var(--fg-secondary);
}