/* lobee-nebula.css — full-page nebula wash (iOS Safari–friendlier)
 * Usage: after lobee.css:
 *   <link href="/assets/css/lobee-nebula.css" rel="stylesheet">
 */

html {
  min-height: 100%;
  background-color: var(--color-canvas);
}

body {
  background-color: var(--color-canvas);
  background-image:
    radial-gradient(ellipse 90% 70% at 12% 8%, rgba(99, 102, 241, 0.16), transparent 55%),
    radial-gradient(ellipse 80% 65% at 88% 35%, rgba(56, 189, 248, 0.12), transparent 52%),
    radial-gradient(ellipse 70% 55% at 50% 95%, rgba(167, 139, 250, 0.11), transparent 58%),
    radial-gradient(ellipse 50% 40% at 70% 70%, rgba(244, 114, 182, 0.07), transparent 55%);
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  z-index: auto;
  isolation: auto;
}

[data-theme="dark"] body {
  background-image:
    radial-gradient(ellipse 90% 70% at 12% 8%, rgba(129, 140, 248, 0.22), transparent 55%),
    radial-gradient(ellipse 80% 65% at 88% 35%, rgba(56, 189, 248, 0.15), transparent 52%),
    radial-gradient(ellipse 70% 55% at 50% 95%, rgba(167, 139, 250, 0.15), transparent 58%),
    radial-gradient(ellipse 50% 40% at 70% 70%, rgba(244, 114, 182, 0.09), transparent 55%);
}

body::before { content: none; }

body::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.045;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

[data-theme="dark"] body::after { opacity: 0.07; }

@supports (-webkit-touch-callout: none) {
  body { background-attachment: scroll; }
}

.site-header {
  background: rgba(236, 239, 243, 0.48);
  -webkit-backdrop-filter: blur(16px) saturate(1.15);
  backdrop-filter: blur(16px) saturate(1.15);
  border-bottom-color: rgba(31, 35, 40, 0.08);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.45) inset,
    0 1px 10px rgba(31, 35, 40, 0.04);
}

[data-theme="dark"] .site-header {
  background: rgba(11, 22, 36, 0.45);
  border-bottom-color: rgba(255, 255, 255, 0.06);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.05) inset,
    0 2px 14px rgba(0, 0, 0, 0.28);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .site-header {
    background: rgba(11, 22, 36, 0.45);
    border-bottom-color: rgba(255, 255, 255, 0.06);
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.05) inset,
      0 2px 14px rgba(0, 0, 0, 0.28);
  }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header { background: rgba(236, 239, 243, 0.7); }
  [data-theme="dark"] .site-header { background: rgba(11, 22, 36, 0.7); }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme]) .site-header { background: rgba(11, 22, 36, 0.7); }
  }
}

/* ─── Buttons — nebula-tuned 3D ─────────────────────────────────────────────
 * Slightly more translucent faces (light mode lavender-tinted); no outer glow.
 * Shadows stay close to lobee.css 3D depth (inset + side). Tokens only —
 * shared :is(.btn-3d, …) rules in lobee.css pick these up unchanged.
 */

