/* ============================================================
   BlueRock Digital — Colors & Type
   Editorial consulting aesthetic. Serif headlines + sans body.
   ============================================================ */

/* ---------- Web fonts ---------------------------------------- */

@font-face {
  font-family: "Noto Sans";
  src: url("fonts/NotoSans-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Noto Sans";
  src: url("fonts/NotoSans-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Noto Sans";
  src: url("fonts/NotoSans-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Noto Sans";
  src: url("fonts/NotoSans-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Noto Sans";
  src: url("fonts/NotoSans-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Noto Serif Condensed";
  src: url("fonts/NotoSerifCondensed-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Noto Serif Condensed";
  src: url("fonts/NotoSerifCondensed-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Noto Serif Condensed";
  src: url("fonts/NotoSerifCondensed-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Noto Serif Condensed";
  src: url("fonts/NotoSerifCondensed-MediumItalic.ttf") format("truetype");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Noto Serif Condensed";
  src: url("fonts/NotoSerifCondensed-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Noto Serif Condensed";
  src: url("fonts/NotoSerifCondensed-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Noto Serif Condensed";
  src: url("fonts/NotoSerifCondensed-BoldItalic.ttf") format("truetype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Noto Serif Condensed";
  src: url("fonts/NotoSerifCondensed-Black.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- Design tokens ----------------------------------- */

:root {
  /* ----- Brand colors ----- */
  --br-primary:        #4269FF;  /* Primary Blue — links, primary CTA, emphasis */
  --br-primary-hover:  #3457E6;  /* Slightly darker for hover */
  --br-primary-press:  #2A48C7;  /* Pressed / active */

  --br-marketing:      #6E5BFF;  /* Marketing service line — purple */
  --br-systems:        #D9EC48;  /* Systems service line — lime */
  --br-advisory:       #4269FF;  /* Shared / Advisory = primary blue */

  /* ----- Soft tints (use as backgrounds, never as text fg) ----- */
  --br-tint-blue:      #EEF2FF;
  --br-tint-purple:    #F1EEFF;
  --br-tint-lime:      #F4FBD6;

  /* ----- Neutrals ----- */
  --br-bg:             #F7F7F2;  /* Page background — warm off-white */
  --br-bg-warm:        #ECEDE7;  /* Slightly deeper neutral */
  --br-surface:        #FFFFFF;  /* Card / surface */
  --br-surface-alt:    #FBFBF8;  /* Subtle alt surface */

  --br-border:         #DADCD3;  /* Default border / divider */
  --br-border-strong:  #C7C9C0;
  --br-border-soft:    #E8E9E2;

  /* ----- Text ----- */
  --br-fg:             #111111;  /* Primary text */
  --br-fg-muted:       #5F625A;  /* Secondary / muted text */
  --br-fg-subtle:      #8A8D84;  /* Captions, eyebrow defaults */
  --br-fg-inverse:     #FFFFFF;

  /* Semantic aliases */
  --fg1: var(--br-fg);
  --fg2: var(--br-fg-muted);
  --fg3: var(--br-fg-subtle);
  --bg1: var(--br-bg);
  --bg2: var(--br-bg-warm);
  --surface: var(--br-surface);
  --border: var(--br-border);

  /* ----- Type families ----- */
  --font-serif: "Noto Serif Condensed", "Noto Serif", "Source Serif Pro", Georgia, serif;
  --font-sans:  "Noto Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono:  ui-monospace, "SFMono-Regular", Menlo, Monaco, Consolas, monospace;

  /* ----- Type scale ----- */
  /* Display / hero — large editorial serif */
  --fz-display-xl: clamp(48px, 7.2vw, 96px);
  --fz-display-lg: clamp(40px, 5.6vw, 72px);
  --fz-display-md: clamp(36px, 4.6vw, 56px);

  --fz-h1: clamp(40px, 5vw, 64px);
  --fz-h2: clamp(32px, 3.6vw, 48px);
  --fz-h3: 28px;
  --fz-h4: 22px;
  --fz-h5: 18px;

  --fz-body-lg: 19px;
  --fz-body:    16px;
  --fz-body-sm: 14px;
  --fz-caption: 13px;
  --fz-eyebrow: 12px;

  /* Line heights */
  --lh-display: 0.95;
  --lh-heading: 1.05;
  --lh-snug:    1.25;
  --lh-body:    1.55;
  --lh-loose:   1.7;

  /* Letter spacing */
  --ls-display: -0.02em;
  --ls-heading: -0.01em;
  --ls-eyebrow: 0.14em;
  --ls-body:    0;

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

  /* Section padding presets */
  --section-y-desktop: 112px;
  --section-y-tablet:  80px;
  --section-y-mobile:  60px;

  /* Container */
  --container-max: 1240px;
  --container-px:  24px;

  /* ----- Radii ----- */
  --r-sm:   6px;
  --r-md:   10px;
  --r-lg:   14px;
  --r-xl:   20px;
  --r-2xl:  28px;
  --r-pill: 999px;

  /* ----- Shadows ----- */
  --shadow-xs: 0 1px 2px rgba(17,17,17,0.04);
  --shadow-sm: 0 2px 6px rgba(17,17,17,0.05), 0 1px 2px rgba(17,17,17,0.03);
  --shadow-md: 0 10px 24px -12px rgba(17,17,17,0.10), 0 2px 6px rgba(17,17,17,0.04);
  --shadow-lg: 0 24px 56px -24px rgba(17,17,17,0.18), 0 6px 12px rgba(17,17,17,0.05);
  --shadow-focus: 0 0 0 3px rgba(66,105,255,0.25);

  /* ----- Motion ----- */
  --ease-standard: cubic-bezier(0.2, 0.6, 0.2, 1);
  --ease-emphasis: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 360ms;
}

/* ---------- Element defaults --------------------------------- */

html, body {
  background: var(--br-bg);
  color: var(--br-fg);
  font-family: var(--font-sans);
  font-size: var(--fz-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-serif);
  font-weight: 500;
  color: var(--br-fg);
  letter-spacing: var(--ls-heading);
  text-wrap: balance;
  margin: 0;
}
h1 { font-size: var(--fz-h1); line-height: var(--lh-heading); letter-spacing: var(--ls-display); }
h2 { font-size: var(--fz-h2); line-height: var(--lh-heading); letter-spacing: var(--ls-display); }
h3 { font-size: var(--fz-h3); line-height: var(--lh-snug); }
h4 { font-size: var(--fz-h4); line-height: var(--lh-snug); font-weight: 600; }
h5 { font-size: var(--fz-h5); line-height: var(--lh-snug); font-weight: 600; }

p {
  margin: 0;
  color: var(--br-fg-muted);
  font-size: var(--fz-body);
  line-height: var(--lh-body);
  text-wrap: pretty;
}

a {
  color: var(--br-primary);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-standard);
}
a:hover { text-decoration: underline; }

/* Utility classes you can lean on */

.br-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fz-eyebrow);
  font-weight: 600;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--br-fg-muted);
}

.br-serif    { font-family: var(--font-serif); }
.br-sans     { font-family: var(--font-sans); }
.br-italic   { font-style: italic; }
.br-accent   { color: var(--br-primary); }
.br-marketing-fg { color: var(--br-marketing); }
.br-systems-fg   { color: #6F8C18; } /* readable systems-line color on light bg */

.br-container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding-left: var(--container-px);
  padding-right: var(--container-px);
}