/* Site-wide color tokens — Zoom-inspired palette
 *
 * Homepage bands (top → bottom):
 *   Hero     → dark overlay (--color-overlay-hero-*)
 *   Practice → --color-bg (white)
 *   About    → --color-surface (grey; only alternate band)
 *   Footer   → --color-bg (white)
 *
 * Assignment (not the hex values) drives perceived quality:
 *   --color-bg (white)     → page canvas, practice areas, footer, articles
 *   --color-surface (grey) → one alternate band only (About), lifted cards on white
 *   --color-dark           → hero overlay (no blue glow on wordmarks)
 *   --color-brand          → primary CTAs, links, nav hover/active only
 *   --color-ink            → wordmarks, headings, body text on light
 */
:root {
  --color-ink: #131619;
  --color-ink-soft: #6e7680;
  --color-prose: #2d333a;

  --color-surface: #f6f7f9;
  --color-surface-deep: #eceef2;
  --color-bg: #ffffff;

  --color-brand: #0b5cff;
  --color-brand-deep: #0949d4;
  --color-brand-darker: #0739a8;

  --color-dark: #131619;
  --color-dark-elevated: #1f1f1f;
  --color-on-dark: #ffffff;
  --color-on-dark-muted: rgba(255, 255, 255, 0.72);
  --color-on-dark-soft: rgba(255, 255, 255, 0.88);

  --color-footer: #131619;
  --color-on-brand: #ffffff;
  --color-on-brand-muted: rgba(255, 255, 255, 0.55);
  --color-on-brand-soft: rgba(255, 255, 255, 0.72);
  --color-on-brand-strong: rgba(255, 255, 255, 0.9);
  --color-on-footer-muted: rgba(255, 255, 255, 0.8);

  --color-header-bg: rgba(255, 255, 255, 0.96);
  --color-logo-title: #4a4f57;

  --color-border-neutral: rgba(19, 22, 25, 0.08);
  --color-border-neutral-soft: rgba(19, 22, 25, 0.06);
  --color-border-input: rgba(19, 22, 25, 0.2);
  --color-border-brand: rgba(19, 22, 25, 0.08);
  --color-border-brand-mid: rgba(19, 22, 25, 0.1);
  --color-border-brand-nav: rgba(19, 22, 25, 0.12);
  --color-border-brand-strong: rgba(19, 22, 25, 0.14);
  --color-border-brand-accent: rgba(11, 92, 255, 0.28);
  --color-border-brand-hover: rgba(11, 92, 255, 0.4);
  --color-border-brand-footer: rgba(255, 255, 255, 0.14);

  --card-bg: var(--color-bg);
  --card-border: 0.0625rem solid var(--color-border-neutral-soft);
  --card-radius: 0.5rem;
  --card-hover-border-color: var(--color-border-brand-hover);
  --card-hover-shadow: 0 0.5rem 1.5rem rgba(11, 92, 255, 0.16);

  --color-overlay-hero-start: rgba(19, 22, 25, 0.55);
  --color-overlay-hero-end: rgba(19, 22, 25, 0.82);
  --color-overlay-banner-start: rgba(19, 22, 25, 0.88);
  --color-overlay-banner-end: rgba(31, 31, 31, 0.94);
  --color-overlay-articles-start: rgba(9, 73, 212, 0.9);
  --color-overlay-articles-end: rgba(7, 57, 168, 0.95);
  --color-overlay-modal: rgba(19, 22, 25, 0.72);

  --color-shadow-brand: rgba(11, 92, 255, 0.22);
  --color-shadow-brand-strong: rgba(11, 92, 255, 0.34);
  --color-scrollbar-thumb: rgba(19, 22, 25, 0.18);
  --surface-wash: rgba(11, 92, 255, 0.06);

  --shadow-soft: 0 0.75rem 2rem rgba(19, 22, 25, 0.06);
  --shadow-hover: 0 1.25rem 2.5rem rgba(19, 22, 25, 0.1);
  --shadow-pager: 0 0.25rem 1rem rgba(19, 22, 25, 0.05);
  --shadow-modal: 0 30px 80px rgba(19, 22, 25, 0.4);
  --page-max: 87.5rem;
  --layout-max: 87.5rem;
  --layout-padding-start: 2vw;
  --layout-padding-end: 2.5vw;
  --layout-padding-inline-mobile: 4vw;
}