@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');

@font-face {
  font-family: 'PonterS';
  src: url('../assets/fonts/PonterS.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Font roles — PonterS for brand moments, Inter for UI/data */
  --font-display: 'PonterS', sans-serif;
  --font-ui:      'Inter', system-ui, -apple-system, sans-serif;

  /* Type scale (fixed rem for product UI) */
  --text-xs:   0.6875rem;  /* 11px — captions, badges */
  --text-sm:   0.75rem;    /* 12px — secondary labels */
  --text-base: 0.875rem;   /* 14px — table body, form fields */
  --text-md:   1rem;       /* 16px — primary body */
  --text-lg:   1.25rem;    /* 20px — subheadings */
  --text-xl:   1.5rem;     /* 24px — page titles */
  --text-2xl:  2rem;       /* 32px — KPI values */

  /* Line heights */
  --lh-tight:  1.15;
  --lh-snug:   1.35;
  --lh-base:   1.55;

  /* Letter spacing */
  --ls-tight:  -0.01em;
  --ls-normal:  0;
  --ls-wide:    0.04em;
  --ls-wider:   0.08em;
  --ls-brand:   0.12em;
  /* Brand */
  --brand:       #8BC9E2;
  --brand-dark:  #5BAFD0;
  --brand-hover: #9DD4EA;
  --divider:     #0E5069;

  /* Surfaces */
  --bg-base:     #AECFE3;
  --surface:     rgba(255,255,255,0.75);
  --surface2:    rgba(255,255,255,0.50);
  --surface-hi:  rgba(255,255,255,0.92);
  --surface-lo:  rgba(255,255,255,0.10);

  /* Borders */
  --border:      rgba(139,201,226,0.25);
  --border-hi:   rgba(139,201,226,0.45);
  --border-white:rgba(255,255,255,0.40);

  /* Text */
  --text:        #0A1520;
  --text-muted:  #2E4E68;
  --text-light:  #5A80A0;
  --text-white:  rgba(255,255,255,0.85);
  --text-white-hi:#FFFFFF;

  /* Sidebar */
  --sb-width:    341px;
  --sb-bg:       rgba(255,255,255,0.01);
  --sb-hover:    rgba(84,84,84,0.07);
  --sb-active:   rgba(84,84,84,0.10);

  /* Status colors */
  --green:       #16a34a; --green-bg:  rgba(22,163,74,.12);
  --yellow:      #d97706; --yellow-bg: rgba(217,119,6,.12);
  --red:         #dc2626; --red-bg:    rgba(220,38,38,.12);
  --blue:        #8BC9E2; --blue-bg:   rgba(139,201,226,.12);
  --gray:        #64748b; --gray-bg:   rgba(100,116,139,.12);

  /* Radius */
  --r:    12px;
  --rs:   8px;
  --rl:   20px;
  --rpill:42px;

  /* Shadows */
  --sh:   0 2px 14px rgba(10,40,80,.08),  inset 0 1px 0 rgba(255,255,255,.90);
  --shm:  0 8px 32px rgba(10,40,80,.12),  inset 0 1px 0 rgba(255,255,255,.95);
  --shl:  0 24px 64px rgba(10,40,80,.18), inset 0 1px 0 rgba(255,255,255,1);
  --glow: 0 0 28px rgba(139,201,226,.25);

  /* Blur */
  --blur-sm: blur(12px) saturate(160%);
  --blur-md: blur(22px) saturate(170%);
  --blur-lg: blur(44px) saturate(190%);
  --blur-sb: blur(45px);

  /* Layout */
  --topbar:  60px;
  --t:       .2s ease;
}