/* ============================================================
   tokens/design-system.css  —  Layer 0: --ds-* canonical tokens
   Aliases existing --public-* / --theme-* vars so all components
   can reference --ds-* and remain backward compatible.
   DO NOT put component rules here — tokens only.
   ============================================================ */

:root {
  /* ── Primitive: spacing scale ── */
  --ds-space-1:  0.25rem;
  --ds-space-2:  0.5rem;
  --ds-space-3:  0.75rem;
  --ds-space-4:  1rem;
  --ds-space-5:  1.25rem;
  --ds-space-6:  1.5rem;
  --ds-space-8:  2rem;
  --ds-space-10: 2.5rem;
  --ds-space-12: 3rem;
  --ds-space-16: 4rem;
  --ds-space-20: 5rem;
  --ds-space-24: 6rem;

  /* ── Primitive: radius scale ── */
  --ds-radius-none: 0;
  --ds-radius-sm:   0.375rem;
  --ds-radius-md:   0.75rem;
  --ds-radius-lg:   1rem;
  --ds-radius-xl:   1.5rem;
  --ds-radius-full: 9999px;

  /* ── Primitive: shadow scale ── */
  --ds-shadow-none: none;
  --ds-shadow-sm:   0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  --ds-shadow-md:   0 4px 12px rgba(15, 23, 42, 0.08), 0 2px 4px rgba(15, 23, 42, 0.04);
  --ds-shadow-lg:   0 14px 30px rgba(15, 23, 42, 0.10), 0 4px 8px rgba(15, 23, 42, 0.04);
  --ds-shadow-xl:   0 24px 56px rgba(15, 23, 42, 0.14), 0 8px 16px rgba(15, 23, 42, 0.06);

  /* ── Semantic: color — alias to existing token chain ── */
  --ds-accent:       var(--theme-primary, #2563eb);
  --ds-accent-rgb:   var(--theme-primary-rgb, 37, 99, 235);
  --ds-accent-dark:  var(--theme-secondary, #1d4ed8);
  --ds-accent-text:  #ffffff;

  /* ── Semantic: surfaces ── */
  --ds-page-bg:    var(--public-page-bg, var(--theme-page-bg, #eef4fb));
  --ds-surface:    var(--public-card-bg, #ffffff);
  --ds-surface-2:  var(--public-subcard-bg, #f8fafc);
  --ds-border:     var(--public-divider-color, rgba(148, 163, 184, 0.18));

  /* ── Semantic: text ── */
  --ds-text:       var(--public-text-strong, var(--theme-page-text, #0f172a));
  --ds-text-muted: var(--public-text-muted, #475569);
  --ds-text-soft:  var(--public-text-soft, rgba(100, 116, 139, 0.72));

  /* ── Component: card ── */
  --ds-card-bg:            var(--ds-surface);
  --ds-card-radius:        var(--ds-radius-lg);
  --ds-card-p:             var(--ds-space-6);
  --ds-card-shadow:        var(--ds-shadow-md);
  --ds-card-border:        1px solid var(--ds-border);
  --ds-card-shadow-raised: var(--ds-shadow-lg);

  /* ── Component: subcard ── */
  --ds-subcard-bg:     var(--ds-surface-2);
  --ds-subcard-radius: var(--ds-radius-md);
  --ds-subcard-p:      var(--ds-space-4);

  /* ── Component: button ── */
  --ds-btn-bg:          var(--ds-accent);
  --ds-btn-text:        var(--ds-accent-text);
  --ds-btn-radius:      var(--ds-radius-md);
  --ds-btn-px:          var(--ds-space-5);
  --ds-btn-py:          var(--ds-space-3);
  --ds-btn-font-weight: 600;
  --ds-btn-secondary-bg:     var(--public-control-bg, rgba(255, 255, 255, 0.92));
  --ds-btn-secondary-border: var(--ds-border);
  --ds-btn-secondary-text:   var(--ds-text);
  --ds-btn-ghost-text:       var(--ds-accent);

  /* ── Component: input ── */
  --ds-input-bg:     var(--public-input-bg, rgba(255, 255, 255, 0.95));
  --ds-input-border: var(--public-input-border, rgba(148, 163, 184, 0.24));
  --ds-input-text:   var(--ds-text);
  --ds-input-radius: var(--ds-radius-md);
  --ds-input-py:     var(--ds-space-3);
  --ds-input-px:     var(--ds-space-4);

  /* ── Component: badge / chip ── */
  --ds-badge-radius: var(--ds-radius-full);
  --ds-badge-px:     var(--ds-space-3);
  --ds-badge-py:     0.25rem;
  --ds-chip-radius:  var(--ds-radius-full);

  /* ── Component: alert ── */
  --ds-alert-radius: var(--ds-radius-lg);
  --ds-alert-p:      var(--ds-space-4) var(--ds-space-5);

  /* ── Component: kicker (label above headings) ── */
  --ds-kicker-size:  0.75rem;
  --ds-kicker-color: var(--ds-accent);

  /* ── Layout: section ──
     Phase 0 section-rhythm contract: .public-section / .public-title /
     .public-lead in base/site.css read from these tokens. Variants never
     hardcode their own padding / heading size — they inherit the rhythm
     so a homepage built from any combination of variants stays coherent. */
  --ds-section-py:             clamp(4.5rem, 7vw, 7.5rem);
  --ds-section-gap:            var(--ds-space-16);
  --ds-section-title-size:     clamp(2rem, 3.4vw, 3.1rem);
  --ds-section-title-weight:   800;
  --ds-section-title-tracking: -0.045em;
  --ds-section-lead-size:      clamp(1rem, 1.35vw, 1.22rem);
  --ds-section-lead-line:      1.8;
  --ds-section-lead-max-width: 52rem;

  /* ── Layout: card grid ── */
  --ds-card-grid-gap:  var(--ds-space-6);
  --ds-card-grid-cols: 3;
  --ds-cols-gap:       var(--ds-space-8);

  /* ── Layout: container ── */
  --ds-container-max-width: 1280px;
  --ds-container-px:        var(--ds-space-6);

  /* ── Layout: nav ── */
  --ds-nav-height: 64px;

  /* ── Layout: hero ── */
  --ds-hero-py:               var(--ds-space-24);
  --ds-hero-sm-py:            var(--ds-space-16);
  --ds-hero-align:            center;
  --ds-hero-cta-gap:          var(--ds-space-4);
  --ds-hero-media-radius:     var(--ds-radius-xl);
  --ds-hero-heading-size:     clamp(2rem, 5vw, 3.5rem);
  --ds-hero-heading-weight:   700;
  --ds-hero-heading-tracking: -0.02em;
  --ds-hero-sub-size:         1.125rem;

  /* ── Typography ── */
  --ds-font-heading:     var(--preset-font-heading, inherit);
  --ds-font-body:        var(--preset-font-body, inherit);
  --ds-h1-size:          clamp(1.875rem, 4vw, 3rem);
  --ds-h2-size:          clamp(1.5rem, 3vw, 2.25rem);
  --ds-h3-size:          1.25rem;
  --ds-h1-weight:        700;
  --ds-h2-weight:        700;
  --ds-h3-weight:        600;
  --ds-h1-tracking:      -0.02em;
  --ds-h2-tracking:      -0.01em;
  --ds-body-size:        1rem;
  --ds-body-line-height: 1.6;
  --ds-prose-max-width:  68ch;
  --ds-prose-font-size:  1.0625rem;

  /* ── Footer ── */
  --ds-footer-bg:   var(--public-nav-bg, var(--ds-surface));
  --ds-footer-text: var(--ds-text-muted);
}

/* ── Apply DS tokens to public site pages only (scoped away from internal tool pages) ── */
body:not(.tool-page-body) h1,
body:not(.tool-page-body) h2,
body:not(.tool-page-body) h3,
body:not(.tool-page-body) h4,
body:not(.tool-page-body) h5,
body:not(.tool-page-body) h6 {
  font-family: var(--ds-font-heading, inherit);
}
body:not(.tool-page-body) h1 { letter-spacing: var(--ds-h1-tracking, -0.02em); }
body:not(.tool-page-body) h2 { letter-spacing: var(--ds-h2-tracking, -0.01em); }
body:not(.tool-page-body) {
  font-family: var(--ds-font-body, inherit);
  line-height: var(--ds-body-line-height, 1.6);
}

/* ── Density cascade: compact ── */
body.ds-density-compact {
  --ds-section-py:     var(--ds-space-12);
  --ds-section-gap:    var(--ds-space-10);
  --ds-card-p:         var(--ds-space-4);
  --ds-subcard-p:      var(--ds-space-3);
  --ds-card-grid-gap:  var(--ds-space-4);
  --ds-hero-py:        var(--ds-space-16);
  --ds-hero-sm-py:     var(--ds-space-10);
}

/* ── Density cascade: spacious ── */
body.ds-density-spacious {
  --ds-section-py:     var(--ds-space-24);
  --ds-section-gap:    var(--ds-space-20);
  --ds-card-p:         var(--ds-space-8);
  --ds-subcard-p:      var(--ds-space-6);
  --ds-card-grid-gap:  var(--ds-space-8);
  --ds-hero-py:        var(--ds-space-24);
  --ds-hero-sm-py:     var(--ds-space-20);
}

/* ── Corner style: sharp ── */
body.ds-corners-sharp {
  --ds-card-radius:    var(--ds-radius-sm);
  --ds-subcard-radius: var(--ds-radius-sm);
  --ds-btn-radius:     var(--ds-radius-sm);
  --ds-input-radius:   var(--ds-radius-sm);
  --ds-badge-radius:   var(--ds-radius-sm);
  --ds-alert-radius:   var(--ds-radius-sm);
}

/* ── Corner style: pill ── */
body.ds-corners-pill {
  --ds-card-radius:    var(--ds-radius-xl);
  --ds-subcard-radius: var(--ds-radius-lg);
  --ds-btn-radius:     var(--ds-radius-full);
  --ds-input-radius:   var(--ds-radius-full);
  --ds-badge-radius:   var(--ds-radius-full);
  --ds-alert-radius:   var(--ds-radius-lg);
}

/* ── Card style: flat (no shadow) ── */
body.ds-cards-flat {
  --ds-card-shadow:        var(--ds-shadow-none);
  --ds-card-shadow-raised: var(--ds-shadow-sm);
}

/* ── Card style: ghost (no shadow, no fill) ── */
body.ds-cards-ghost {
  --ds-card-bg:            transparent;
  --ds-card-shadow:        var(--ds-shadow-none);
  --ds-card-shadow-raised: var(--ds-shadow-none);
}

/* ── Shadow intensity overrides ── */
body.ds-shadows-none   { --ds-card-shadow: var(--ds-shadow-none); --ds-card-shadow-raised: var(--ds-shadow-none); }
body.ds-shadows-subtle { --ds-card-shadow: var(--ds-shadow-sm);   --ds-card-shadow-raised: var(--ds-shadow-md); }
body.ds-shadows-strong { --ds-card-shadow: var(--ds-shadow-lg);   --ds-card-shadow-raised: var(--ds-shadow-xl); }

/* ── Font size scale cascades ── */
body.ds-fontscale-xs {
  --ds-h1-size:           clamp(1.5rem, 3vw, 2rem);
  --ds-h2-size:           1.375rem;
  --ds-h3-size:           1.125rem;
  --ds-body-size:         0.9375rem;
  --ds-hero-heading-size: clamp(1.75rem, 4vw, 2.5rem);
}
body.ds-fontscale-sm {
  --ds-h1-size:           clamp(1.75rem, 3.5vw, 2.5rem);
  --ds-h2-size:           1.5rem;
  --ds-h3-size:           1.25rem;
  --ds-body-size:         1rem;
  --ds-hero-heading-size: clamp(2rem, 4.5vw, 3rem);
}
body.ds-fontscale-lg {
  --ds-h1-size:           clamp(2.25rem, 5vw, 3.5rem);
  --ds-h2-size:           clamp(1.75rem, 3.5vw, 2.5rem);
  --ds-h3-size:           1.375rem;
  --ds-body-size:         1.0625rem;
  --ds-hero-heading-size: clamp(2.75rem, 6vw, 4rem);
}
body.ds-fontscale-xl {
  --ds-h1-size:           clamp(2.75rem, 6vw, 4.5rem);
  --ds-h2-size:           clamp(2rem, 4vw, 3rem);
  --ds-h3-size:           1.5rem;
  --ds-body-size:         1.125rem;
  --ds-hero-heading-size: clamp(3rem, 7vw, 5rem);
}

/* ── Font scale: apply DS size vars to NATIVE heading elements.
   The .ds-h1/.ds-h2 class rules in typography.css cover DS-classed elements.
   These rules cover native <h1>/<h2>/<h3> that use Tailwind size classes,
   which have lower specificity (0,1,0) than our scoped selector (0,2,1+). ── */
:is(body.ds-fontscale-xs, body.ds-fontscale-sm, body.ds-fontscale-lg, body.ds-fontscale-xl):not(.tool-page-body) h1,
:is(body.ds-fontscale-xs, body.ds-fontscale-sm, body.ds-fontscale-lg, body.ds-fontscale-xl):not(.tool-page-body) [class*='text-5xl'],
:is(body.ds-fontscale-xs, body.ds-fontscale-sm, body.ds-fontscale-lg, body.ds-fontscale-xl):not(.tool-page-body) [class*='text-4xl'] { font-size: var(--ds-h1-size); }

:is(body.ds-fontscale-xs, body.ds-fontscale-sm, body.ds-fontscale-lg, body.ds-fontscale-xl):not(.tool-page-body) h2,
:is(body.ds-fontscale-xs, body.ds-fontscale-sm, body.ds-fontscale-lg, body.ds-fontscale-xl):not(.tool-page-body) [class*='text-3xl'] { font-size: var(--ds-h2-size); }

:is(body.ds-fontscale-xs, body.ds-fontscale-sm, body.ds-fontscale-lg, body.ds-fontscale-xl):not(.tool-page-body) h3,
:is(body.ds-fontscale-xs, body.ds-fontscale-sm, body.ds-fontscale-lg, body.ds-fontscale-xl):not(.tool-page-body) [class*='text-2xl'] { font-size: var(--ds-h3-size); }

/* ── Shadow overrides: remap Tailwind shadow classes to DS shadow tokens.
   Specificity body.ds-shadows-* .shadow-* = (0,2,1) beats Tailwind (0,1,0). ── */
body.ds-shadows-none:not(.tool-page-body) .shadow,
body.ds-shadows-none:not(.tool-page-body) .shadow-sm,
body.ds-shadows-none:not(.tool-page-body) .shadow-md,
body.ds-shadows-none:not(.tool-page-body) .shadow-lg,
body.ds-shadows-none:not(.tool-page-body) .shadow-xl,
body.ds-shadows-none:not(.tool-page-body) .shadow-2xl { box-shadow: none; }

body.ds-shadows-subtle:not(.tool-page-body) .shadow-lg,
body.ds-shadows-subtle:not(.tool-page-body) .shadow-xl,
body.ds-shadows-subtle:not(.tool-page-body) .shadow-2xl { box-shadow: var(--ds-shadow-sm); }

body.ds-shadows-strong:not(.tool-page-body) .shadow { box-shadow: var(--ds-shadow-md); }
body.ds-shadows-strong:not(.tool-page-body) .shadow-sm { box-shadow: var(--ds-shadow-md); }
body.ds-shadows-strong:not(.tool-page-body) .shadow-md { box-shadow: var(--ds-shadow-lg); }
body.ds-shadows-strong:not(.tool-page-body) .shadow-lg { box-shadow: var(--ds-shadow-xl); }

/* ── Corner overrides: remap Tailwind rounded classes to DS radius tokens. ── */
body.ds-corners-sharp:not(.tool-page-body) .rounded,
body.ds-corners-sharp:not(.tool-page-body) .rounded-md,
body.ds-corners-sharp:not(.tool-page-body) .rounded-lg,
body.ds-corners-sharp:not(.tool-page-body) .rounded-xl,
body.ds-corners-sharp:not(.tool-page-body) .rounded-2xl,
body.ds-corners-sharp:not(.tool-page-body) .rounded-3xl { border-radius: var(--ds-radius-sm); }

body.ds-corners-pill:not(.tool-page-body) .rounded,
body.ds-corners-pill:not(.tool-page-body) .rounded-md,
body.ds-corners-pill:not(.tool-page-body) .rounded-lg,
body.ds-corners-pill:not(.tool-page-body) .rounded-xl,
body.ds-corners-pill:not(.tool-page-body) .rounded-2xl { border-radius: var(--ds-radius-xl); }

/* ── Public site card overrides: component CSS uses hardcoded shadows/radius
   for its own visual defaults. These rules force DS settings through when a
   toolbar class is active.

   Specificity is (0,4,1): body(C) + .public-site-body(B) + .ds-*(B) + :not(B) + .target(B).
   This beats the dark-mode rule in site.css at (0,3,1):
     :is(body.ui-mode-dark, body.public-site-body.preset-mode-dark) .public-surface
   which loads later and would otherwise win on equal specificity.
   .public-site-body is present on every public page (hardcoded in base.html).

   Covered classes:
     .public-card, .public-surface  — site.css base card (home, about, pages)
     .homepage-{bright-band,cta-panel,utility-card,newsletter-panel}  — home sections
     .campaign-shell                — campaign/blog-band containers
     .blog-card, .blog-search-shell — blog list page
   ── */

/* No shadow */
body.public-site-body.ds-shadows-none:not(.tool-page-body) .public-card,
body.public-site-body.ds-shadows-none:not(.tool-page-body) .public-surface,
body.public-site-body.ds-shadows-none:not(.tool-page-body) .homepage-bright-band,
body.public-site-body.ds-shadows-none:not(.tool-page-body) .homepage-cta-panel,
body.public-site-body.ds-shadows-none:not(.tool-page-body) .homepage-utility-card,
body.public-site-body.ds-shadows-none:not(.tool-page-body) .homepage-newsletter-panel,
body.public-site-body.ds-shadows-none:not(.tool-page-body) .campaign-shell,
body.public-site-body.ds-shadows-none:not(.tool-page-body) .blog-card,
body.public-site-body.ds-shadows-none:not(.tool-page-body) .blog-search-shell { box-shadow: none; }

body.public-site-body.ds-shadows-none:not(.tool-page-body) .public-card:hover,
body.public-site-body.ds-shadows-none:not(.tool-page-body) .homepage-utility-card:hover,
body.public-site-body.ds-shadows-none:not(.tool-page-body) .blog-card:hover { box-shadow: none; }

/* Subtle shadow */
body.public-site-body.ds-shadows-subtle:not(.tool-page-body) .public-card,
body.public-site-body.ds-shadows-subtle:not(.tool-page-body) .public-surface,
body.public-site-body.ds-shadows-subtle:not(.tool-page-body) .homepage-bright-band,
body.public-site-body.ds-shadows-subtle:not(.tool-page-body) .homepage-cta-panel,
body.public-site-body.ds-shadows-subtle:not(.tool-page-body) .homepage-utility-card,
body.public-site-body.ds-shadows-subtle:not(.tool-page-body) .homepage-newsletter-panel,
body.public-site-body.ds-shadows-subtle:not(.tool-page-body) .campaign-shell,
body.public-site-body.ds-shadows-subtle:not(.tool-page-body) .blog-card,
body.public-site-body.ds-shadows-subtle:not(.tool-page-body) .blog-search-shell { box-shadow: var(--ds-shadow-sm); }

body.public-site-body.ds-shadows-subtle:not(.tool-page-body) .public-card:hover,
body.public-site-body.ds-shadows-subtle:not(.tool-page-body) .homepage-utility-card:hover,
body.public-site-body.ds-shadows-subtle:not(.tool-page-body) .blog-card:hover { box-shadow: var(--ds-shadow-md); }

/* Strong shadow */
body.public-site-body.ds-shadows-strong:not(.tool-page-body) .public-card,
body.public-site-body.ds-shadows-strong:not(.tool-page-body) .public-surface,
body.public-site-body.ds-shadows-strong:not(.tool-page-body) .homepage-bright-band,
body.public-site-body.ds-shadows-strong:not(.tool-page-body) .homepage-cta-panel,
body.public-site-body.ds-shadows-strong:not(.tool-page-body) .homepage-utility-card,
body.public-site-body.ds-shadows-strong:not(.tool-page-body) .homepage-newsletter-panel,
body.public-site-body.ds-shadows-strong:not(.tool-page-body) .campaign-shell,
body.public-site-body.ds-shadows-strong:not(.tool-page-body) .blog-card,
body.public-site-body.ds-shadows-strong:not(.tool-page-body) .blog-search-shell { box-shadow: var(--ds-shadow-xl); }

body.public-site-body.ds-shadows-strong:not(.tool-page-body) .public-card:hover,
body.public-site-body.ds-shadows-strong:not(.tool-page-body) .homepage-utility-card:hover,
body.public-site-body.ds-shadows-strong:not(.tool-page-body) .blog-card:hover { box-shadow: var(--ds-shadow-xl); }

/* Flat card (no shadow) */
body.public-site-body.ds-cards-flat:not(.tool-page-body) .public-card,
body.public-site-body.ds-cards-flat:not(.tool-page-body) .public-surface,
body.public-site-body.ds-cards-flat:not(.tool-page-body) .homepage-bright-band,
body.public-site-body.ds-cards-flat:not(.tool-page-body) .homepage-cta-panel,
body.public-site-body.ds-cards-flat:not(.tool-page-body) .homepage-utility-card,
body.public-site-body.ds-cards-flat:not(.tool-page-body) .homepage-newsletter-panel,
body.public-site-body.ds-cards-flat:not(.tool-page-body) .campaign-shell,
body.public-site-body.ds-cards-flat:not(.tool-page-body) .blog-card,
body.public-site-body.ds-cards-flat:not(.tool-page-body) .blog-search-shell { box-shadow: none; }

body.public-site-body.ds-cards-flat:not(.tool-page-body) .public-card:hover,
body.public-site-body.ds-cards-flat:not(.tool-page-body) .homepage-utility-card:hover,
body.public-site-body.ds-cards-flat:not(.tool-page-body) .blog-card:hover { box-shadow: none; }

/* Ghost card */
body.public-site-body.ds-cards-ghost:not(.tool-page-body) .public-card,
body.public-site-body.ds-cards-ghost:not(.tool-page-body) .blog-card { box-shadow: none; background: transparent; }

/* Sharp corners */
body.public-site-body.ds-corners-sharp:not(.tool-page-body) .public-card,
body.public-site-body.ds-corners-sharp:not(.tool-page-body) .public-surface,
body.public-site-body.ds-corners-sharp:not(.tool-page-body) .homepage-bright-band,
body.public-site-body.ds-corners-sharp:not(.tool-page-body) .homepage-cta-panel,
body.public-site-body.ds-corners-sharp:not(.tool-page-body) .homepage-utility-card,
body.public-site-body.ds-corners-sharp:not(.tool-page-body) .homepage-newsletter-panel,
body.public-site-body.ds-corners-sharp:not(.tool-page-body) .campaign-shell,
body.public-site-body.ds-corners-sharp:not(.tool-page-body) .blog-card { border-radius: var(--ds-radius-sm); }

/* Pill corners */
body.public-site-body.ds-corners-pill:not(.tool-page-body) .public-card,
body.public-site-body.ds-corners-pill:not(.tool-page-body) .public-surface,
body.public-site-body.ds-corners-pill:not(.tool-page-body) .homepage-bright-band,
body.public-site-body.ds-corners-pill:not(.tool-page-body) .homepage-cta-panel,
body.public-site-body.ds-corners-pill:not(.tool-page-body) .homepage-utility-card,
body.public-site-body.ds-corners-pill:not(.tool-page-body) .homepage-newsletter-panel,
body.public-site-body.ds-corners-pill:not(.tool-page-body) .campaign-shell,
body.public-site-body.ds-corners-pill:not(.tool-page-body) .blog-card { border-radius: var(--ds-radius-xl); }

/* ── Toolbar isolation: prevent body-level line-height changes from
   affecting the floating admin toolbar layout. ── */
#inlineEditToolbar,
#inlineEditToolbar * { line-height: normal; }