/* ============================================================
   Example custom theme — "Example".
   Copy this folder to frontend/themes/<your-name>/ and edit the
   token values below. The frontend scans frontend/themes/ on each
   page load and any folder containing a theme.css shows up in the
   topbar dropdown automatically.

   You can override any token defined in themes.css. Anything you
   leave out inherits from the user's previous palette (which is
   probably not what you want for surface / text / accent — the
   visible essentials are listed at the top here).

   Optional: drop a meta.json next to this file with
     { "displayName": "Pretty Name", "author": "Your Name" }
   to control how the theme is labelled in the dropdown.
   ============================================================ */

[data-theme="example"] {
  /* Three gradient stops used by the body bg and the loading screen. */
  --gradient-from: #2a1a40;
  --gradient-mid:  #2e1a55;
  --gradient-to:   #1a0f3a;

  /* Surfaces */
  --surface-bg:       linear-gradient(135deg, var(--gradient-from) 0%, var(--gradient-mid) 50%, var(--gradient-to) 100%);
  --surface-bg-solid: #1a0f3a;
  --surface-elevated: rgba(255, 255, 255, 0.05);
  --surface-sunken:   rgba(0, 0, 0, 0.25);
  --surface-hover:    rgba(255, 255, 255, 0.08);
  --surface-selected: rgba(190, 130, 255, 0.18);

  /* Borders */
  --border:        rgba(255, 255, 255, 0.12);
  --border-strong: rgba(255, 255, 255, 0.20);
  --border-subtle: rgba(255, 255, 255, 0.06);

  /* Text */
  --text-primary:   #ffffff;
  --text-secondary: rgba(255, 255, 255, 0.75);
  --text-muted:     rgba(255, 255, 255, 0.55);
  --text-on-accent: #1a0f3a;

  /* Accent — the theme's signature colour. */
  --accent:       #c08bff;
  --accent-hover: #a16fe5;
  --accent-soft:  rgba(192, 139, 255, 0.18);
  --accent-rgb:   192, 139, 255;

  /* Status — stable across themes (greens, reds, oranges, teals). */
  --status-success:       #28a745;
  --status-success-hover: #218838;
  --status-success-rgb:   40, 167, 69;
  --status-danger:        #dc3545;
  --status-danger-hover:  #c82333;
  --status-danger-rgb:    220, 53, 69;
  --status-warning:       #ffc107;
  --status-warning-rgb:   255, 193, 7;
  --status-info:          #17a2b8;
  --status-info-rgb:      23, 162, 184;

  /* Theme-aware overlay triplets. Use rgba(var(--text-rgb), 0.X)
     anywhere you need an overlay tinted toward the foreground. */
  --text-rgb: 255, 255, 255;
  --bg-rgb:   0, 0, 0;

  /* Components */
  --card-bg:           rgba(255, 255, 255, 0.05);
  --card-border:       rgba(255, 255, 255, 0.10);
  --card-shadow:       0 2px 8px rgba(0, 0, 0, 0.30);
  --card-shadow-hover: 0 6px 24px rgba(0, 0, 0, 0.45);
  --input-bg:          rgba(0, 0, 0, 0.30);
  --input-border:      rgba(255, 255, 255, 0.15);
  --input-text:        #ffffff;
  --console-bg:        rgba(0, 0, 0, 0.40);
  --console-text:      #c08bff;
  --code-bg:           rgba(0, 0, 0, 0.35);
  --code-text:         #e6dcff;
  --tooltip-bg:        rgba(26, 15, 58, 0.95);
  --tooltip-text:      #ffffff;

  /* Chrome */
  --topbar-bg:      rgba(26, 15, 58, 0.40);
  --topbar-text:    #ffffff;
  --topbar-border:  rgba(255, 255, 255, 0.10);
  --sidebar-bg:     rgba(0, 0, 0, 0.15);
  --sidebar-text:   #ffffff;
  --sidebar-border: rgba(255, 255, 255, 0.08);

  /* Legacy aliases — keep these mapped so style.css's older var()
     references resolve correctly. Don't change names here. */
  --bg-primary:        var(--topbar-bg);
  --bg-secondary:      var(--surface-elevated);
  --bg-tertiary:       var(--surface-hover);
  --text-color:        var(--text-primary);
  --primary-color:     var(--accent);
  --primary-hover:     var(--accent-hover);
  --primary-color-rgb: var(--accent-rgb);
  --border-color:      var(--border);
  --content-bg:        var(--surface-bg);
  --hover-bg:          var(--surface-hover);
  --error-color:       var(--status-danger);
  --danger-color:      var(--status-danger);
}