/* Bitlog Web style pack
   - Hooks: html[data-ui-style="<style>"][data-theme="light|dark"]
   - Constraint: keep layout intact (tokens + cosmetics only)
*/

/* -------- Classic -------- */
html[data-ui-style="classic"] {
  --bg: #f8fafc;
  --bg-soft: #f1f5f9;
  --surface: rgba(255, 255, 255, 0.86);
  --surface-2: rgba(15, 23, 42, 0.03);
  --text: rgba(15, 23, 42, 0.92);
  --muted: rgba(15, 23, 42, 0.68);
  --border: rgba(15, 23, 42, 0.12);

  --primary: #16a34a;
  --primary-700: #166534;
  --primary-100: rgba(22, 163, 74, 0.14);
  --focus: 0 0 0 3px rgba(22, 163, 74, 0.22);

  --radius: 18px;
  --radius-sm: 14px;
  --shadow: 0 18px 48px rgba(15, 23, 42, 0.1);
  --shadow-soft: 0 10px 28px rgba(15, 23, 42, 0.08);

  --bg-glow-1: rgba(22, 163, 74, 0.16);
  --bg-glow-2: rgba(56, 189, 248, 0.14);
  --bg-glow-3: rgba(34, 197, 94, 0.08);
}

html[data-ui-style="classic"][data-theme="dark"] {
  --bg: #020617;
  --bg-soft: #0b1224;
  --surface: rgba(15, 23, 42, 0.72);
  --surface-2: rgba(255, 255, 255, 0.04);
  --text: rgba(248, 250, 252, 0.92);
  --muted: rgba(248, 250, 252, 0.72);
  --border: rgba(255, 255, 255, 0.12);

  --primary: #22c55e;
  --primary-700: #86efac;
  --primary-100: rgba(34, 197, 94, 0.18);
  --focus: 0 0 0 3px rgba(34, 197, 94, 0.22);

  --shadow: 0 18px 48px rgba(0, 0, 0, 0.55);
  --shadow-soft: 0 10px 28px rgba(0, 0, 0, 0.35);
  --bg-glow-1: rgba(34, 197, 94, 0.14);
  --bg-glow-2: rgba(56, 189, 248, 0.14);
  --bg-glow-3: rgba(34, 197, 94, 0.08);
}

html[data-ui-style="classic"] .brand,
html[data-ui-style="classic"] .hero-title {
  background: linear-gradient(
    90deg,
    var(--primary),
    color-mix(in srgb, var(--primary) 35%, #38bdf8)
  );
  -webkit-background-clip: text;
  color: transparent;
}

html[data-ui-style="classic"] .btn.primary {
  background: linear-gradient(
    120deg,
    var(--primary),
    color-mix(in srgb, var(--primary) 35%, #38bdf8)
  );
  box-shadow: 0 10px 18px color-mix(in srgb, var(--primary) 25%, transparent);
}

/* -------- Glass -------- */
html[data-ui-style="glass"] {
  --bg: #f6f7ff;
  --bg-soft: #eef2ff;
  --surface: rgba(255, 255, 255, 0.7);
  --surface-2: rgba(15, 23, 42, 0.03);
  --text: rgba(15, 23, 42, 0.92);
  --muted: rgba(15, 23, 42, 0.68);
  --border: rgba(15, 23, 42, 0.12);

  --primary: #6366f1;
  --primary-700: #4338ca;
  --primary-100: rgba(99, 102, 241, 0.14);
  --focus: 0 0 0 3px rgba(99, 102, 241, 0.22);

  --radius: 20px;
  --radius-sm: 16px;
  --shadow: 0 18px 54px rgba(15, 23, 42, 0.12);
  --shadow-soft: 0 10px 30px rgba(15, 23, 42, 0.08);

  --bg-glow-1: rgba(99, 102, 241, 0.18);
  --bg-glow-2: rgba(56, 189, 248, 0.14);
  --bg-glow-3: rgba(139, 92, 246, 0.1);
}

html[data-ui-style="glass"][data-theme="dark"] {
  --bg: #0b1022;
  --bg-soft: #0f1730;
  --surface: rgba(255, 255, 255, 0.06);
  --surface-2: rgba(255, 255, 255, 0.04);
  --text: rgba(248, 250, 252, 0.92);
  --muted: rgba(248, 250, 252, 0.72);
  --border: rgba(255, 255, 255, 0.14);

  --primary: #8b5cf6;
  --primary-700: #c4b5fd;
  --primary-100: rgba(139, 92, 246, 0.18);
  --focus: 0 0 0 3px rgba(139, 92, 246, 0.22);

  --shadow: 0 18px 54px rgba(0, 0, 0, 0.45);
  --shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.28);
  --bg-glow-1: rgba(139, 92, 246, 0.18);
  --bg-glow-2: rgba(56, 189, 248, 0.12);
  --bg-glow-3: rgba(99, 102, 241, 0.12);
}

html[data-ui-style="glass"] .brand,
html[data-ui-style="glass"] .hero-title {
  background: linear-gradient(
    90deg,
    var(--primary),
    color-mix(in srgb, var(--primary) 45%, #60a5fa)
  );
  -webkit-background-clip: text;
  color: transparent;
}

html[data-ui-style="glass"] .btn.primary {
  background: linear-gradient(
    120deg,
    var(--primary),
    color-mix(in srgb, var(--primary) 45%, #60a5fa)
  );
  box-shadow: 0 10px 18px color-mix(in srgb, var(--primary) 22%, transparent);
}

/* -------- Brutal -------- */
html[data-ui-style="brutal"] {
  --bg: #fff7ed;
  --bg-soft: #ffedd5;
  --surface: #ffffff;
  --surface-2: #ffffff;
  --text: #111827;
  --muted: rgba(17, 24, 39, 0.7);
  --border: #111827;

  --primary: #ef4444;
  --primary-700: #b91c1c;
  --primary-100: rgba(239, 68, 68, 0.16);
  --focus: 0 0 0 3px rgba(17, 24, 39, 0.22);

  --radius: 4px;
  --radius-sm: 4px;
  --shadow: 6px 6px 0 rgba(17, 24, 39, 0.88);
  --shadow-soft: 4px 4px 0 rgba(17, 24, 39, 0.65);

  --bg-glow-1: rgba(0, 0, 0, 0);
  --bg-glow-2: rgba(0, 0, 0, 0);
  --bg-glow-3: rgba(0, 0, 0, 0);
}

html[data-ui-style="brutal"][data-theme="dark"] {
  --bg: #0b0b0b;
  --bg-soft: #111111;
  --surface: #111111;
  --surface-2: #111111;
  --text: #f9fafb;
  --muted: rgba(249, 250, 251, 0.7);
  --border: rgba(249, 250, 251, 0.85);

  --primary: #f59e0b;
  --primary-700: #fde68a;
  --primary-100: rgba(245, 158, 11, 0.22);
  --focus: 0 0 0 3px rgba(245, 158, 11, 0.22);

  --shadow: 6px 6px 0 rgba(249, 250, 251, 0.7);
  --shadow-soft: 4px 4px 0 rgba(249, 250, 251, 0.45);
}

html[data-ui-style="brutal"] .brand,
html[data-ui-style="brutal"] .hero-title {
  background: none;
  -webkit-background-clip: initial;
  color: var(--text);
}

html[data-ui-style="brutal"] .btn.primary {
  background: var(--primary);
  color: #fff;
  border-color: var(--border);
  box-shadow: var(--shadow);
}

/* -------- Terminal -------- */
html[data-ui-style="terminal"] {
  --font: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New",
    monospace;

  --bg: #f8fafc;
  --bg-soft: #eef2f7;
  --surface: rgba(255, 255, 255, 0.9);
  --surface-2: rgba(15, 23, 42, 0.03);
  --text: rgba(2, 6, 23, 0.92);
  --muted: rgba(2, 6, 23, 0.68);
  --border: rgba(2, 6, 23, 0.18);

  --primary: #16a34a;
  --primary-700: #166534;
  --primary-100: rgba(22, 163, 74, 0.12);
  --focus: 0 0 0 3px rgba(22, 163, 74, 0.22);

  --radius: 10px;
  --radius-sm: 10px;
  --shadow: 0 16px 42px rgba(2, 6, 23, 0.12);
  --shadow-soft: 0 10px 26px rgba(2, 6, 23, 0.08);

  --bg-glow-1: rgba(22, 163, 74, 0.14);
  --bg-glow-2: rgba(56, 189, 248, 0.1);
  --bg-glow-3: rgba(22, 163, 74, 0.06);
}

html[data-ui-style="terminal"][data-theme="dark"] {
  --bg: #020617;
  --bg-soft: #0b1224;
  --surface: rgba(2, 6, 23, 0.62);
  --surface-2: rgba(255, 255, 255, 0.04);
  --text: rgba(226, 232, 240, 0.94);
  --muted: rgba(148, 163, 184, 0.9);
  --border: rgba(16, 185, 129, 0.22);

  --primary: #10b981;
  --primary-700: #6ee7b7;
  --primary-100: rgba(16, 185, 129, 0.16);
  --focus: 0 0 0 3px rgba(16, 185, 129, 0.22);

  --shadow: 0 18px 52px rgba(0, 0, 0, 0.55);
  --shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.32);

  --bg-glow-1: rgba(16, 185, 129, 0.12);
  --bg-glow-2: rgba(16, 185, 129, 0.06);
  --bg-glow-3: rgba(16, 185, 129, 0.05);
}

html[data-ui-style="terminal"] .brand,
html[data-ui-style="terminal"] .hero-title {
  background: none;
  -webkit-background-clip: initial;
  color: var(--primary);
}

html[data-ui-style="terminal"] .btn.primary {
  background: color-mix(in srgb, var(--primary) 22%, var(--surface));
  border-color: color-mix(in srgb, var(--primary) 35%, var(--border));
  box-shadow: 0 10px 18px color-mix(in srgb, var(--primary) 18%, transparent);
}

html[data-ui-style="terminal"] body {
  background-image:
    linear-gradient(
      to bottom,
      rgba(16, 185, 129, 0.035),
      rgba(16, 185, 129, 0.02),
      transparent
    ),
    repeating-linear-gradient(
      to bottom,
      rgba(16, 185, 129, 0.02) 0,
      rgba(16, 185, 129, 0.02) 1px,
      transparent 1px,
      transparent 4px
    ),
    radial-gradient(1000px 520px at 12% -12%, var(--bg-glow-1), transparent 62%),
    radial-gradient(820px 520px at 92% -8%, var(--bg-glow-2), transparent 60%),
    radial-gradient(900px 520px at 50% 110%, var(--bg-glow-3), transparent 65%);
}