/* Unified theme token layer.
   Keep the current cyber style as the default, while giving every page
   a stable set of variables for future theme switching. */

:root,
:root[data-theme="cyber"] {
  color-scheme: dark;

  /* Base surfaces */
  --theme-bg: #0f172a;
  --theme-bg-deep: #071120;
  --theme-bg-soft: #111827;
  --theme-surface: rgba(30, 41, 59, 0.9);
  --theme-surface-solid: #1e293b;
  --theme-surface-muted: rgba(15, 23, 42, 0.92);
  --theme-surface-raised: linear-gradient(145deg, rgba(29, 44, 66, 0.94), rgba(14, 25, 43, 0.94));

  /* Lines and depth */
  --theme-border: rgba(148, 163, 184, 0.2);
  --theme-border-strong: rgba(56, 189, 248, 0.45);
  --theme-border-glow: rgba(28, 206, 255, 0.72);
  --theme-shadow-panel: 0 8px 32px rgba(0, 0, 0, 0.3);
  --theme-shadow-deep: 0 24px 80px rgba(0, 0, 0, 0.36);
  --theme-shadow-glow: 0 0 15px rgba(56, 189, 248, 0.35);

  /* Text */
  --theme-text: #f8fafc;
  --theme-text-soft: #e2e8f0;
  --theme-text-muted: #94a3b8;
  --theme-text-dim: #64748b;

  /* Signals */
  --theme-accent: #38bdf8;
  --theme-accent-strong: #19c9ff;
  --theme-accent-2: #2563eb;
  --theme-success: #4ade80;
  --theme-success-strong: #37e889;
  --theme-warning: #facc15;
  --theme-danger: #f87171;
  --theme-purple: #c084fc;

  /* Shape and typography */
  --theme-radius-sm: 6px;
  --theme-radius-md: 10px;
  --theme-radius-lg: 12px;
  --theme-radius-xl: 18px;
  --theme-radius-2xl: 22px;
  --theme-font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Microsoft YaHei", sans-serif;
  --theme-font-ui: "Bahnschrift", "Trebuchet MS", "Microsoft YaHei", sans-serif;
  --theme-font-mono: "Menlo", "Consolas", monospace;
}

:root[data-theme="applovin"] {
  color-scheme: dark;

  /* AppLovin / Axon inspired product theme: dark graphite, blue action, quiet panels. */
  --theme-bg: #050914;
  --theme-bg-deep: #02050d;
  --theme-bg-soft: #0b1220;
  --theme-surface: rgba(13, 21, 37, 0.94);
  --theme-surface-solid: #0d1525;
  --theme-surface-muted: rgba(7, 12, 24, 0.96);
  --theme-surface-raised: linear-gradient(145deg, rgba(14, 24, 43, 0.98), rgba(6, 11, 22, 0.98));

  --theme-border: rgba(125, 157, 202, 0.18);
  --theme-border-strong: rgba(39, 128, 255, 0.55);
  --theme-border-glow: rgba(23, 112, 255, 0.7);
  --theme-shadow-panel: 0 10px 28px rgba(0, 0, 0, 0.38);
  --theme-shadow-deep: 0 22px 70px rgba(0, 0, 0, 0.46);
  --theme-shadow-glow: 0 0 18px rgba(30, 116, 255, 0.28);

  --theme-text: #f7fbff;
  --theme-text-soft: #d9e5f5;
  --theme-text-muted: #8ea0bb;
  --theme-text-dim: #5f7089;

  --theme-accent: #1677ff;
  --theme-accent-strong: #2f9bff;
  --theme-accent-2: #5b5cf6;
  --theme-success: #25d366;
  --theme-success-strong: #31e981;
  --theme-warning: #ffb020;
  --theme-danger: #ff4d67;
  --theme-purple: #8b5cf6;

  --theme-radius-sm: 5px;
  --theme-radius-md: 8px;
  --theme-radius-lg: 10px;
  --theme-radius-xl: 14px;
  --theme-radius-2xl: 18px;
  --theme-font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", "Microsoft YaHei", sans-serif;
  --theme-font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif;
  --theme-font-mono: "SFMono-Regular", "Consolas", monospace;

  --theme-app-bg-image:
    radial-gradient(circle at 18% 16%, rgba(22, 119, 255, 0.15), transparent 28%),
    radial-gradient(circle at 82% 8%, rgba(91, 92, 246, 0.12), transparent 30%),
    linear-gradient(135deg, #050914 0%, #081120 48%, #02050d 100%);
}

:root {
  /* Backward-compatible aliases used by commander skins. */
  --skin-bg: transparent;
  --skin-bg-dark: var(--theme-bg);
  --skin-panel: var(--theme-surface);
  --skin-border: var(--theme-border);
  --skin-text: var(--theme-text);
  --skin-text-main: var(--theme-text);
  --skin-text-muted: var(--theme-text-muted);
  --skin-blue: var(--theme-accent);
  --skin-green: var(--theme-success);
  --skin-red: var(--theme-danger);
  --skin-gold: var(--theme-warning);
  --skin-purple: var(--theme-purple);
  --skin-font: var(--theme-font);
  --skin-mono: var(--theme-font-mono);

  /* Backward-compatible aliases used by standalone pages. */
  --bg: var(--theme-bg-deep);
  --card: var(--theme-surface-muted);
  --panel: var(--theme-surface);
  --panel-soft: var(--theme-surface-muted);
  --panel-strong: var(--theme-surface-muted);
  --border: var(--theme-border);
  --line: rgba(93, 135, 180, 0.32);
  --line-bright: var(--theme-border-glow);
  --txt: var(--theme-text-soft);
  --text: var(--theme-text);
  --muted: var(--theme-text-muted);
  --cyan: var(--theme-accent-strong);
  --green: var(--theme-success-strong);
  --yellow: var(--theme-warning);
  --red: var(--theme-danger);
  --shadow: var(--theme-shadow-deep);
}