/* =========================================================
   Glass Network — Master Design Tokens (v5.0)
   ---------------------------------------------------------
   Default theme: LIGHT glassmorphism (bright, airy)
   Alternate: DARK glassmorphism (toggle via [data-theme="dark"])

   Override any token via :root.custom-theme { ... } for
   per-page tweaks.
   ========================================================= */

/* =======================================================
   DEFAULT — LIGHT THEME
   ======================================================= */
:root {
  /* Aurora palette — bright airy day */
  --c-bg-1: #e8efff;       /* very light periwinkle */
  --c-bg-2: #d8e3ff;       /* light blue-lavender */
  --c-bg-3: #c9d8ff;       /* soft sky */

  /* Accent colors */
  --c-accent-1: #6d5efc;   /* electric indigo (primary) */
  --c-accent-2: #00a8d4;   /* deep cyan (good contrast on light) */
  --c-accent-3: #ff5fa2;   /* magenta-pink */
  --c-accent-4: #10b981;   /* success green */
  --c-danger:   #ef4444;
  --c-warn:     #f59e0b;

  /* Glass surfaces — light glass */
  --glass-bg:           rgba(255, 255, 255, 0.55);
  --glass-bg-strong:    rgba(255, 255, 255, 0.75);
  --glass-border:       rgba(255, 255, 255, 0.7);
  --glass-shadow:       0 8px 32px rgba(80, 100, 160, 0.18);
  --glass-blur:         22px;

  /* Brand name gradient — indigo to blue for contrast on light bg */
  --brand-name-gradient: linear-gradient(135deg, #6d5efc 0%, #00a8d4 100%);

  /* Topbar / navbar backgrounds — frosted white for light theme */
  --topbar-bg: rgba(255, 255, 255, 0.55);
  --navbar-bg: rgba(255, 255, 255, 0.55);
  --drawer-bg: linear-gradient(180deg, #ffffff 0%, #e8efff 100%);

  /* Text — dark text on light bg */
  --text-primary:   #1a1f3a;
  --text-secondary: rgba(26, 31, 58, 0.72);
  --text-muted:     rgba(26, 31, 58, 0.5);

  /* Radii */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-pill: 999px;

  /* Motion */
  --ease:        cubic-bezier(0.22, 1, 0.36, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:    0.2s;
  --dur:         0.45s;
  --dur-slow:    0.7s;

  /* iOS safe-area insets */
  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left:   env(safe-area-inset-left, 0px);
  --safe-right:  env(safe-area-inset-right, 0px);

  /* Tap target (Apple HIG minimum 44px) */
  --tap-min: 44px;

  /* Typography */
  --font-body:    -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", "Inter", "Helvetica Neue", "Noto Sans SC", Roboto, system-ui, sans-serif;
  --font-mono:    "SF Mono", "JetBrains Mono", "Consolas", "Monaco", monospace;

  --fs-xs:  11px;
  --fs-sm:  13px;
  --fs-md:  14px;
  --fs-lg:  16px;
  --fs-xl:  20px;
  --fs-2xl: 26px;
  --fs-3xl: 36px;

  --lh-tight: 1.2;
  --lh-base:  1.5;
  --lh-relax: 1.7;

  /* Layout */
  --sidebar-w: 260px;
  --topbar-h:  56px;
  --navbar-bawah-h: 64px;

  /* Z-index */
  --z-bg:       -2;
  --z-bg-orb:   -1;
  --z-base:     1;
  --z-card:     10;
  --z-topbar:   200;
  --z-navbar:   200;
  --z-drawer:   301;
  --z-modal:    500;
  --z-popup:    600;
  --z-toast:    1000;

  /* Spacing (8-point grid) */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;

  /* Default color-scheme for native form controls */
  color-scheme: light;
}

/* =======================================================
   DARK THEME — applied via [data-theme="dark"] on <html>
   ======================================================= */
html[data-theme="dark"] {
  --c-bg-1: #0b1026;
  --c-bg-2: #1b1147;
  --c-bg-3: #2a1a5e;

  --c-accent-1: #6d5efc;
  --c-accent-2: #00d4ff;
  --c-accent-3: #ff5fa2;
  --c-accent-4: #4ade80;
  --c-danger:   #ff4d6d;
  --c-warn:     #fbbf24;

  --glass-bg:           rgba(255, 255, 255, 0.08);
  --glass-bg-strong:    rgba(255, 255, 255, 0.14);
  --glass-border:       rgba(255, 255, 255, 0.18);
  --glass-shadow:       0 8px 32px rgba(0, 0, 0, 0.45);

  /* Brand name gradient — white to light blue on dark bg */
  --brand-name-gradient: linear-gradient(135deg, #fff 0%, #b8c4ff 100%);

  /* Topbar / navbar backgrounds — frosted dark for dark theme */
  --topbar-bg: rgba(11, 16, 38, 0.6);
  --navbar-bg: rgba(11, 16, 38, 0.7);
  --drawer-bg: linear-gradient(180deg, #1b1147 0%, #0b1026 100%);

  --text-primary:   #f5f7ff;
  --text-secondary: rgba(245, 247, 255, 0.72);
  --text-muted:     rgba(245, 247, 255, 0.5);

  color-scheme: dark;
}

/* Auto dark mode if user has no manual preference and prefers dark */
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]):not([data-theme="dark"]) {
    --c-bg-1: #0b1026;
    --c-bg-2: #1b1147;
    --c-bg-3: #2a1a5e;

    --c-accent-2: #00d4ff;

    --glass-bg:           rgba(255, 255, 255, 0.08);
    --glass-bg-strong:    rgba(255, 255, 255, 0.14);
    --glass-border:       rgba(255, 255, 255, 0.18);
    --glass-shadow:       0 8px 32px rgba(0, 0, 0, 0.45);

    --brand-name-gradient: linear-gradient(135deg, #fff 0%, #b8c4ff 100%);

    --topbar-bg: rgba(11, 16, 38, 0.6);
    --navbar-bg: rgba(11, 16, 38, 0.7);
    --drawer-bg: linear-gradient(180deg, #1b1147 0%, #0b1026 100%);

    --text-primary:   #f5f7ff;
    --text-secondary: rgba(245, 247, 255, 0.72);
    --text-muted:     rgba(245, 247, 255, 0.5);

    color-scheme: dark;
  }
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  :root,
  html[data-theme="dark"] {
    --dur:       0.01ms;
    --dur-fast:  0.01ms;
    --dur-slow:  0.01ms;
    --ease:      steps(1);
  }
}

/* =======================================================
   Smooth theme transition
   ======================================================= */
html, body, .bg-aurora, .bg-orb, .card, .topbar, .sidebar,
.navbar-bawah, .drawer, .qr-popup, .field__input, .btn,
.alert, .row, .info-item, .paket-card, .faq-item, .server-info-toggle,
.mikhmon-widget, .trial-banner, .field__toggle, .field__scan-btn,
.qr-popup__status, .qr-popup__success, .topbar__btn {
  transition-property: background-color, color, border-color, box-shadow;
  transition-duration: 0.4s;
  transition-timing-function: var(--ease);
}