/* BluSphere Management — design tokens + base (single file) */

/* ---- fonts.css ---- */
/* ============================================================
   Blusphere — Webfonts
   Display : Archivo  (bold geometric grotesque — echoes the
             heavy, slightly-expanded BLUSPHERE wordmark)
   Body    : Mulish   (clean humanist sans for running text)
   Mono    : Space Mono (technical/data — power-electronics feel)
   ============================================================ */

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url('assets/fonts/Archivo-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/Archivo-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/Archivo-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/Archivo-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('assets/fonts/Archivo-800.woff2') format('woff2');
}

@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/Mulish-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/Mulish-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/Mulish-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/Mulish-700.woff2') format('woff2');
}

@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/SpaceMono-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/SpaceMono-700.woff2') format('woff2');
}

/* ---- colors.css ---- */
/* ============================================================
   Blusphere — Color tokens
   The brand pivots on one decisive electric blue ("blu"),
   sampled from the sphere mark (#0030FF). Everything else is a
   disciplined neutral ink ramp + a deep navy for grounding.
   Semantic colors are kept quiet — this is a B2B consultancy,
   not a dashboard.
   ============================================================ */

:root {
  /* ---- Brand: BLU ramp (the sphere) ---- */
  --blu-50:  #F1F4FF;
  --blu-100: #E0E7FF;
  --blu-200: #BCC9FF;
  --blu-300: #8DA1FF;
  --blu-400: #4F6BFF;
  --blu-500: #0030FF;   /* PRIMARY — the Blusphere blue */
  --blu-600: #0026CC;   /* hover */
  --blu-700: #001D9E;   /* press / deep */
  --blu-800: #001673;
  --blu-900: #0A1147;

  /* ---- Navy (grounding / dark surfaces) ---- */
  --navy-900: #04081C;
  --navy-800: #0A1230;
  --navy-700: #131E45;

  /* ---- Ink neutrals (cool-gray, faint blue cast) ---- */
  --ink-900: #0B0F1C;   /* near-black text */
  --ink-800: #1A2030;
  --ink-700: #2C3447;
  --ink-600: #444D63;
  --ink-500: #5E667D;   /* muted text */
  --ink-400: #828BA3;
  --ink-300: #AEB6CB;
  --ink-200: #D6DBE8;   /* hairline borders */
  --ink-150: #E4E8F1;
  --ink-100: #EEF1F7;   /* subtle fills */
  --ink-50:  #F6F8FC;   /* page wash */
  --white:   #FFFFFF;

  /* ---- Semantic status ---- */
  --success-500: #0E9F6E;
  --success-100: #DEF7EC;
  --warning-500: #E2920B;
  --warning-100: #FCF1DC;
  --danger-500:  #D83A3A;
  --danger-100:  #FBE4E4;

  /* ============================================================
     SEMANTIC ALIASES — reference these in product, not raw ramps
     ============================================================ */

  /* Brand */
  --brand:            var(--blu-500);
  --brand-hover:      var(--blu-600);
  --brand-press:      var(--blu-700);
  --brand-subtle:     var(--blu-50);
  --brand-subtle-2:   var(--blu-100);
  --on-brand:         var(--white);

  /* Text */
  --text-strong:      var(--ink-900);
  --text-body:        var(--ink-700);
  --text-muted:       var(--ink-500);
  --text-faint:       var(--ink-400);
  --text-on-dark:     var(--white);
  --text-on-dark-mut: #AEB7D6;
  --text-link:        var(--blu-500);

  /* Surfaces */
  --surface-page:     var(--ink-50);
  --surface-card:     var(--white);
  --surface-sunken:   var(--ink-100);
  --surface-inverse:  var(--navy-900);
  --surface-brand:    var(--blu-500);

  /* Lines */
  --border-subtle:    var(--ink-150);
  --border-default:   var(--ink-200);
  --border-strong:    var(--ink-300);
  --border-brand:     var(--blu-500);
  --border-on-dark:   rgba(255,255,255,0.14);

  /* Focus ring */
  --ring:             rgba(0,48,255,0.35);
}

/* ---- typography.css ---- */
/* ============================================================
   Blusphere — Typography tokens
   Archivo for display (tight tracking, heavy weights, the
   occasional tracked-out caps eyebrow like "FRACTIONAL MANAGERS").
   Mulish for body. Space Mono for technical labels & data.
   ============================================================ */

