/* Shared semantic tokens; both themes use the same component contracts. */
:root {
  --pa-badge-ink: #fff;
  --pa-hero-text-grad: linear-gradient(135deg, #fff 30%, #a5b4fc 100%);
  color-scheme: light dark;
  --pa-bg: #10131a;
  --pa-bg-2: #0e1222;
  --pa-surface-1: #12172a;
  --pa-surface-2: #171d34;
  --pa-surface-3: #1d2542;
  --pa-elev: #141a30;

  --pa-topbar-bg: rgba(18, 23, 42, 0.85);
  --pa-sidebar-bg: linear-gradient(180deg, rgba(18, 23, 42, .75), rgba(10, 13, 24, .75));


  --pa-ink: #eef1fb;
  --pa-ink-soft: #c8cee6;
  --pa-muted: #939bbd;
  --pa-faint: #a0a8bf;

  --pa-text-primary: var(--pa-ink);
  --pa-text-secondary: var(--pa-muted);

  --pa-line: rgba(255, 255, 255, .075);
  --pa-line-2: rgba(255, 255, 255, .12);
  --pa-border-inset: inset 0 0 0 1px var(--pa-line);
  --pa-border-inset-2: inset 0 0 0 1px var(--pa-line-2);

  --pa-brand: #91a9ff;
  --pa-brand-2: #9a6bff;
  --pa-brand-3: #57e0e0;
  --pa-nav-hover-bg: #253253;
  --pa-nav-hover-line: #53699b;
  --pa-primary-hover: #a2b8ff;
  --pa-primary-ink: #10182c;
  --pa-hover-ink: #a2b8ff;
  --pa-hover-shadow: 0 5px 14px rgba(0,0,0,.24),inset 0 0 0 1px var(--pa-brand);
  --pa-grad: linear-gradient(135deg, var(--pa-brand) 0%, var(--pa-brand-2) 100%);
  --pa-grad-soft: linear-gradient(135deg, rgba(109, 139, 255, .16), rgba(154, 107, 255, .16));

  --pa-ok: #34d399;
  --pa-ok-bg: rgba(52, 211, 153, .12);
  --pa-ok-line: rgba(52, 211, 153, .40);
  --pa-bad: #fb7185;
  --pa-bad-bg: rgba(251, 113, 133, .12);
  --pa-bad-line: rgba(251, 113, 133, .40);
  --pa-warn: #fbbf24;
  --pa-warn-bg: rgba(251, 191, 36, .10);
  --pa-warn-line: rgba(251, 191, 36, .35);

  --pa-concept: hsl(190, 90%, 40%);
  --pa-concept-bg: hsla(190, 90%, 40%, 0.12);
  --pa-concept-line: hsla(190, 90%, 40%, 0.40);
  --pa-analogy: hsl(280, 80%, 65%);
  --pa-analogy-bg: hsla(280, 80%, 65%, 0.12);
  --pa-analogy-line: hsla(280, 80%, 65%, 0.40);

  /* Semantic UI Text Mappings */
  --pa-scenario-ink: #fff;
  --pa-recap-th-ink: #cdd6ff;
  --pa-tag-ink: var(--pa-concept);
  --pa-tag-bg: var(--pa-concept-bg);
  --pa-tag-line: var(--pa-concept-line);
  --pa-hint-ink: #ffe6ad;
  --pa-bp-ink: #aef0d3;
  --pa-bp-ink-b: #ddffe9;
  --pa-qtype-ink: #b9c2e6;
  --pa-opt-key-bg: rgba(0, 0, 0, .25);
  --pa-opt-key-ink: #c2caea;
  --pa-opt-sel-bg: rgba(109, 139, 255, .10);
  --pa-empty-code-bg: rgba(0, 0, 0, .35);
  --pa-empty-code-ink: #cdd6ff;
  --pa-active-mod-ink: #fff;

  --pa-r-xl: 20px;
  --pa-r-lg: 16px;
  --pa-r-md: 12px;
  --pa-r-sm: 9px;
  --pa-r-pill: 999px;

  /* Spatial Tokens (8pt system) */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;
  --sp-8: 48px;
  --sp-9: 64px;

  /* Tier-1 Elevation with Composited Inset Shadows */
  --pa-sh-sm: 0 1px 2px rgba(18, 22, 45, 0.04), 0 2px 4px rgba(18, 22, 45, 0.03), 0 4px 8px rgba(18, 22, 45, 0.02), var(--pa-border-inset);
  --pa-sh-md: 0 2px 4px rgba(18, 22, 45, 0.05), 0 8px 16px rgba(18, 22, 45, 0.04), 0 16px 32px rgba(18, 22, 45, 0.03), var(--pa-border-inset);
  --pa-sh-lg: 0 4px 8px rgba(18, 22, 45, 0.06), 0 16px 32px rgba(18, 22, 45, 0.05), 0 32px 64px rgba(18, 22, 45, 0.04), var(--pa-border-inset-2);

  --pa-ease: cubic-bezier(.4, 0, .2, 1);
  --pa-dur-xs: 100ms;
  --pa-dur-sm: 160ms;
  --pa-dur-md: 240ms;
  --pa-dur-lg: 360ms;

  --pa-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --pa-fs-xs: 11px;
  --pa-fs-sm: 12.5px;
  --pa-fs-base: 16px;
  --pa-fs-md: 15.5px;
  --pa-fs-lg: 17px;
  --pa-fs-xl: clamp(20px, 2vw, 24px);
  --pa-fs-2xl: clamp(24px, 3vw, 30px);
  --pa-fs-3xl: clamp(28px, 4vw, 36px);

  /* Bounded Fluid Grid Layout */
  --pa-sidebar-w: clamp(260px, 20vw, 312px);
  --pa-read: 1040px; 
}
:root[data-theme="light"] {
  --pa-nav-hover-bg: #eef2ff;
  --pa-nav-hover-line: #b6c3ec;
  --pa-primary-hover: #4656ca;
  --pa-primary-ink: #ffffff;
  --pa-hover-ink: #4656ca;
  --pa-hover-shadow: 0 5px 14px rgba(69,86,165,.14),inset 0 0 0 1px var(--pa-brand);
  --pa-badge-ink: #fff;
  --pa-hero-text-grad: linear-gradient(135deg, #111827 30%, #4f46e5 100%);
  color-scheme: light;
  --pa-bg: #eef1f8;
  --pa-bg-2: #f6f8fc;
  --pa-surface-1: #ffffff;
  --pa-surface-2: #f3f6fc;
  --pa-surface-3: #e9eef8;
  --pa-elev: #ffffff;

  --pa-topbar-bg: rgba(255, 255, 255, 0.85);
  --pa-sidebar-bg: linear-gradient(180deg, rgba(246, 248, 252, .75), rgba(238, 241, 248, .85));


  --pa-ink: #111827;
  --pa-ink-soft: #374151;
  --pa-muted: #4b5563;
  --pa-faint: #586477;

  --pa-text-primary: var(--pa-ink);
  --pa-text-secondary: var(--pa-muted);

  --pa-line: rgba(18, 22, 45, .10);
  --pa-line-2: rgba(18, 22, 45, .17);

  --pa-brand: #5566e6;
  --pa-brand-2: #8a4fe6;
  --pa-brand-3: #0d8f9b;
  --pa-grad: linear-gradient(135deg, var(--pa-brand) 0%, var(--pa-brand-2) 100%);
  --pa-grad-soft: linear-gradient(135deg, rgba(85, 102, 230, .14), rgba(138, 79, 230, .14));

  --pa-ok: #08734f;
  --pa-ok-bg: rgba(15, 157, 110, .12);
  --pa-ok-line: rgba(15, 157, 110, .34);
  --pa-bad: #e11d48;
  --pa-bad-bg: rgba(225, 29, 72, .10);
  --pa-bad-line: rgba(225, 29, 72, .34);
  --pa-warn: #995000;
  --pa-warn-bg: rgba(217, 119, 6, .10);
  --pa-warn-line: rgba(217, 119, 6, .34);

  --pa-concept: hsl(190, 100%, 25%);
  --pa-concept-bg: hsla(190, 90%, 40%, 0.08);
  --pa-concept-line: hsla(190, 90%, 40%, 0.30);
  --pa-analogy: hsl(280, 70%, 40%);
  --pa-analogy-bg: hsla(280, 80%, 60%, 0.08);
  --pa-analogy-line: hsla(280, 80%, 60%, 0.30);

  --pa-scenario-ink: #12172b;
  --pa-recap-th-ink: #2a315a;
  --pa-tag-ink: #3c3f8e;
  --pa-tag-bg: rgba(85, 102, 230, .12);
  --pa-tag-line: rgba(85, 102, 230, .28);
  --pa-hint-ink: #7c2d12;
  --pa-bp-ink: #0a4a30;
  --pa-bp-ink-b: #06311f;
  --pa-qtype-ink: #3a4170;
  --pa-opt-key-bg: rgba(18, 22, 45, .04);
  --pa-opt-key-ink: #3a4170;
  --pa-opt-sel-bg: rgba(85, 102, 230, .08);
  --pa-empty-code-bg: rgba(18, 22, 45, .05);
  --pa-empty-code-ink: #2a315a;
  --pa-active-mod-ink: #1b2140;

  --pa-border-inset: inset 0 0 0 1px rgba(18, 22, 45, .10);
  --pa-border-inset-2: inset 0 0 0 1px rgba(18, 22, 45, .17);

  --pa-sh-sm: 0 1px 2px rgba(18, 22, 45, .06), 0 1px 1px rgba(18, 22, 45, .04), var(--pa-border-inset);
  --pa-sh-md: 0 8px 22px rgba(18, 22, 45, .10), 0 2px 6px rgba(18, 22, 45, .06), var(--pa-border-inset);
  --pa-sh-lg: 0 20px 50px rgba(18, 22, 45, .16), 0 6px 16px rgba(18, 22, 45, .10), var(--pa-border-inset-2);

  /* Hero: rich gradients for light mode */
  --pa-hero-bg:
    radial-gradient(800px 280px at 10% -50%, rgba(85, 102, 230, .18), transparent 70%),
    radial-gradient(600px 280px at 90% 140%, rgba(138, 79, 230, .15), transparent 70%),
    linear-gradient(180deg, var(--pa-surface-1), var(--pa-bg-2));
}