/* ==========================================================================
   SB Law Group, PLLC — Design Tokens
   Single source of truth for color, type, spacing. Change a value here and
   it updates everywhere it's used across the site.

   Every color pair actually used on the site (text/background, borders on
   interactive controls, focus rings) has been checked against WCAG 2.1 —
   4.5:1 for normal text, 3:1 for large text and UI component boundaries.
   Keep that in mind before changing a value here.
   ========================================================================== */

:root {
  /* ---- Color: brand ---- */
  --color-primary: #041627; /* trust navy — headlines, buttons, nav */
  --color-primary-hover: #2d3748; /* charcoal-slate — hover state for navy buttons */

  /* Lighter navy tint, same hue family as --color-primary. Pair it with a
     dark pattern image under background-blend-mode: darken — --color-primary
     is darker than most pattern art, so darken just picks the solid color
     everywhere and the pattern disappears. This tint sits above the
     pattern's darkest tones so the art stays visible, and above its
     lightest fill so the tint still reads as the field color. */
  --color-navy-tint: #15304a;

  /* Single-hue accent system — no secondary accent color. Emphasis comes
     from --color-primary (navy) itself; --color-accent-dim is a faint navy
     wash for tinted backgrounds (icon chips, callout boxes) where solid
     navy would be too heavy. */
  --color-accent-dim: rgba(4, 22, 39, 0.06);

  /* ---- Photo overlay ----
     The navy wash used over any background photo (nurture section, practice
     cards, anywhere else a photo needs legible text on top). --overlay-photo
     is the resting state; --overlay-photo-strong is the same treatment
     pushed darker, for hover/focus. Apply as the first layer of a
     background-image list: background-image: var(--overlay-photo), url(...); */
  --overlay-photo: linear-gradient(
    125deg,
    rgba(4, 22, 39, 0.94) 0%,
    rgba(4, 22, 39, 0.86) 45%,
    rgba(4, 22, 39, 0.85) 100%
  );
  --overlay-photo-strong: linear-gradient(
    125deg,
    rgba(4, 22, 39, 0.97) 0%,
    rgba(4, 22, 39, 0.97) 45%,
    rgba(4, 22, 39, 0.9) 100%
  );

  /* ---- Color: neutrals (cool off-white + dark charcoal) ---- */
  --color-background: #f5f6f7; /* cool off-white page ground */
  --color-paper: #f8f9fa; /* card surface, slightly off background */
  --color-surface: #ffffff; /* pure white surface */
  --color-surface-container: #eceeef;
  --color-surface-container-low: #eeeeee;
  --color-surface-container-high: #e3e5e7;

  --color-on-surface: #23262b; /* dark charcoal — primary body text */
  --color-on-surface-variant: #4a4e55; /* muted charcoal — secondary text */
  --color-outline: #75787d; /* interactive-control borders (3:1+) */
  --color-outline-variant: #c7c9cc; /* decorative hairlines only */
  --color-error: #ba1a1a;

  /* ---- Font families ---- */
  --font-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-sans: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, Helvetica, Arial, sans-serif;

  /* ---- Fluid type scale ----
     clamp(min, preferred, max), fluid between a 360px and 1280px viewport.
     Use --text-* for UI/body text, --text-h1..h6 for headings. Every size
     on the site should trace back to one of these — add a step here rather
     than a one-off rem value in a component. Minimum is 12px (--text-xs);
     nothing on the site should go smaller than that. */
  --text-xs: clamp(0.75rem, 0.7255rem + 0.11vw, 0.8125rem); /* 12 -> 13px */
  --text-sm: clamp(0.9125rem, 0.888rem + 0.11vw, 0.975rem); /* 13 -> 14px */
  --text-base: clamp(1rem, 0.9755rem + 0.11vw, 1.0625rem); /* 16 -> 17px */
  --text-lg: clamp(1.0625rem, 1.038rem + 0.11vw, 1.125rem); /* 17 -> 18px */
  --text-xl: clamp(1.125rem, 1.0761rem + 0.22vw, 1.25rem); /* 18 -> 20px */

  --text-h6: clamp(0.9375rem, 0.913rem + 0.11vw, 1rem); /* 15 -> 16px */
  --text-h5: clamp(1.0625rem, 1.038rem + 0.11vw, 1.125rem); /* 17 -> 18px */
  --text-h4: clamp(1.1875rem, 1.163rem + 0.11vw, 1.25rem); /* 19 -> 20px */
  --text-h3: clamp(1.375rem, 1.3261rem + 0.22vw, 1.5rem); /* 22 -> 24px */
  --text-h2: clamp(1.75rem, 1.6522rem + 0.43vw, 2rem); /* 28 -> 32px */
  --text-h1: clamp(2.25rem, 1.9565rem + 1.3vw, 3rem); /* 36 -> 48px */

  /* ---- Layout ---- */
  --container-max: 75rem; /* 1200px */
  --gutter: 2rem; /* 32px */
  --margin-mobile: 1.25rem; /* 20px */
  --section-padding: 3.5rem; /* mobile */
  --radius-sm: 2px;
}

@media (min-width: 900px) {
  :root {
    --section-padding: 7.5rem; /* 120px, desktop */
  }
}