:root {
  /* ---- Families ---- */
  --font-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --font-body:    'Mulish', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    'Space Mono', ui-monospace, 'SFMono-Regular', monospace;

  /* ---- Weights ---- */
  --fw-regular:  400; /* @kind font */
  --fw-medium:   500; /* @kind font */
  --fw-semibold: 600; /* @kind font */
  --fw-bold:     700; /* @kind font */
  --fw-black:    800; /* @kind font */

  /* ---- Type scale (px, fluid-friendly) ---- */
  --fs-display:  5.25rem;   /* @kind font */
  --fs-h1:       3rem;      /* @kind font */
  --fs-h2:       2.25rem;   /* @kind font */
  --fs-h3:       1.625rem;  /* @kind font */
  --fs-h4:       1.25rem;   /* @kind font */
  --fs-lg:       1.125rem;  /* @kind font */
  --fs-base:     1rem;      /* @kind font */
  --fs-sm:       0.875rem;  /* @kind font */
  --fs-xs:       0.75rem;   /* @kind font */
  --fs-eyebrow:  0.8125rem; /* @kind font */

  /* ---- Line heights ---- */
  --lh-tight:   1.04; /* @kind font */
  --lh-snug:    1.18; /* @kind font */
  --lh-heading: 1.12; /* @kind font */
  --lh-body:    1.62; /* @kind font */
  --lh-relaxed: 1.75; /* @kind font */

  /* ---- Letter spacing ---- */
  --ls-tighter: -0.03em;   /* @kind font */
  --ls-tight:   -0.015em;  /* @kind font */
  --ls-normal:  0em;       /* @kind font */
  --ls-wide:    0.06em;    /* @kind font */
  --ls-eyebrow: 0.18em;    /* @kind font */
  --ls-caps:    0.08em;    /* @kind font */
}

/* ---- spacing.css ---- */
/* ============================================================
   Blusphere — Spacing, radii, borders, elevation, motion
   Spacing is a 4px base step. Corners are restrained (corporate,
   engineered) — the brand reads sharp, not pill-soft. Shadows
   are cool and quiet with a faint blue cast.
   ============================================================ */

:root {
  /* ---- Spacing (4px base) ---- */
  --space-0:   0;
  --space-1:   0.25rem;  /* 4 */
  --space-2:   0.5rem;   /* 8 */
  --space-3:   0.75rem;  /* 12 */
  --space-4:   1rem;     /* 16 */
  --space-5:   1.5rem;   /* 24 */
  --space-6:   2rem;     /* 32 */
  --space-7:   2.5rem;   /* 40 */
  --space-8:   3rem;     /* 48 */
  --space-9:   4rem;     /* 64 */
  --space-10:  5rem;     /* 80 */
  --space-12:  6rem;     /* 96 */
  --space-16:  8rem;     /* 128 */

  /* ---- Layout ---- */
  --container:      1200px;
  --container-wide: 1360px;
  --container-text: 720px;
  --gutter:         clamp(1.25rem, 4vw, 4rem); /* @kind spacing */

  /* ---- Radii (restrained) ---- */
  --radius-xs:  3px;
  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  16px;
  --radius-xl:  22px;
  --radius-pill: 999px;

  /* ---- Border widths ---- */
  --bw-hair:   1px;
  --bw-thick:  2px;
  --bw-accent: 3px;

  /* ---- Elevation (cool, quiet, slight blue cast) ---- */
  --shadow-xs: 0 1px 2px rgba(11,15,28,0.06);
  --shadow-sm: 0 1px 2px rgba(11,15,28,0.06), 0 2px 6px rgba(11,15,28,0.05);
  --shadow-md: 0 4px 10px rgba(11,15,28,0.07), 0 12px 28px rgba(11,15,28,0.06);
  --shadow-lg: 0 10px 24px rgba(11,15,28,0.09), 0 30px 60px rgba(11,15,28,0.10);
  --shadow-brand: 0 8px 22px rgba(0,48,255,0.22);
  --shadow-brand-sm: 0 4px 12px rgba(0,48,255,0.18);

  /* ---- Motion ---- */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --dur-fast:   120ms; /* @kind other */
  --dur-base:   200ms; /* @kind other */
  --dur-slow:   360ms; /* @kind other */
}

/* ---- base.css ---- */
/* ============================================================
   Blusphere — Base layer
   A light reset + the brand defaults (page wash, body font,
   selection color, focus ring, a few helper classes used by
   the UI kit and cards). Imported last so tokens exist.
   ============================================================ */

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

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

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--text-strong);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-tight);
  font-weight: var(--fw-bold);
  margin: 0 0 0.5em;
  text-wrap: balance;
}

p { margin: 0 0 1em; text-wrap: pretty; }

a { color: var(--text-link); text-decoration: none; }
a:hover { text-decoration: underline; }

::selection { background: var(--blu-500); color: #fff; }

:focus-visible {
  outline: 3px solid var(--ring);
  outline-offset: 2px;
}

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

/* ---- Eyebrow: tracked-out caps label (a brand signature) ---- */
.bs-eyebrow {
  font-family: var(--font-display);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--brand);
}

/* ---- Mono label (technical/data tag) ---- */
.bs-mono-label {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ---- Container helper ---- */
.bs-container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}