/* =========================================================
   BRAND STYLESHEET · VoC Marketing
   ---------------------------------------------------------
   Every font, color and brand detail lives in this file.
   To rebrand the site, replace or edit this file only.
   site.css handles layout and pulls every brand color and font from here.
   Colors and fonts match vocmarketing.co as of October 2026.
   ========================================================= */

/* Fonts: hosted on this site in /fonts (faster than loading from Google).
   To change fonts, put the new .woff2 files in /fonts and update the
   @font-face rules below plus --font-heading and --font-body. */
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/fraunces.woff2") format("woff2");
}
@font-face {
  font-family: "Fraunces";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/fraunces-italic.woff2") format("woff2");
}
@font-face { font-family: "Nobile"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/nobile-400.woff2") format("woff2"); }
@font-face { font-family: "Nobile"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/nobile-500.woff2") format("woff2"); }
@font-face { font-family: "Nobile"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/nobile-700.woff2") format("woff2"); }
@font-face { font-family: "Nobile"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/nobile-400-italic.woff2") format("woff2"); }

:root {
  /* ---- Typography ---- */
  --font-heading: "Fraunces", Georgia, serif;
  --font-body: "Nobile", "Helvetica Neue", Arial, sans-serif;

  --weight-heading: 700;
  --weight-body: 400;
  --weight-strong: 700;

  /* Type sizes (fluid between phone and desktop) */
  --size-hero: clamp(30px, 4.6vw, 44px);
  --size-h2: clamp(26px, 3.4vw, 34px);
  --size-h3: clamp(22px, 2.6vw, 28px);
  --size-quote: clamp(24px, 3vw, 32px);
  --size-body: 18px;
  --size-small: 16px;
  --size-eyebrow: 13px;

  /* ---- Colors ---- */
  --color-bg: #FAF7F2;            /* warm cream page background */
  --color-surface: #FFFFFF;       /* white sections and cards */
  --color-surface-muted: #EEEAE3; /* soft card (featured quote) */
  --color-text: #2D2D48;          /* body text, deep ink */
  --color-text-soft: #5B5E5E;     /* footer and fine print */
  --color-heading: #B9453B;       /* brick red headlines */
  --color-accent: #B0413A;        /* highlighted words in quotes (a touch darker than headlines so small text passes contrast) */
  --color-primary: #1D3557;       /* navy buttons and subheads */
  --color-logo: #1D3557;          /* "VoC Marketing" text logo */
  --color-primary-hover: #142640;
  --color-on-primary: #FFFFFF;
  --color-eyebrow: #73654B;       /* small gold-taupe labels (darkened from #918162 to pass 4.5:1 contrast) */
  --color-client: #5E7189;        /* client name list */
  --color-step: #DCEAEC;          /* process chevrons */
  --color-border: #2D2D48;        /* thin card outlines */
  --color-border-soft: rgba(45, 45, 72, 0.2); /* FAQ dividers */
  --color-focus: #1D3557;         /* keyboard focus ring (navy, clearly visible on cream and white) */
  --color-error: #B3261E;
  --color-overlay: rgba(29, 53, 87, 0.65); /* popup backdrop */

  /* ---- Shapes ---- */
  --radius-button: 3px;
  --radius-card: 0px;
  --radius-popup: 14px;
  --radius-input: 6px;
  --border-width: 1px;
  --shadow-button: inset 0 -3px 0 rgba(0, 0, 0, 0.25);
  --shadow-popup: 0 30px 80px rgba(20, 26, 40, 0.35);

  /* ---- Layout ---- */
  --width-content: 1080px;
  --width-narrow: 720px;
}