/* ==========================================================================
   David Bursey Counsel — Color & Type Foundations
   --------------------------------------------------------------------------
   A disciplined, editorial system: deep navy ink on near-white paper, set in
   an elegant serif (display) + clean grotesque (text). One restrained natural
   accent nods to the environmental/energy practice.

   Sampled from brand reference (About page). Fonts are Google Fonts
   SUBSTITUTIONS — see README "Visual Foundations / Type" — pending the real
   webfonts from the live site.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,300;0,6..72,400;0,6..72,500;1,6..72,400&family=Hanken+Grotesk:wght@400;500;600;700&display=swap');

:root {
  /* ---- Brand navy (from logo) — identity, buttons, mountain mark ------- */
  --navy-700: #1E3057;   /* pressed / deepest brand navy                    */
  --navy-600: #284070;   /* PRIMARY brand navy (logo) — buttons, marks      */
  --navy-500: #3C5388;   /* hover / lighter brand navy                      */
  --navy-100: #E1E5EE;   /* navy wash                                       */

  /* ---- Ink (deep desaturated navy) — type color on paper --------------- */
  --ink-900: #1E2C43;   /* primary — display & body headings, dark text     */
  --ink-700: #364257;   /* strong body text                                 */
  --ink-500: #5C6678;   /* secondary text, metadata                         */
  --ink-300: #98A0AD;   /* muted captions, disabled                         */
  --ink-200: #C4C9D1;   /* strong hairlines, icon strokes on paper          */
  --ink-100: #DEE1E6;   /* default borders / dividers                       */
  --ink-050: #EDEEF1;   /* subtle fills, hover wash                         */

  /* ---- Paper / surfaces ------------------------------------------------ */
  --paper:    #F8F8F8;  /* default page background (sampled)                */
  --surface:  #FFFFFF;  /* cards, raised surfaces, inputs                   */
  --paper-warm:#F3F2EE; /* alt warm section background                      */

  /* ---- Accent — forest green (from logo "LEGAL COUNSEL") --------------- */
  --accent-700: #3E5A46;  /* deep forest — on light                         */
  --accent-600: #507058;  /* PRIMARY accent (logo green)                     */
  --accent-500: #627E68;  /* lighter sage                                   */
  --accent-100: #E7ECE7;  /* accent wash / tag fills                        */

  /* ---- Functional (kept neutral & quiet for a legal brand) ------------- */
  --positive: #507058;
  --critical: #8C4A3F;    /* muted clay-red for errors                      */
  --focus:    #5C6678;    /* focus ring — tinted ink                        */

  /* ---- On-dark (navy section) text colors ----------------------------- */
  --on-dark-900: #F8F8F8;
  --on-dark-500: #B7BECB;
  --on-dark-300: #7E889B;
  --on-dark-line: rgba(248,248,248,0.16);

  /* ======================================================================
     TYPE — families
     ====================================================================== */
  --font-serif: 'Newsreader', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --font-sans:  'Hanken Grotesk', -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;

  /* Optical defaults */
  --tracking-display: -0.018em;  /* tighten large serif                     */
  --tracking-eyebrow: 0.14em;    /* uppercase labels                        */
  --leading-display: 1.05;
  --leading-body: 1.6;

  /* ======================================================================
     TYPE — semantic roles  (font-size / line-height / weight / spacing)
     Display sizes assume desktop; scale down ~0.8 on small screens.
     ====================================================================== */
  /* Display serif */
  --display-1: 300 clamp(56px, 7vw, 104px)/1.02 var(--font-serif);
  --display-2: 300 clamp(40px, 5vw, 68px)/1.06 var(--font-serif);
  --h1:        400 clamp(34px, 3.4vw, 48px)/1.12 var(--font-serif);
  --h2:        400 clamp(26px, 2.4vw, 34px)/1.18 var(--font-serif);
  --h3:        500 21px/1.3 var(--font-serif);

  /* Sans text */
  --lede:      400 clamp(19px, 1.5vw, 22px)/1.55 var(--font-sans);
  --body:      400 17px/1.6 var(--font-sans);
  --body-sm:   400 15px/1.55 var(--font-sans);
  --caption:   500 13px/1.4 var(--font-sans);
  --eyebrow:   600 13px/1.2 var(--font-sans);   /* + uppercase + tracking   */
  --button:    500 15px/1 var(--font-sans);
}

/* ==========================================================================
   Base element defaults — opt in by scoping to .db or applying to body
   ========================================================================== */
.db-type {
  color: var(--ink-900);
  font: var(--body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.db-type h1 { font: var(--h1); letter-spacing: var(--tracking-display); margin: 0; }
.db-type h2 { font: var(--h2); letter-spacing: -0.01em; margin: 0; }
.db-type h3 { font: var(--h3); margin: 0; }
.db-type p  { font: var(--body); color: var(--ink-700); margin: 0 0 1em; max-width: 64ch; text-wrap: pretty; }
.db-type .lede { font: var(--lede); color: var(--ink-700); }
.db-type .eyebrow {
  font: var(--eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--accent-600);
}
.db-type a { color: var(--ink-900); text-underline-offset: 3px; text-decoration-thickness: 1px; }
.db-type a:hover { color: var(--accent-600); }