/* ============================================================
   BETHEL CONSTRUCTION SERVICES — Colors & Type Foundation
   Premium residential remodeling, Tampa FL.
   Cool, crisp, coastal palette anchored by the logo navy + black.
   ============================================================ */

/* ---- Web fonts (Google Fonts — see note in README) ---- */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700;800;900&family=Mulish:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

:root {
  /* ---------------------------------------------------------
     BRAND COLOR — Navy (from the logo wordmark #233B72)
     --------------------------------------------------------- */
  --navy-950: #0F1D3A;
  --navy-900: #16284D;
  --navy-800: #1B3160;
  --navy-700: #1F3463;
  --navy-600: #233B72;   /* brand primary */
  --navy-500: #33508F;
  --navy-400: #5E78AE;
  --navy-300: #93A7CC;
  --navy-200: #C6D2E6;
  --navy-100: #DCE4F2;
  --navy-50:  #EEF2FA;

  /* ---------------------------------------------------------
     ACCENT — Blueprint / Gulf blue (links, highlights)
     Drawn from the bright Florida sky + pool imagery.
     --------------------------------------------------------- */
  --accent-700: #1C5BB0;
  --accent-600: #2E6FD6;   /* accent primary */
  --accent-500: #4A86E8;
  --accent-100: #DCEAFB;
  --accent-50:  #EFF5FE;

  /* ---------------------------------------------------------
     NEUTRALS — Cool gray (stucco, marble, tile-roof grays)
     --------------------------------------------------------- */
  --ink:       #14171C;   /* near-black, headings */
  --slate-800: #20242B;
  --slate-700: #3A414D;
  --slate-600: #525B68;
  --slate-500: #6B7480;
  --slate-400: #939BA6;
  --slate-300: #C3C9D1;
  --slate-200: #E1E5EA;
  --slate-100: #F0F2F5;
  --canvas:    #F7F8FA;   /* page background */
  --paper:     #FFFFFF;

  /* ---------------------------------------------------------
     SEMANTIC
     --------------------------------------------------------- */
  --success: #1F8A5B;
  --success-bg: #E6F4EE;
  --warning: #C98A1E;
  --warning-bg: #FBF1DC;
  --danger:  #C2403B;
  --danger-bg: #FBE9E8;

  /* ---------------------------------------------------------
     SEMANTIC ROLES
     --------------------------------------------------------- */
  --fg1: var(--ink);         /* primary text */
  --fg2: var(--slate-600);   /* secondary text */
  --fg3: var(--slate-500);   /* tertiary / captions */
  --fg-inverse: #FFFFFF;
  --bg1: var(--paper);
  --bg2: var(--canvas);
  --bg3: var(--slate-100);
  --border: var(--slate-200);
  --border-strong: var(--slate-300);
  --brand: var(--navy-600);
  --brand-hover: var(--navy-700);
  --link: var(--accent-600);

  /* ---------------------------------------------------------
     TYPE FAMILIES
     Archivo  — architectural grotesque, headlines & eyebrows
     Mulish   — humanist sans, body & UI
     --------------------------------------------------------- */
  --font-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Mulish', 'Helvetica Neue', Arial, sans-serif;

  /* ---------------------------------------------------------
     TYPE SCALE  (1.250 major-third, 16px base)
     --------------------------------------------------------- */
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-md:   18px;
  --text-lg:   20px;
  --text-xl:   25px;
  --text-2xl:  31px;
  --text-3xl:  39px;
  --text-4xl:  49px;
  --text-5xl:  61px;
  --text-6xl:  76px;

  --leading-tight: 1.08;
  --leading-snug: 1.25;
  --leading-normal: 1.55;

  /* tracking */
  --tracking-eyebrow: 0.16em;
  --tracking-tight: 0;

  /* ---------------------------------------------------------
     RADII / SHADOW / SPACING
     --------------------------------------------------------- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-xl: 22px;
  --radius-pill: 999px;

  --shadow-xs: 0 1px 2px rgba(20,23,28,.06);
  --shadow-sm: 0 2px 6px rgba(20,23,28,.08);
  --shadow-md: 0 10px 24px -8px rgba(20,23,28,.16);
  --shadow-lg: 0 24px 56px -16px rgba(15,29,58,.28);

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
}

/* ============================================================
   SEMANTIC ELEMENT STYLES
   ============================================================ */
.bcs-type { color: var(--fg1); font-family: var(--font-body); }

.bcs-eyebrow {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--accent-600);
}

.bcs-h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-5xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg1);
  text-wrap: balance;
}
.bcs-h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-3xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg1);
  text-wrap: balance;
}
.bcs-h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  color: var(--fg1);
}
.bcs-h4 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-md);
  line-height: var(--leading-snug);
  color: var(--fg1);
}
.bcs-lead {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-lg);
  line-height: var(--leading-normal);
  color: var(--fg2);
}
.bcs-body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--fg2);
}
.bcs-small {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--fg3);
}
.bcs-caption {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg3);
}