/* ==========================================================================
   01-tokens.css — design tokens extracted from the live Duda build
   Source of truth: computed styles on https://www.amyowenlaw.com/ @1920px
   ========================================================================== */

/* --------------------------------------------------------------------------
   Self-hosted fonts (latin subset)
   ABeeZee ships regular only — 700 is synthesised by the browser, exactly as
   it is on the live site. Do NOT substitute a real bold here.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'ABeeZee';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/abeezee-400.woff2') format('woff2');
}

@font-face {
  font-family: 'ABeeZee';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/abeezee-400-italic.woff2') format('woff2');
}

@font-face {
  font-family: 'Crimson Text';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/crimson-text-400.woff2') format('woff2');
}

@font-face {
  font-family: 'Crimson Text';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/crimson-text-600.woff2') format('woff2');
}

@font-face {
  font-family: 'Crimson Text';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/crimson-text-700.woff2') format('woff2');
}

@font-face {
  font-family: 'Crimson Text';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/crimson-text-400-italic.woff2') format('woff2');
}

@font-face {
  font-family: 'Crimson Text';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/crimson-text-600-italic.woff2') format('woff2');
}

@font-face {
  font-family: 'Crimson Text';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/crimson-text-700-italic.woff2') format('woff2');
}

/* Merienda and Merriweather ship as variable fonts — one file per style */
@font-face {
  font-family: 'Merriweather';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url('../fonts/merriweather-var.woff2') format('woff2');
}

@font-face {
  font-family: 'Merriweather';
  font-style: italic;
  font-weight: 300 900;
  font-display: swap;
  src: url('../fonts/merriweather-var-italic.woff2') format('woff2');
}

/* Merienda ships as a variable font — one file covers 300-900 */
@font-face {
  font-family: 'Merienda';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url('../fonts/merienda-var.woff2') format('woff2');
}

@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/source-sans-pro-400.woff2') format('woff2');
}

@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/source-sans-pro-700.woff2') format('woff2');
}

@font-face {
  font-family: 'Source Sans Pro';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/source-sans-pro-400-italic.woff2') format('woff2');
}

@font-face {
  font-family: 'Source Sans Pro';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/source-sans-pro-700-italic.woff2') format('woff2');
}

:root {
  /* ---- Colour ---------------------------------------------------------- */
  --c-black: #000000;          /* page + header background                  */
  --c-panel: #1b1d1f;          /* attorney / civil-rights section panels     */
  --c-panel-alt: #191919;
  --c-panel-alt2: #262626;
  --c-gold: #ffd700;           /* headings, rules, accents                   */
  --c-white: #ffffff;
  --c-body: #c6c6c6;           /* body copy on dark                          */
  --c-muted: #f7f7f7;
  --c-pink: #ff2a70;           /* rare accent carried over from the theme    */
  --c-overlay: rgba(0, 0, 0, 0.25);

  /* ---- Type families --------------------------------------------------- */
  --f-display: 'Crimson Text', 'Times New Roman', Times, serif;   /* home headings  */
  --f-ui: 'ABeeZee', 'Segoe UI', Arial, Helvetica, sans-serif;    /* body + nav     */
  --f-quote: 'Source Sans Pro', 'Segoe UI', Arial, Helvetica, sans-serif;
  --f-title: 'Merienda', 'Crimson Text', Georgia, serif;          /* inner-page headings */
  --f-bio: 'Merriweather', Georgia, 'Times New Roman', serif;     /* team bios          */

  /* ---- Type scale (desktop) -------------------------------------------- */
  --fs-hero: 60px;             /* h1  Crimson 700, line-height 90px          */
  --fs-hero-sub: 24px;         /* h4  Crimson 400 italic                     */
  --fs-h2: 36px;               /* section headings, gold                     */
  --fs-h2-sm: 30px;            /* "About the Firm" / eyebrow headings        */
  --fs-body: 16px;             /* ABeeZee body copy                          */
  --fs-nav: 15px;
  --fs-meta: 16px;
  --fs-quote: 18px;            /* Source Sans Pro italic                     */
  --fs-quote-name: 20px;

  --lh-hero: 90px;
  --lh-heading: 1.6;   /* live: 30px→48px box, 36px→58px box */
  --lh-body: 1.5;   /* live: 16px body -> 24px */

  --ls-nav: 0.45px;

  /* ---- Layout ---------------------------------------------------------- */
  --container: 1200px;         /* Duda `rows-1200`                           */
  --gutter: 15px;
  --section-pad-y: 75px;
  --section-pad-x: 40px;

  /* ---- Components ------------------------------------------------------ */
  --btn-w: 220px;
  --btn-h: 55px;
  --btn-border: 2px solid var(--c-white);
  --btn-radius: 1px;

  --header-h: 253px;           /* logo bar height @ desktop                  */
  --navbar-h: 48px;
}

/* Mobile type scale — mirrors Duda's m-font-size-* overrides */
/* Mobile scale — measured on the live mobile document at 390px */
@media (max-width: 767px) {
  :root {
    --fs-hero: 32px;
    --fs-hero-sub: 18px;
    --fs-h2: 24px;
    --fs-h2-sm: 21px;
    --lh-hero: 48px;
    --section-pad-y: 45px;
    --section-pad-x: 20px;
    --btn-w: 190px;
    --btn-h: 39px;
  }
}