/* ============================================================
   APPLE LIQUID GLASS – DESIGN SYSTEM
   ArgOS · macOS 26 / iOS 26 Tahoe inspired
   ============================================================ */

:root {
  /* ─── Glass Materials ─────────────────────────────────── */
  --glass-ultra:    rgba(255, 255, 255, 0.05);
  --glass-thin:     rgba(255, 255, 255, 0.09);
  --glass-regular:  rgba(255, 255, 255, 0.13);
  --glass-thick:    rgba(255, 255, 255, 0.19);
  --glass-dark:     rgba(10, 10, 16, 0.82);
  --glass-dark-mid: rgba(18, 18, 26, 0.90);

  /* ─── Backdrop Blur Levels ────────────────────────────── */
  --blur-xs: blur(8px)  saturate(150%);
  --blur-sm: blur(16px) saturate(170%);
  --blur-md: blur(28px) saturate(180%);
  --blur-lg: blur(40px) saturate(200%) brightness(1.04);
  --blur-xl: blur(64px) saturate(220%) brightness(1.06);

  /* ─── Rim Lighting (specular highlights) ─────────────── */
  --rim-top:    rgba(255, 255, 255, 0.38);
  --rim-side:   rgba(255, 255, 255, 0.13);
  --rim-bottom: rgba(0,   0,   0,   0.16);

  /* ─── Shadows ─────────────────────────────────────────── */
  --shadow-xs: 0 1px 3px  rgba(0,0,0,0.22);
  --shadow-sm: 0 2px 8px  rgba(0,0,0,0.30), 0 1px 3px rgba(0,0,0,0.18);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.34), 0 1px 4px rgba(0,0,0,0.20);
  --shadow-lg: 0 12px 40px rgba(0,0,0,0.42), 0 3px 10px rgba(0,0,0,0.26);
  --shadow-xl: 0 24px 64px rgba(0,0,0,0.54), 0 6px 20px rgba(0,0,0,0.32);

  --shadow-panel:
    inset 0 1px 0 var(--rim-top),
    inset 0 -1px 0 var(--rim-bottom),
    var(--shadow-lg);

  --shadow-card:
    inset 0 1px 0 rgba(255,255,255,0.24),
    inset 0 -1px 0 rgba(0,0,0,0.10),
    var(--shadow-md);

  --shadow-dialog:
    inset 0 1px 0 rgba(255,255,255,0.44),
    inset 0 -1px 0 rgba(0,0,0,0.16),
    var(--shadow-xl);

  --shadow-pill:
    inset 0 1px 0 rgba(255,255,255,0.20),
    0 8px 32px rgba(0,0,0,0.48),
    0 2px 8px  rgba(0,0,0,0.30);

  /* ─── Border Radii ────────────────────────────────────── */
  --r-xs:   6px;
  --r-sm:   10px;
  --r-md:   14px;
  --r-lg:   20px;
  --r-xl:   28px;
  --r-2xl:  36px;
  --r-pill: 9999px;

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

  /* ─── Typography ──────────────────────────────────────── */
  --font-sans: "Lexend", -apple-system, BlinkMacSystemFont,
               "SF Pro Text", "Inter", "Helvetica Neue", sans-serif;
  --font-display: "Lexend", -apple-system, BlinkMacSystemFont,
                  "SF Pro Display", "Inter", "Helvetica Neue", sans-serif;
  --font-mono: "SF Mono", "JetBrains Mono", ui-monospace, monospace;

  /* ─── Colour Palette ──────────────────────────────────── */
  --c-text:     rgba(255, 255, 255, 1.00);
  --c-text-2:   rgba(255, 255, 255, 0.55);
  --c-text-3:   rgba(255, 255, 255, 0.35);
  --c-text-off: rgba(255, 255, 255, 0.22);

  --c-accent:      #4a9eff;
  --c-accent-hov:  #6ab8ff;
  --c-accent-dim:  rgba(74, 158, 255, 0.18);
  --c-accent-glow: rgba(74, 158, 255, 0.30);

  --c-success: #4ade80;
  --c-warning: #fbbf24;
  --c-danger:  #f87171;

  /* ─── Motion ──────────────────────────────────────────── */
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth:  cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out:     cubic-bezier(0.00, 0.00, 0.20, 1.00);
  --ease-in-out:  cubic-bezier(0.40, 0.00, 0.20, 1.00);
  --dur-fast:  130ms;
  --dur-med:   230ms;
  --dur-slow:  400ms;

  /* ─── Layout ──────────────────────────────────────────── */
  --topbar-height: 52px;
  --drawer-width:  240px;
}

/* ─── Keyframes ───────────────────────────────────────────── */
@keyframes glass-fade-up {
  from { opacity: 0; transform: translateY(20px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0)    scale(1.00); }
}

@keyframes glass-scale-in {
  from { opacity: 0; transform: scale(0.88); }
  to   { opacity: 1; transform: scale(1.00); }
}

@keyframes glass-float {
  0%, 100% { transform: translateY(0);   }
  50%       { transform: translateY(-6px); }
}

@keyframes glass-shimmer {
  from { background-position: -200% center; }
  to   { background-position:  200% center; }
}

@keyframes glass-glow-pulse {
  0%, 100% { box-shadow: 0 0 0 0   var(--c-accent-glow); }
  50%       { box-shadow: 0 0 0 10px transparent; }
}

/* ─── Scrollbar ───────────────────────────────────────────── */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.14) transparent;
}
*::-webkit-scrollbar          { width: 5px; height: 5px; }
*::-webkit-scrollbar-track    { background: transparent; }
*::-webkit-scrollbar-corner   { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.13);
  border-radius: var(--r-pill);
  transition: background var(--dur-fast) var(--ease-out);
}
*::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.26); }

/* ─── Glass Utility Classes ───────────────────────────────── */

/* Panel – major opaque surface (sidebars, overlays) */
.glass-panel {
  background: var(--glass-thin);
  backdrop-filter: var(--blur-lg);
  -webkit-backdrop-filter: var(--blur-lg);
  border-top:    1px solid var(--rim-top);
  border-left:   1px solid var(--rim-side);
  border-right:  1px solid var(--rim-side);
  border-bottom: 1px solid var(--rim-bottom);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-panel);
}

/* Card – interactive tile */
.glass-card {
  background: var(--glass-thin);
  backdrop-filter: var(--blur-md);
  -webkit-backdrop-filter: var(--blur-md);
  border-top:    1px solid rgba(255,255,255,0.22);
  border-left:   1px solid var(--rim-side);
  border-right:  1px solid var(--rim-side);
  border-bottom: 1px solid var(--rim-bottom);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-card);
  transition:
    transform    var(--dur-med) var(--ease-spring),
    box-shadow   var(--dur-med) var(--ease-smooth);
}
.glass-card:hover {
  transform:  translateY(-3px) scale(1.01);
  box-shadow: var(--shadow-panel);
}

/* Surface – modal / dialog */
.glass-surface {
  background: var(--glass-thick);
  backdrop-filter: var(--blur-xl);
  -webkit-backdrop-filter: var(--blur-xl);
  border-top:    1px solid var(--rim-top);
  border-left:   1px solid var(--rim-side);
  border-right:  1px solid var(--rim-side);
  border-bottom: 1px solid var(--rim-bottom);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-dialog);
}

/* Dark glass – dropdowns, menus */
.glass-dark {
  background: var(--glass-dark);
  backdrop-filter: var(--blur-md);
  -webkit-backdrop-filter: var(--blur-md);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
}

/* Pill – compact badge / nav item */
.glass-pill {
  background: var(--glass-thin);
  backdrop-filter: var(--blur-md);
  -webkit-backdrop-filter: var(--blur-md);
  border-top:    1px solid rgba(255,255,255,0.22);
  border-left:   1px solid var(--rim-side);
  border-right:  1px solid var(--rim-side);
  border-bottom: 1px solid var(--rim-bottom);
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-pill);
}

/* Gradient rim effect – Apple's authentic animated border */
.glass-rim {
  position: relative;
  isolation: isolate;
}
.glass-rim::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    155deg,
    rgba(255,255,255,0.40) 0%,
    rgba(255,255,255,0.10) 35%,
    rgba(255,255,255,0.02) 55%,
    rgba(255,255,255,0.14) 100%
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box,
                linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 1;
}

/* ─── Animation Utilities ─────────────────────────────────── */
.anim-fade-up  { animation: glass-fade-up  var(--dur-slow) var(--ease-spring) both; }
.anim-scale-in { animation: glass-scale-in var(--dur-med)  var(--ease-spring) both; }
.anim-float    { animation: glass-float    4s ease-in-out infinite; }

/* Staggered children */
.anim-children > *:nth-child(1) { animation-delay: 0ms; }
.anim-children > *:nth-child(2) { animation-delay: 60ms; }
.anim-children > *:nth-child(3) { animation-delay: 120ms; }
.anim-children > *:nth-child(4) { animation-delay: 180ms; }
.anim-children > *:nth-child(5) { animation-delay: 240ms; }
.anim-children > *:nth-child(6) { animation-delay: 300ms; }
.anim-children > *:nth-child(7) { animation-delay: 360ms; }
.anim-children > *:nth-child(8) { animation-delay: 420ms; }

/* ─── Focus Ring ──────────────────────────────────────────── */
*:focus-visible {
  outline: 2px solid var(--c-accent) !important;
  outline-offset: 3px !important;
  border-radius: 4px;
}