/* Light (default :root and explicit light) */
:root,
[data-theme="light"] {
  /* Soft lavender-tinted glass faces (light / white mode) */
  --btn-3d-face-top:        rgba(248, 246, 255, 0.55);
  --btn-3d-face-bottom:     rgba(232, 236, 252, 0.50);
  --btn-3d-side:            rgba(79, 70, 160, 0.20);
  --btn-3d-border:          rgba(99, 102, 241, 0.18);
  --btn-3d-highlight:       rgba(255, 255, 255, 0.70);

  /* Accent CTAs — original blues */
  --btn-3d-accent-top:      #2F76D5;
  --btn-3d-accent-bottom:   #1F5FA8;
  --btn-3d-accent-side:     #16467C;
  --btn-3d-accent-border:   #16467C;
  --btn-3d-accent-highlight:rgba(255, 255, 255, 0.38);

  --btn-3d-shadow-raised:
    inset 0 1px 0 var(--btn-3d-highlight),
    inset 0 -1px 0 rgba(79, 70, 160, 0.06),
    0 1px 2px rgba(79, 70, 160, 0.06),
    0 var(--btn-3d-depth) 0 var(--btn-3d-side);
  --btn-3d-shadow-raised-sm:
    inset 0 1px 0 var(--btn-3d-highlight),
    inset 0 -1px 0 rgba(79, 70, 160, 0.06),
    0 1px 2px rgba(79, 70, 160, 0.05),
    0 var(--btn-3d-depth-sm) 0 rgba(79, 70, 160, 0.18);
  --btn-3d-shadow-accent-raised:
    inset 0 1px 0 var(--btn-3d-accent-highlight),
    inset 0 -1px 0 rgba(0, 0, 0, 0.14),
    0 1px 2px rgba(31, 35, 40, 0.10),
    0 var(--btn-3d-depth) 0 rgba(22, 70, 124, 0.78);
  --btn-3d-shadow-raised-framed:
    var(--btn-3d-shadow-raised),
    inset 0 0 0 1px rgba(99, 102, 241, 0.08);
}

/* Dark — explicit theme */
[data-theme="dark"] {
  /* Semi-transparent deep navy glass — a touch more see-through */
  --btn-3d-face-top:        rgba(17, 31, 50, 0.58);
  --btn-3d-face-bottom:     rgba(11, 22, 36, 0.64);
  --btn-3d-side:            rgba(0, 0, 0, 0.78);
  --btn-3d-side-step:       rgba(110, 168, 255, 0.16);
  --btn-3d-ambient:         rgba(110, 168, 255, 0.12);
  --btn-3d-border:          rgba(229, 232, 243, 0.12);
  --btn-3d-highlight:       rgba(255, 255, 255, 0.10);
  --btn-3d-hover-top:       rgba(21, 42, 67, 0.68);
  --btn-3d-hover-bottom:    rgba(15, 30, 49, 0.74);
  --btn-3d-hover-border:    #3F79C7;
  --btn-3d-border-frame:    rgba(0, 0, 0, 0.55);

  /* Accent — original blues */
  --btn-3d-accent-top:      #2F76D5;
  --btn-3d-accent-bottom:   #1F5FA8;
  --btn-3d-accent-side:     #16467C;
  --btn-3d-accent-side-step:#B2C0D3;
  --btn-3d-accent-ambient:  rgba(110, 168, 255, 0.24);
  --btn-3d-accent-border:   #143A66;
  --btn-3d-accent-highlight:rgba(255, 255, 255, 0.32);

  --btn-3d-shadow-raised:
    inset 0 1px 0 var(--btn-3d-highlight),
    inset 0 -1px 0 rgba(0, 0, 0, 0.22),
    0 1px 2px rgba(0, 0, 0, 0.22),
    0 var(--btn-3d-depth) 0 var(--btn-3d-side),
    0 calc(var(--btn-3d-depth) + 1px) 0 rgba(0, 0, 0, 0.32);
  --btn-3d-shadow-raised-sm:
    inset 0 1px 0 var(--btn-3d-highlight),
    inset 0 -1px 0 rgba(0, 0, 0, 0.22),
    0 1px 2px rgba(0, 0, 0, 0.18),
    0 var(--btn-3d-depth-sm) 0 rgba(0, 0, 0, 0.60),
    0 calc(var(--btn-3d-depth-sm) + 1px) 0 rgba(0, 0, 0, 0.28);
  --btn-3d-shadow-accent-raised:
    inset 0 1px 0 var(--btn-3d-accent-highlight),
    inset 0 -1px 0 rgba(0, 0, 0, 0.24),
    0 1px 2px rgba(0, 0, 0, 0.22),
    0 var(--btn-3d-depth) 0 rgba(22, 70, 124, 0.84),
    0 calc(var(--btn-3d-depth) + 1px) 0 rgba(0, 0, 0, 0.28);
  --btn-3d-shadow-raised-framed:
    var(--btn-3d-shadow-raised),
    inset 0 0 0 1px rgba(0, 0, 0, 0.35);

  /* Header pills stay in sync with global 3D faces */
  --btn-3d-header-face-top:   var(--btn-3d-face-top);
  --btn-3d-header-face-bottom:var(--btn-3d-face-bottom);
  --btn-3d-header-side:       var(--btn-3d-side);
  --btn-3d-header-side-step:  var(--btn-3d-side-step);
  --btn-3d-header-ambient:    var(--btn-3d-ambient);
  --btn-3d-header-border:     var(--btn-3d-border);
  --btn-3d-header-highlight:  var(--btn-3d-highlight);
}

