/* ============================================================
   Bricks and Bytes — Colors & Type Foundation
   Import this once at the top of any document:
     <link rel="stylesheet" href="colors_and_type.css">
   ============================================================ */

/* Self-hosted Geist & Geist Mono (served locally, no third-party requests 
   to Google Fonts — keeps visitor IPs off Google for GDPR). */
/* cyrillic-ext */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(assets/fonts/gyByhwUxId8gMEwRGFWNOITddY4.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(assets/fonts/gyByhwUxId8gMEwYGFWNOITddY4.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(assets/fonts/gyByhwUxId8gMEwTGFWNOITddY4.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(assets/fonts/gyByhwUxId8gMEwSGFWNOITddY4.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(assets/fonts/gyByhwUxId8gMEwcGFWNOITd.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/or3nQ6H-1_WfwkMZI_qYFrodmhHkjkotbA.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/or3nQ6H-1_WfwkMZI_qYFrMdmhHkjkotbA.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* symbols2 */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/or3nQ6H-1_WfwkMZI_qYFg08vz7MhEIVVeA.woff2) format('woff2');
  unicode-range: U+2000-2001, U+2004-2008, U+200A, U+23B8-23BD, U+2500-259F;
}
/* vietnamese */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/or3nQ6H-1_WfwkMZI_qYFrgdmhHkjkotbA.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/or3nQ6H-1_WfwkMZI_qYFrkdmhHkjkotbA.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/or3nQ6H-1_WfwkMZI_qYFrcdmhHkjko.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/or3nQ6H-1_WfwkMZI_qYFrodmhHkjkotbA.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/or3nQ6H-1_WfwkMZI_qYFrMdmhHkjkotbA.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* symbols2 */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/or3nQ6H-1_WfwkMZI_qYFg08vz7MhEIVVeA.woff2) format('woff2');
  unicode-range: U+2000-2001, U+2004-2008, U+200A, U+23B8-23BD, U+2500-259F;
}
/* vietnamese */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/or3nQ6H-1_WfwkMZI_qYFrgdmhHkjkotbA.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/or3nQ6H-1_WfwkMZI_qYFrkdmhHkjkotbA.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/or3nQ6H-1_WfwkMZI_qYFrcdmhHkjko.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* ---- Brand core (from brand spec) ---- */
  --navy:        #14254F;  /* primary brand navy            */
  --bg:          #FAF9F5;  /* warm off-white page canvas    */
  --ink:         #0B0F1F;  /* near-black text, strongest     */
  --line:        #E5E3DC;  /* warm hairline border           */

  /* ---- Navy scale (cool, structural) ---- */
  --navy-950: #0A1330;
  --navy-900: #14254F;   /* = --navy */
  --navy-800: #1D3468;
  --navy-700: #284684;
  --navy-600: #35599F;
  --navy-500: #4A6CBE;   /* interactive / links            */
  --navy-300: #97A9D2;
  --navy-100: #E4E9F3;   /* navy tint surface              */
  --navy-50:  #F1F3F9;

  /* ---- Warm neutral scale (paper, lines, muted text) ---- */
  --paper:       #FFFFFF;  /* raised surface / cards         */
  --paper-sunk:  #F4F2EC;  /* recessed wells, table zebra    */
  --line-strong: #D7D3C7;  /* heavier divider / input border */
  --fg1:         #0B0F1F;  /* = --ink, primary text          */
  --fg2:         #3C3F4A;  /* secondary text                 */
  --fg3:         #6E7079;  /* tertiary / captions            */
  --fg4:         #9A9B9F;  /* disabled / faint               */

  /* ---- Status (the status-dot system) ---- */
  --ok:        #1E8A5A;   --ok-bg:   #E7F2EA;   /* operational  */
  --warn:      #C0871F;   --warn-bg: #F6EEDB;   /* degraded     */
  --crit:      #BE3A33;   --crit-bg: #F7E6E3;   /* down / error */
  --info:      #4A6CBE;   --info-bg: #E9EDF7;   /* informational*/
  --idle:      #9A9B9F;   --idle-bg: #EEEDE7;   /* unknown/off  */

  /* ---- Radii ---- */
  --r-xs: 3px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-pill: 999px;

  /* ---- Elevation (cool-tinted, restrained) ---- */
  --shadow-sm: 0 1px 2px rgba(11,15,31,.06);
  --shadow-md: 0 2px 6px rgba(11,15,31,.07), 0 1px 2px rgba(11,15,31,.05);
  --shadow-lg: 0 12px 32px -8px rgba(11,15,31,.18), 0 2px 6px rgba(11,15,31,.06);
  --ring: 0 0 0 3px rgba(74,108,190,.28);   /* focus ring (navy-500) */

  /* ---- Spacing (4px base) ---- */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;

  /* ---- Type families ---- */
  --sans: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ---- Type scale (semantic) ---- */
  --display:   600 44px/1.04 var(--sans);  /* hero numerals/titles */
  --h1:        600 32px/1.10 var(--sans);
  --h2:        600 24px/1.16 var(--sans);
  --h3:        600 19px/1.24 var(--sans);
  --body-lg:   400 17px/1.55 var(--sans);
  --body:      400 15px/1.55 var(--sans);
  --body-sm:   400 13px/1.5  var(--sans);
  --label:     500 13px/1.2  var(--sans);
  --code:      450 13px/1.5  var(--mono);
  --caption:   500 11px/1.3  var(--mono);   /* mono captions motif */
}

/* ============================================================
   Base element styling — opt-in via .bb-prose or use vars
   ============================================================ */
.bb-type h1 { font: var(--h1); letter-spacing: -.02em; color: var(--ink); margin: 0; }
.bb-type h2 { font: var(--h2); letter-spacing: -.015em; color: var(--ink); margin: 0; }
.bb-type h3 { font: var(--h3); letter-spacing: -.01em; color: var(--ink); margin: 0; }
.bb-type p  { font: var(--body); color: var(--fg2); margin: 0; }

/* Mono caption motif: uppercase, tracked, fg3 */
.bb-caption {
  font: var(--caption);
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--fg3);
}

/* Status dot motif */
.bb-dot { display:inline-block; width:8px; height:8px; border-radius:var(--r-pill); flex:none; }
.bb-dot--ok   { background: var(--ok);   box-shadow: 0 0 0 3px var(--ok-bg); }
.bb-dot--warn { background: var(--warn); box-shadow: 0 0 0 3px var(--warn-bg); }
.bb-dot--crit { background: var(--crit); box-shadow: 0 0 0 3px var(--crit-bg); }
.bb-dot--idle { background: var(--idle); box-shadow: 0 0 0 3px var(--idle-bg); }
.bb-dot--info { background: var(--info); box-shadow: 0 0 0 3px var(--info-bg); }

.bb-dot--pulse.bb-dot--ok { animation: bb-pulse 2.4s ease-out infinite; }
@keyframes bb-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(30,138,90,.45); }
  70%  { box-shadow: 0 0 0 7px rgba(30,138,90,0); }
  100% { box-shadow: 0 0 0 0 rgba(30,138,90,0); }
}