/* ============================================================
   Blue Sense Digital - Colors & Type Foundations
   ============================================================
   Primary brand blue: #0362d1
   Palette philosophy: blue + black + white.
   Green and Red reserved for high-impact KPIs / callouts.
   ============================================================ */

/* ---------- Fonts ---------- */
@font-face {
  font-family: 'Cerebri Sans Pro';
  src: url('fonts/CerebriSansPro-Thin.ttf') format('truetype');
  font-weight: 100; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Cerebri Sans Pro';
  src: url('fonts/CerebriSansPro-ThinItalic.ttf') format('truetype');
  font-weight: 100; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Cerebri Sans Pro';
  src: url('fonts/CerebriSansPro-ExtraLight.ttf') format('truetype');
  font-weight: 200; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Cerebri Sans Pro';
  src: url('fonts/CerebriSansPro-ExtraLightItalic.ttf') format('truetype');
  font-weight: 200; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Cerebri Sans Pro';
  src: url('fonts/CerebriSansPro-Light.ttf') format('truetype');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Cerebri Sans Pro';
  src: url('fonts/CerebriSansPro-LightItalic.ttf') format('truetype');
  font-weight: 300; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Cerebri Sans Pro';
  src: url('fonts/CerebriSansPro-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Cerebri Sans Pro';
  src: url('fonts/CerebriSansPro-Italic.ttf') format('truetype');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Cerebri Sans Pro';
  src: url('fonts/CerebriSansPro-Medium.ttf') format('truetype');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Cerebri Sans Pro';
  src: url('fonts/CerebriSansPro-MediumItalic.ttf') format('truetype');
  font-weight: 500; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Cerebri Sans Pro';
  src: url('fonts/CerebriSansPro-SemiBold.ttf') format('truetype');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Cerebri Sans Pro';
  src: url('fonts/CerebriSansPro-SemiBoldItalic.ttf') format('truetype');
  font-weight: 600; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Cerebri Sans Pro';
  src: url('fonts/CerebriSansPro-Bold.ttf') format('truetype');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Cerebri Sans Pro';
  src: url('fonts/CerebriSansPro-BoldItalic.ttf') format('truetype');
  font-weight: 700; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Cerebri Sans Pro';
  src: url('fonts/CerebriSansPro-ExtraBold.ttf') format('truetype');
  font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Cerebri Sans Pro';
  src: url('fonts/CerebriSansPro-ExtraBoldItalic.ttf') format('truetype');
  font-weight: 800; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Cerebri Sans Pro';
  src: url('fonts/CerebriSansPro-Heavy.ttf') format('truetype');
  font-weight: 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Cerebri Sans Pro';
  src: url('fonts/CerebriSansPro-HeavyItalic.ttf') format('truetype');
  font-weight: 900; font-style: italic; font-display: swap;
}

/* ---------- Design Tokens ---------- */
:root {
  /* --- Brand --- */
  --bsd-blue: #0362d1;            /* primary */
  --bsd-blue-hover: #0253b0;      /* darker press/hover */
  --bsd-blue-600: #0253b0;
  --bsd-blue-700: #034089;
  --bsd-blue-800: #022d60;
  --bsd-blue-900: #021f43;
  --bsd-blue-500: #0362d1;
  --bsd-blue-400: #4389dd;
  --bsd-blue-300: #7aafe8;
  --bsd-blue-200: #b5d2f2;
  --bsd-blue-100: #dde9f9;
  --bsd-blue-50:  #eff4fd;
  --bsd-blue-tint: #f5f9ff;       /* near-white, subtly blue */

  /* --- Neutrals (warmed very slightly toward cool) --- */
  --bsd-black:   #0a0d12;
  --bsd-ink-900: #111419;
  --bsd-ink-800: #1c2026;
  --bsd-ink-700: #2a2f38;
  --bsd-ink-600: #434a55;
  --bsd-ink-500: #616874;
  --bsd-ink-400: #868d98;
  --bsd-ink-300: #b0b5bd;
  --bsd-ink-200: #d3d7dc;
  --bsd-ink-100: #e8eaee;
  --bsd-ink-50:  #f4f5f7;
  --bsd-white:   #ffffff;

  /* --- Semantic colors (reserved for KPI / callout moments) --- */
  --bsd-green-500: #13b981;       /* "up" / positive */
  --bsd-green-600: #0e9468;
  --bsd-green-100: #d6f4e7;
  --bsd-green-50:  #ecfaf3;

  --bsd-red-500:   #e0384c;       /* "down" / negative */
  --bsd-red-600:   #b92a3c;
  --bsd-red-100:   #fadce0;
  --bsd-red-50:    #fdeef0;

  --bsd-amber-500: #f5a524;
  --bsd-amber-100: #feecca;

  /* --- Foreground / Background roles --- */
  --bsd-fg-1: var(--bsd-ink-900);      /* primary text */
  --bsd-fg-2: var(--bsd-ink-600);      /* secondary text */
  --bsd-fg-3: var(--bsd-ink-500);      /* tertiary / metadata */
  --bsd-fg-on-blue: var(--bsd-white);
  --bsd-fg-link: var(--bsd-blue);

  --bsd-bg-1: var(--bsd-white);        /* base surface */
  --bsd-bg-2: var(--bsd-ink-50);       /* subtle section / card bg */
  --bsd-bg-3: var(--bsd-ink-100);      /* divider area / strong card bg */
  --bsd-bg-inverse: var(--bsd-black);
  --bsd-bg-brand: var(--bsd-blue);
  --bsd-bg-brand-soft: var(--bsd-blue-tint);

  --bsd-border: var(--bsd-ink-100);
  --bsd-border-strong: var(--bsd-ink-200);
  --bsd-border-on-blue: rgba(255, 255, 255, 0.22);

  /* --- Typography --- */
  --bsd-font-sans: 'Cerebri Sans Pro', -apple-system, BlinkMacSystemFont,
                   'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --bsd-font-mono: 'JetBrains Mono', 'IBM Plex Mono', 'Menlo', 'Consolas',
                   ui-monospace, monospace;
  --bsd-font-display: var(--bsd-font-sans);

  /* Weights */
  --bsd-w-regular: 400;
  --bsd-w-medium: 500;
  --bsd-w-semibold: 600;
  --bsd-w-bold: 700;
  --bsd-w-extrabold: 800;
  --bsd-w-heavy: 900;

  /* Sizes (type scale - slightly expressive; agency vibe) */
  --bsd-size-display-xl: clamp(56px, 7vw, 112px); /* hero stunt type */
  --bsd-size-display-lg: clamp(44px, 5.5vw, 80px);
  --bsd-size-display-md: clamp(36px, 4.5vw, 64px);
  --bsd-size-h1: 48px;
  --bsd-size-h2: 36px;
  --bsd-size-h3: 28px;
  --bsd-size-h4: 22px;
  --bsd-size-h5: 18px;
  --bsd-size-h6: 16px;
  --bsd-size-body-lg: 18px;
  --bsd-size-body: 16px;
  --bsd-size-body-sm: 14px;
  --bsd-size-caption: 12px;
  --bsd-size-micro: 11px;
  --bsd-size-kpi: clamp(44px, 5vw, 72px); /* metric/number display */

  /* Line heights */
  --bsd-lh-tight: 1.04;         /* display */
  --bsd-lh-snug: 1.18;          /* h1/h2 */
  --bsd-lh-heading: 1.28;       /* h3-h6 */
  --bsd-lh-body: 1.55;
  --bsd-lh-loose: 1.7;

  /* Letter spacing */
  --bsd-track-tight: -0.02em;   /* display */
  --bsd-track-snug: -0.01em;
  --bsd-track-normal: 0;
  --bsd-track-wide: 0.08em;     /* eyebrow / caps */
  --bsd-track-xwide: 0.16em;    /* "DIGITAL" label under logo */

  /* ---- Radii ---- */
  --bsd-radius-xs: 2px;
  --bsd-radius-sm: 4px;
  --bsd-radius-md: 8px;
  --bsd-radius-lg: 12px;
  --bsd-radius-xl: 20px;
  --bsd-radius-2xl: 28px;
  --bsd-radius-pill: 999px;

  /* ---- Spacing scale (4px base) ---- */
  --bsd-space-1: 4px;
  --bsd-space-2: 8px;
  --bsd-space-3: 12px;
  --bsd-space-4: 16px;
  --bsd-space-5: 20px;
  --bsd-space-6: 24px;
  --bsd-space-8: 32px;
  --bsd-space-10: 40px;
  --bsd-space-12: 48px;
  --bsd-space-16: 64px;
  --bsd-space-20: 80px;
  --bsd-space-24: 96px;
  --bsd-space-32: 128px;

  /* ---- Shadows / Elevation ---- */
  --bsd-shadow-xs: 0 1px 2px rgba(10, 13, 18, 0.04);
  --bsd-shadow-sm: 0 1px 3px rgba(10, 13, 18, 0.06),
                   0 1px 2px rgba(10, 13, 18, 0.04);
  --bsd-shadow-md: 0 6px 16px -4px rgba(10, 13, 18, 0.10),
                   0 2px 4px rgba(10, 13, 18, 0.04);
  --bsd-shadow-lg: 0 18px 40px -12px rgba(10, 13, 18, 0.18),
                   0 4px 10px rgba(10, 13, 18, 0.06);
  --bsd-shadow-xl: 0 32px 64px -20px rgba(10, 13, 18, 0.28);
  --bsd-shadow-blue: 0 14px 36px -10px rgba(3, 98, 209, 0.45);
  --bsd-shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.2);
  --bsd-ring-focus: 0 0 0 3px rgba(3, 98, 209, 0.28);

  /* ---- Signature gradients (used sparingly for depth) ---- */
  --bsd-gradient-blue:
      linear-gradient(135deg, #0362d1 0%, #034089 100%);
  --bsd-gradient-blue-soft:
      linear-gradient(135deg, #eff4fd 0%, #b5d2f2 100%);
  --bsd-gradient-ink:
      linear-gradient(180deg, #1c2026 0%, #0a0d12 100%);

  /* ---- Motion ---- */
  --bsd-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --bsd-ease-emphasized: cubic-bezier(0.2, 0.8, 0.2, 1);
  --bsd-dur-fast: 120ms;
  --bsd-dur-base: 200ms;
  --bsd-dur-slow: 320ms;

  /* ---- Layout ---- */
  --bsd-container-sm: 720px;
  --bsd-container-md: 960px;
  --bsd-container-lg: 1200px;
  --bsd-container-xl: 1360px;
}

/* ============================================================
   Base / Semantic typography
   ============================================================ */
.bsd, [data-bsd] {
  font-family: var(--bsd-font-sans);
  color: var(--bsd-fg-1);
  background: var(--bsd-bg-1);
  font-weight: var(--bsd-w-regular);
  font-size: var(--bsd-size-body);
  line-height: var(--bsd-lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Utility text styles */
.bsd-display-xl {
  font-family: var(--bsd-font-display);
  font-weight: var(--bsd-w-extrabold);
  font-size: var(--bsd-size-display-xl);
  line-height: var(--bsd-lh-tight);
  letter-spacing: var(--bsd-track-tight);
}
.bsd-display-lg {
  font-family: var(--bsd-font-display);
  font-weight: var(--bsd-w-extrabold);
  font-size: var(--bsd-size-display-lg);
  line-height: var(--bsd-lh-tight);
  letter-spacing: var(--bsd-track-tight);
}
.bsd-display-md {
  font-family: var(--bsd-font-display);
  font-weight: var(--bsd-w-bold);
  font-size: var(--bsd-size-display-md);
  line-height: var(--bsd-lh-snug);
  letter-spacing: var(--bsd-track-snug);
}
.bsd-h1 {
  font-weight: var(--bsd-w-bold);
  font-size: var(--bsd-size-h1);
  line-height: var(--bsd-lh-snug);
  letter-spacing: var(--bsd-track-snug);
}
.bsd-h2 {
  font-weight: var(--bsd-w-bold);
  font-size: var(--bsd-size-h2);
  line-height: var(--bsd-lh-snug);
  letter-spacing: var(--bsd-track-snug);
}
.bsd-h3 {
  font-weight: var(--bsd-w-semibold);
  font-size: var(--bsd-size-h3);
  line-height: var(--bsd-lh-heading);
}
.bsd-h4 {
  font-weight: var(--bsd-w-semibold);
  font-size: var(--bsd-size-h4);
  line-height: var(--bsd-lh-heading);
}
.bsd-h5 {
  font-weight: var(--bsd-w-semibold);
  font-size: var(--bsd-size-h5);
  line-height: var(--bsd-lh-heading);
}
.bsd-h6 {
  font-weight: var(--bsd-w-semibold);
  font-size: var(--bsd-size-h6);
  line-height: var(--bsd-lh-heading);
}
.bsd-body-lg {
  font-weight: var(--bsd-w-regular);
  font-size: var(--bsd-size-body-lg);
  line-height: var(--bsd-lh-body);
}
.bsd-body {
  font-weight: var(--bsd-w-regular);
  font-size: var(--bsd-size-body);
  line-height: var(--bsd-lh-body);
}
.bsd-body-sm {
  font-weight: var(--bsd-w-regular);
  font-size: var(--bsd-size-body-sm);
  line-height: var(--bsd-lh-body);
}
.bsd-caption {
  font-size: var(--bsd-size-caption);
  line-height: 1.4;
  color: var(--bsd-fg-3);
}
.bsd-eyebrow {
  font-size: var(--bsd-size-caption);
  font-weight: var(--bsd-w-semibold);
  letter-spacing: var(--bsd-track-xwide);
  text-transform: uppercase;
  color: var(--bsd-blue);
}
.bsd-kpi-number {
  font-weight: var(--bsd-w-heavy);
  font-size: var(--bsd-size-kpi);
  line-height: 1;
  letter-spacing: var(--bsd-track-tight);
  font-variant-numeric: tabular-nums;
}
.bsd-code {
  font-family: var(--bsd-font-mono);
  font-size: 0.92em;
  background: var(--bsd-ink-50);
  padding: 0.1em 0.35em;
  border-radius: var(--bsd-radius-sm);
}

/* Links */
.bsd-link, a.bsd-link {
  color: var(--bsd-fg-link);
  text-decoration: none;
  font-weight: var(--bsd-w-medium);
  transition: color var(--bsd-dur-fast) var(--bsd-ease);
}
.bsd-link:hover { color: var(--bsd-blue-hover); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }