/* ============================================================
   OFFNET PRO — THEME TOKENS
   Default: dark. Toggle via [data-theme="light"] on <html>.
   ============================================================ */

:root,
[data-theme="dark"] {
  --nav-height:   66px;
  /* Backgrounds — deep midnight obsidian (subtly lifted above full black) */
  --bg:           #06080e;
  --bg-alt:       #0a0d15;
  --surface:      #0f131f;
  --surface-2:    #141928;
  --surface-hover:#1a2134;

  /* Borders */
  --border:       rgba(255, 255, 255, 0.075);
  --border-hover: rgba(255, 255, 255, 0.17);
  --border-focus: rgba(255, 255, 255, 0.36);

  /* Text */
  --text:         #eeeef5;
  --text-muted:   rgba(238, 238, 245, 0.62);
  --text-faint:   rgba(238, 238, 245, 0.38);

  /* Accent — pure white on dark */
  --accent:       #ffffff;
  --accent-alt:   rgba(255, 255, 255, 0.90);
  --accent-dim:   rgba(255, 255, 255, 0.06);
  --accent-glow:  rgba(255, 255, 255, 0.03);

  /* Status colors */
  --status-good:  #4ade80;
  --status-warn:  #f59e0b;
  --status-bad:   #f87171;

  /* Nav */
  --nav-bg:       rgba(6, 8, 14, 0.85);

  /* Shadows */
  --shadow-sm:    0 1px 8px rgba(0,0,0,0.40);
  --shadow:       0 4px 24px rgba(0,0,0,0.55);
  --shadow-lg:    0 16px 64px rgba(0,0,0,0.70);
  --shadow-card:  0 2px 16px rgba(0,0,0,0.50);

  /* Hero pure ambient gradient */
  --hero-gradient:
    radial-gradient(ellipse 70% 60% at 75% 25%, rgba(18, 48, 138, 0.17) 0%, rgba(14, 36, 110, 0.07) 45%, transparent 70%),
    radial-gradient(ellipse 55% 50% at 20% 25%, rgba(15, 38, 115, 0.11) 0%, transparent 60%),
    radial-gradient(ellipse 80% 45% at 50% 0%, rgba(16, 42, 125, 0.11) 0%, transparent 60%),
    linear-gradient(180deg, rgba(6, 10, 22, 0.55) 0%, transparent 60%);

  /* Gradient text */
  --gradient-text: linear-gradient(135deg, #ffffff 0%, rgba(255,255,255,0.70) 100%);

  /* Table highlight */
  --table-highlight: rgba(255,255,255,0.04);
  --col-highlight:   rgba(255,255,255,0.06);
}

[data-theme="light"] {
  /* Backgrounds — not full white, soft cool cloud mist */
  --bg:           #e9ecf2;
  --bg-alt:       #dfe3ed;
  --surface:      #f2f4f8;
  --surface-2:    #e3e7f1;
  --surface-hover:#d5dbe8;

  /* Borders */
  --border:       rgba(0, 0, 0, 0.08);
  --border-hover: rgba(0, 0, 0, 0.18);
  --border-focus: rgba(0, 0, 0, 0.38);

  /* Text */
  --text:         #0a0a14;
  --text-muted:   rgba(10, 10, 20, 0.62);
  --text-faint:   rgba(10, 10, 20, 0.38);

  /* Accent — pure black on light */
  --accent:       #0a0a14;
  --accent-alt:   rgba(10, 10, 20, 0.90);
  --accent-dim:   rgba(10, 10, 20, 0.05);
  --accent-glow:  rgba(10, 10, 20, 0.02);

  /* Status colors (same) */
  --status-good:  #16a34a;
  --status-warn:  #b45309;
  --status-bad:   #dc2626;

  /* Nav */
  --nav-bg:       rgba(233, 236, 242, 0.88);

  /* Shadows */
  --shadow-sm:    0 1px 8px rgba(0,0,0,0.06);
  --shadow:       0 4px 24px rgba(0,0,0,0.09);
  --shadow-lg:    0 16px 64px rgba(0,0,0,0.12);
  --shadow-card:  0 2px 16px rgba(0,0,0,0.07);

  /* Hero pure ambient gradient — crisp ice-blue wash */
  --hero-gradient:
    radial-gradient(ellipse 70% 60% at 75% 25%, rgba(96, 165, 250, 0.14) 0%, rgba(56, 189, 248, 0.06) 45%, transparent 70%),
    radial-gradient(ellipse 55% 50% at 20% 25%, rgba(56, 189, 248, 0.10) 0%, transparent 60%),
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(37, 99, 235, 0.10) 0%, transparent 65%),
    linear-gradient(180deg, rgba(215, 226, 244, 0.65) 0%, transparent 60%);

  /* Gradient text */
  --gradient-text: linear-gradient(135deg, #0a0a14 0%, rgba(10,10,20,0.70) 100%);

  /* Table */
  --table-highlight: rgba(0,0,0,0.02);
  --col-highlight:   rgba(0,0,0,0.03);
}

/* Smooth theme transitions — background, border, and shadows only.
   (Excluding color from global * prevents macOS subpixel font dilation jiggle on theme toggle) */
*,
*::before,
*::after {
  transition:
    background-color 0.25s ease,
    border-color     0.25s ease,
    box-shadow       0.25s ease;
}

/* But don't animate layout or transforms globally */
*:not(.reveal):not(.btn):not(.nav__link):not(.lang-btn):not(.theme-toggle):not(.card):not(.feature) {
  transition-property: background-color, border-color, box-shadow;
}