:root{
  color-scheme:light;

  /* ── Fonts ── */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", Inter, "Segoe UI", sans-serif;
  --font-mono: "SF Mono", "Fira Code", "Cascadia Code", Consolas, monospace;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", Inter, "Segoe UI", sans-serif;

  /* ── Font weights ── */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-extrabold: 800;

  /* ── Core surfaces ── */
  --ink:#1d1d1f;
  --ink-2:#3a3a3c;
  --muted:#6e6e73;
  --line:rgba(0,0,0,.11);
  --surface:#ffffff;
  --soft:#f5f5f7;
  --hero:#f2f2f4;
  --nav:rgba(250,250,252,.76);
  --accent:#0071e3;
  --accent-dark:#1d1d1f;
  --footer:#161617;

  /* ── Semantic states ── */
  --success-bg:hsl(145 64% 96%);
  --success-text:hsl(142 72% 29%);
  --success-border:hsl(145 58% 84%);
  --warning-bg:hsl(48 100% 96%);
  --warning-text:hsl(32 95% 34%);
  --warning-border:hsl(48 96% 84%);
  --danger-bg:hsl(0 86% 97%);
  --danger-text:hsl(0 72% 45%);
  --danger-border:hsl(0 93% 90%);
  --info-bg:hsl(199 100% 96%);
  --info-text:hsl(201 96% 34%);
  --info-border:hsl(198 100% 86%);

  /* ── Focus ── */
  --focus-ring: hsla(231, 85%, 63%, 0.35);
  --focus-ring-strong: hsla(231, 85%, 63%, 0.55);

  /* ── Radius ── */
  --radius-sm:8px;
  --radius-md:12px;
  --radius-lg:16px;
  --radius-xl:22px;
  --radius-2xl:30px;
  --radius-full:999px;

  /* ── Spacing ── */
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:20px;
  --space-6:24px;
  --space-8:32px;
  --space-10:40px;
  --space-12:48px;
  --space-16:64px;

  /* ── Control heights ── */
  --control-sm:36px;
  --control-md:40px;
  --control-lg:46px;

  /* ── Typography scale ── */
  --text-xs:0.75rem;
  --text-sm:0.875rem;
  --text-base:1rem;
  --text-md:1.125rem;
  --text-lg:1.25rem;
  --text-xl:1.5rem;
  --text-2xl:1.875rem;
  --text-3xl:2.25rem;

  /* ── Shadows ── */
  --shadow-sm:0 1px 2px rgba(0,0,0,.04),0 8px 24px rgba(0,0,0,.045);
  --shadow-md:0 2px 8px rgba(0,0,0,.06),0 18px 44px rgba(0,0,0,.075);
  --shadow-lg:0 8px 24px rgba(0,0,0,.09),0 32px 80px rgba(0,0,0,.12);

  /* ── Layout ── */
  --container-narrow:960px;
  --container-default:1280px;
  --container-wide:1440px;
}

html[data-wgo-theme="dark"]{
  color-scheme:dark;

  /* ── Core surfaces (dark) ── */
  --ink:#f5f5f7;
  --ink-2:#d2d2d7;
  --muted:#a1a1a6;
  --line:rgba(255,255,255,.13);
  --surface:#1c1c1e;
  --soft:#101012;
  --hero:#161618;
  --nav:rgba(22,22,24,.76);
  --accent:#2997ff;
  --accent-dark:#f5f5f7;
  --footer:#09090a;

  /* ── Semantic states (dark) ── */
  --success-bg:hsl(145 40% 12%);
  --success-text:hsl(145 60% 58%);
  --success-border:hsl(145 30% 22%);
  --warning-bg:hsl(38 50% 12%);
  --warning-text:hsl(38 80% 56%);
  --warning-border:hsl(38 30% 24%);
  --danger-bg:hsl(0 40% 12%);
  --danger-text:hsl(0 75% 62%);
  --danger-border:hsl(0 30% 24%);
  --info-bg:hsl(199 40% 12%);
  --info-text:hsl(199 70% 54%);
  --info-border:hsl(199 30% 22%);

  /* ── Focus (dark) ── */
  --focus-ring: hsla(228, 90%, 70%, 0.35);
  --focus-ring-strong: hsla(228, 90%, 70%, 0.55);

  /* ── Shadows (dark) ── */
  --shadow-sm:inset 0 1px 0 hsla(0,0%,100%,.05),0 1px 2px hsla(220,40%,2%,.22),0 12px 24px hsla(220,40%,2%,.18);
  --shadow-md:inset 0 1px 0 hsla(0,0%,100%,.06),0 2px 6px hsla(220,40%,2%,.28),0 16px 32px hsla(220,40%,2%,.24);
  --shadow-lg:inset 0 1px 0 hsla(0,0%,100%,.08),0 6px 16px hsla(220,40%,2%,.34),0 28px 56px hsla(220,40%,2%,.28);
}

