/**
 * @name        My Custom Theme
 * @description A custom theme for my Haven server.
 * @author      YourName
 * @version     1.0
 * @icon        🎨
 * @haven-theme-api 1
 */

/*
  HOW TO USE
  ──────────
  1. Rename this file to something like "mytheme.theme.css"
  2. Edit the CSS variables below to your liking
  3. Drop the file into the Haven/themes/ folder
  4. In Admin Settings → Custom Themes, check the box next to your theme
  5. It will appear as a button in the theme picker for all users

  The @icon line above sets the emoji shown on the theme picker button.
  You can use any emoji or a short text character (e.g. ★, ♦, 🌙).

  The @haven-theme-api line declares which public token and region contract
  this theme targets. See docs/theme-authoring.md for the complete reference.

  All variables are optional; omit the ones you want to inherit from the
  base Haven theme. Only override what you actually want to change.
*/

/*
  BACKGROUND IMAGE
  ────────────────
  Drop an image into this same themes/ folder and uncomment the block below.
  The path is relative to this file, so no leading slash is needed.

  The main region is the chat area; the message list and the messages themselves
  are transparent, so the image sits behind all of them. The gradient on top is
  a scrim that keeps text readable over a bright or busy image: raise 0.55 to
  dim the image more, lower it to show more, or remove that line if the image
  is already dark. Use white instead of black on a light theme.

  The navigation sidebar keeps its own colour. Add its data-haven-region
  selector to cover it too, or use body to cover the whole window.
*/

/*
[data-haven-region="main"] {
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.55)),
    url("wallpaper.jpg");
  background-size: cover;
  background-position: center;
}
*/

:root {
  /* ── Backgrounds ───────────────────────────────── */
  --bg-primary:    #191b28;   /* main app background */
  --bg-secondary:  #1e2035;   /* sidebar / panels */
  --bg-tertiary:   #252840;   /* nested panels, channel list */
  --bg-hover:      #2c2f4a;   /* hover states */
  --bg-active:     #333660;   /* active / selected items */
  --bg-input:      #15172a;   /* text input background */
  --bg-card:       #1c1e33;   /* message cards, modals */

  /* ── Accent (buttons, links, highlights) ───────── */
  --accent:        #7c5cfc;
  --accent-hover:  #9478ff;
  --accent-glow:   rgba(124, 92, 252, 0.25);
  --accent-text:   #ffffff;   /* preferred text for core accent controls */

  /* ── Text ──────────────────────────────────────── */
  --text-primary:  #e2e4f0;   /* main message text */
  --text-secondary:#9498b3;   /* timestamps, hints */
  --text-muted:    #5d6180;   /* subtle labels, placeholders */
  --text-link:     #82aaff;   /* hyperlinks */

  /* ── Borders ───────────────────────────────────── */
  --border:        #2d3050;
  --border-light:  #383b5e;

  /* ── Status colors ─────────────────────────────── */
  --success:       #43b581;
  --success-text:  #ffffff;   /* text on success-filled controls */
  --danger:        #f04747;
  --danger-text:   #ffffff;   /* text on danger-filled controls */
  --warning:       #faa61a;
  --warning-text:  #1a1a2e;   /* text on warning-filled controls */

  /* ── Online indicator LED ──────────────────────── */
  --led-on:        #43b581;
  --led-off:       #555;
  --led-glow:      rgba(67, 181, 129, 0.5);

  /* ── Typography ────────────────────────────────── */
  --font-main:     'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-mono:     'Consolas', 'Courier New', monospace;
  --font-heading:  'Segoe UI', system-ui, sans-serif;

  /* ── Layout ────────────────────────────────────── */
  --radius:        8px;       /* default border radius */
  --radius-sm:     4px;
  --sidebar-width: 16.875rem; /* 270px at the default interface scale */
  --right-width:   16.25rem;  /* 260px at the default interface scale */
  --transition:    0.15s ease;

  /* ── Theme-specific decorative vars ────────────── */
  --msg-glow:      none;      /* glow on messages, e.g. 0 0 8px #7c5cfc */
  --scanline:      none;      /* scanline effect overlay (CRT-style) */
}

/*
  STABLE LAYOUT REGIONS
  ─────────────────────
  Use data-haven-region selectors for major layout areas instead of internal
  classes or IDs. Keep deep desktop-only layout changes above 900px so Haven's
  tablet and mobile overlay behaviour remains intact.

  @media (min-width: 901px) {
    [data-haven-region="navigation-sidebar"] {
      width: var(--sidebar-width);
    }

    [data-haven-region="context-sidebar"] {
      width: var(--right-width);
    }
  }

  See docs/theme-authoring.md for every public region and token.
*/