/* =============================================================================
   Physicians Law Group — Design Tokens (WordPress)
   Source: Design System/colors_and_type.css (font loading omitted — Uncode manages)
   Values verified from physicianslawgroup.com on 2026-05-17.
   AUTO-GENERATED by npm run sync:tokens — edit colors_and_type.css, then re-run.
   ============================================================================= */

:root {
  /* ===========================================================
     COLOR — three surfaces, one action color, two text ramps.
     The brand has NO grayscale ramp; every "gray" is alpha
     black or white on a base surface. Resist adding one.
     =========================================================== */

  /* Surfaces */
  --plg-color-surface-dark:   #000000;   /* hero, footer */
  --plg-color-surface-light:  #FFFFFF;   /* news features */
  --plg-color-surface-accent: #CDFFE8;   /* mint — services, How We Work */

  /* Brand action */
  --plg-color-brand-indigo:   #4033FE;   /* the only action color */

  /* Text */
  --plg-color-text-on-dark:        #F2F2F2;
  --plg-color-text-on-dark-muted:  rgba(255, 255, 255, 0.65);
  --plg-color-text-on-light:       #000000;
  --plg-color-text-on-light-muted: rgba(0, 0, 0, 0.65);
  --plg-color-text-on-indigo:      #FFFFFF;

  /* Border + overlay */
  --plg-color-border-subtle:  rgba(0, 0, 0, 0.15);
  --plg-color-border-on-dark: rgba(255, 255, 255, 0.10);
  --plg-color-overlay-nav:    rgba(255, 255, 255, 0.10);

  /* ===========================================================
     TYPE — families loaded by Uncode Theme Options
     =========================================================== */

  --plg-font-family-display: "Geist", ui-sans-serif, system-ui, sans-serif;
  --plg-font-family-body:    "Geist", ui-sans-serif, system-ui, sans-serif;
  --plg-font-family-mono:    "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --plg-font-weight-extralight: 200;
  --plg-font-weight-regular:    400;
  --plg-font-weight-medium:     500;
  --plg-font-weight-semibold:   600;
  --plg-font-weight-bold:       700;

  /* Scale (verified from live site, desktop @ 1440px) */
  --plg-type-display-xl-size:     120px; --plg-type-display-xl-leading:  132px;  --plg-type-display-xl-tracking: -4.8px;
  --plg-type-display-md-size:     80px;  --plg-type-display-md-leading:  96px;   --plg-type-display-md-tracking: -1.6px;
  --plg-type-display-sm-size:     64px;  --plg-type-display-sm-leading:  70.4px; --plg-type-display-sm-tracking: -1.28px;
  --plg-type-display-lg-size:     40px;  --plg-type-display-lg-leading:  43.6px; --plg-type-display-lg-tracking: -0.8px;
  --plg-type-heading-md-size:     24px;  --plg-type-heading-md-leading:  24px;   --plg-type-heading-md-tracking: -0.48px;
  --plg-type-display-num-size:    120px; --plg-type-display-num-leading:  120px;  --plg-type-display-num-tracking: -2.4px;
  --plg-type-body-xl-size:        36px;  --plg-type-body-xl-leading:     50.4px; --plg-type-body-xl-tracking:    -0.18px;
  --plg-type-body-lg-size:        20px;  --plg-type-body-lg-leading:     27px;   --plg-type-body-lg-tracking:    -0.4px;
  --plg-type-body-md-size:        16px;  --plg-type-body-md-leading:     1.5;    --plg-type-body-md-tracking:    0;
  --plg-type-label-mono-size:     20px;  --plg-type-label-mono-leading:  29px;   --plg-type-label-mono-tracking: -0.1px;
  --plg-type-button-size:         16px;  --plg-type-button-leading:      1.0;    --plg-type-button-tracking:     -0.16px;

  /* ===========================================================
     SPACING — 8px-based; 160 is the dominant section rhythm
     =========================================================== */
  --plg-space-0:   0px;
  --plg-space-4:   4px;
  --plg-space-8:   8px;
  --plg-space-12:  12px;
  --plg-space-16:  16px;
  --plg-space-20:  20px;
  --plg-space-24:  24px;
  --plg-space-32:  32px;
  --plg-space-40:  40px;
  --plg-space-48:  48px;
  --plg-space-64:  64px;
  --plg-space-80:  80px;
  --plg-space-96:  96px;
  --plg-space-120: 120px;
  --plg-space-160: 160px;

  /* ===========================================================
     RADIUS — pill for actions, none for cards
     =========================================================== */
  --plg-radius-none: 0px;
  --plg-radius-sm:   4px;
  --plg-radius-md:   8px;
  --plg-radius-pill: 9999px;

  /* ===========================================================
     SIZE
     =========================================================== */
  --plg-size-button-height: 48px;
  --plg-size-nav-height:    64px;
  --plg-size-stat-circle:   480px;
  --plg-size-container-max: 1440px;

  /* ===========================================================
     SHADOW — used sparingly; brand prefers backdrop-blur
     =========================================================== */
  --plg-shadow-nav-pill: 0px 2px 16px 0px rgba(0, 0, 0, 0.08);
  --plg-shadow-button:   0px 1px 2px 0px rgba(64, 51, 254, 0.18);

  /* ===========================================================
     EFFECT
     =========================================================== */
  --plg-effect-nav-blur: 12px;

  /* ===========================================================
     MOTION
     =========================================================== */
  --plg-duration-instant: 0ms;
  --plg-duration-fast:    150ms;
  --plg-duration-base:    240ms;
  --plg-duration-slow:    400ms;
  --plg-easing-standard:  cubic-bezier(0.2, 0.0, 0, 1.0);
  --plg-easing-enter:     cubic-bezier(0.0, 0.0, 0.2, 1.0);
  --plg-easing-exit:      cubic-bezier(0.4, 0.0, 1.0, 1.0);

  /* ===========================================================
     SEMANTIC ALIASES — short names you can reach for
     =========================================================== */
  --bg:            var(--plg-color-surface-light);
  --bg-dark:       var(--plg-color-surface-dark);
  --bg-mint:       var(--plg-color-surface-accent);
  --fg:            var(--plg-color-text-on-light);
  --fg-muted:      var(--plg-color-text-on-light-muted);
  --fg-on-dark:    var(--plg-color-text-on-dark);
  --fg-on-dark-muted: var(--plg-color-text-on-dark-muted);
  --indigo:        var(--plg-color-brand-indigo);
  --hairline:      var(--plg-color-border-subtle);
  --hairline-dark: var(--plg-color-border-on-dark);
}