/* ── Global reset & base ── */
*{box-sizing:border-box}
html{scroll-behavior:smooth;max-width:100%;overflow-x:hidden}
body{max-width:100%;margin:0;overflow-x:hidden;background:var(--surface);color:var(--ink-2);font-family:var(--font-sans);-webkit-font-smoothing:antialiased}
button,a{font:inherit}a{color:inherit;text-decoration:none}button{color:inherit}

/* ── Focus visibility ── */
:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
  border-radius:var(--radius-sm);
}
:focus:not(:focus-visible){
  outline:none;
}

/* ── Skip link ── */
.skip-link{position:fixed;left:16px;top:-60px;z-index:10000;padding:10px 14px;border-radius:var(--radius-md);background:#fff;color:#111827;box-shadow:var(--shadow-lg)}.skip-link:focus{top:16px}

/* ── Reduced motion ── */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:0.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:0.01ms!important;
  }
  html{scroll-behavior:auto}
}

/* ── Utility: screen reader only ── */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ── Skeleton loading ── */
.skeleton{background:linear-gradient(90deg,var(--line) 25%,var(--soft) 50%,var(--line) 75%);background-size:200% 100%;animation:skeleton-shimmer 1.8s ease-in-out infinite;border-radius:var(--radius-md)}
@keyframes skeleton-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.skeleton-text{height:14px;margin-bottom:8px}.skeleton-text.wide{width:80%}.skeleton-text.narrow{width:45%}
.skeleton-heading{height:24px;width:60%;margin-bottom:16px}
.skeleton-card{min-height:160px}

/* ── Toast / notification messages ── */
.wgo-toast-container{position:fixed;bottom:24px;right:24px;z-index:10001;display:flex;flex-direction:column-reverse;gap:10px;pointer-events:none}
.wgo-toast{max-width:400px;padding:14px 18px;border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);font-size:14px;font-weight:600;line-height:1.45;pointer-events:auto;animation:wgo-toast-in .25s ease-out}
@keyframes wgo-toast-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.wgo-toast.success{background:var(--success-bg);color:var(--success-text);border:1px solid var(--success-border)}
.wgo-toast.warning{background:var(--warning-bg);color:var(--warning-text);border:1px solid var(--warning-border)}
.wgo-toast.error{background:var(--danger-bg);color:var(--danger-text);border:1px solid var(--danger-border)}
.wgo-toast.info{background:var(--info-bg);color:var(--info-text);border:1px solid var(--info-border)}

/* ── Inline status messages ── */
.wgo-notice{display:flex;align-items:flex-start;gap:10px;padding:14px 18px;border-radius:var(--radius-lg);font-size:14px;line-height:1.5;margin-bottom:16px}
.wgo-notice .wgo-notice-icon{flex-shrink:0;width:20px;height:20px;margin-top:1px}
.wgo-notice.success{background:var(--success-bg);color:var(--success-text);border:1px solid var(--success-border)}
.wgo-notice.warning{background:var(--warning-bg);color:var(--warning-text);border:1px solid var(--warning-border)}
.wgo-notice.error{background:var(--danger-bg);color:var(--danger-text);border:1px solid var(--danger-border)}
.wgo-notice.info{background:var(--info-bg);color:var(--info-text);border:1px solid var(--info-border)}