/* System dark when no explicit data-theme */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --btn-3d-face-top:        rgba(17, 31, 50, 0.58);
    --btn-3d-face-bottom:     rgba(11, 22, 36, 0.64);
    --btn-3d-side:            rgba(0, 0, 0, 0.78);
    --btn-3d-side-step:       rgba(110, 168, 255, 0.16);
    --btn-3d-ambient:         rgba(110, 168, 255, 0.12);
    --btn-3d-border:          rgba(229, 232, 243, 0.12);
    --btn-3d-highlight:       rgba(255, 255, 255, 0.10);
    --btn-3d-hover-top:       rgba(21, 42, 67, 0.68);
    --btn-3d-hover-bottom:    rgba(15, 30, 49, 0.74);
    --btn-3d-hover-border:    #3F79C7;
    --btn-3d-border-frame:    rgba(0, 0, 0, 0.55);

    --btn-3d-accent-top:      #2F76D5;
    --btn-3d-accent-bottom:   #1F5FA8;
    --btn-3d-accent-side:     #16467C;
    --btn-3d-accent-side-step:#B2C0D3;
    --btn-3d-accent-ambient:  rgba(110, 168, 255, 0.24);
    --btn-3d-accent-border:   #143A66;
    --btn-3d-accent-highlight:rgba(255, 255, 255, 0.32);

    --btn-3d-shadow-raised:
      inset 0 1px 0 var(--btn-3d-highlight),
      inset 0 -1px 0 rgba(0, 0, 0, 0.22),
      0 1px 2px rgba(0, 0, 0, 0.22),
      0 var(--btn-3d-depth) 0 var(--btn-3d-side),
      0 calc(var(--btn-3d-depth) + 1px) 0 rgba(0, 0, 0, 0.32);
    --btn-3d-shadow-raised-sm:
      inset 0 1px 0 var(--btn-3d-highlight),
      inset 0 -1px 0 rgba(0, 0, 0, 0.22),
      0 1px 2px rgba(0, 0, 0, 0.18),
      0 var(--btn-3d-depth-sm) 0 rgba(0, 0, 0, 0.60),
      0 calc(var(--btn-3d-depth-sm) + 1px) 0 rgba(0, 0, 0, 0.28);
    --btn-3d-shadow-accent-raised:
      inset 0 1px 0 var(--btn-3d-accent-highlight),
      inset 0 -1px 0 rgba(0, 0, 0, 0.24),
      0 1px 2px rgba(0, 0, 0, 0.22),
      0 var(--btn-3d-depth) 0 rgba(22, 70, 124, 0.84),
      0 calc(var(--btn-3d-depth) + 1px) 0 rgba(0, 0, 0, 0.28);
    --btn-3d-shadow-raised-framed:
      var(--btn-3d-shadow-raised),
      inset 0 0 0 1px rgba(0, 0, 0, 0.35);

    --btn-3d-header-face-top:   var(--btn-3d-face-top);
    --btn-3d-header-face-bottom:var(--btn-3d-face-bottom);
    --btn-3d-header-side:       var(--btn-3d-side);
    --btn-3d-header-side-step:  var(--btn-3d-side-step);
    --btn-3d-header-ambient:    var(--btn-3d-ambient);
    --btn-3d-header-border:     var(--btn-3d-border);
    --btn-3d-header-highlight:  var(--btn-3d-highlight);
  }
}