/* =========================================
   Thirvael Ruun Settlement Theme
   Scope: Thirvael Ruun (Elandor) pages
   Depends on:
     - core-reset.css
     - layout-lorewalker.css
     - theme-lorewalker.css
     - theme-rhome.css
     - theme-kingdom.css (if used by your atlas layout)
   This file ONLY adjusts colors and light settlement-specific styling.
   Layout, grids, typography scale, and reset behavior remain untouched.
   ========================================= */

/* -----------------------------------------
   Realm Scope & Tokens
   ----------------------------------------- */

.realm-thirvael-ruun {
  /* Thirvael Ruun palette: linen, stone, fieldgreen, candlegold */
  --ms-bg-deep: #070806;            /* soil-black */
  --ms-bg-alt: #0e100c;             /* hedgerow shadow */
  --ms-surface: #141610;            /* worn slate */
  --ms-surface-soft: #181b14;       /* softer panel */
  --ms-surface-contrast: #1f231a;   /* lifted panel */

  --ms-border: #2e3527;             /* mossed iron */
  --ms-border-strong: #3a4432;      /* stronger edge */
  --ms-divider: #263022;            /* quiet rule line */

  --ms-text: #e7dfcf;               /* parchment-linen */
  --ms-text-soft: #cbbfa9;          /* faded ink */
  --ms-text-muted: #a49783;         /* old ledger */
  --ms-heading: #f2eadb;            /* brighter linen */

  --ms-accent: #9fc07b;             /* fieldgreen */
  --ms-accent-2: #d8b46b;           /* harvest-gold */
  --ms-accent-3: #86a6a6;           /* well-stone teal */
  --ms-glow: rgba(159, 192, 123, 0.18);

  --ms-link: #a9d28a;               /* greener link */
  --ms-link-hover: #e2c27b;         /* warm hover */
  --ms-focus: rgba(216, 180, 107, 0.35);

  --ms-danger: #d27c6a;             /* cautery red */
  --ms-warning: #e2c27b;            /* wheat */
  --ms-success: #9fc07b;            /* fieldgreen */

  /* subtle textures / shadows */
  --ms-shadow: rgba(0, 0, 0, 0.55);
  --ms-shadow-tight: 0 6px 14px rgba(0,0,0,0.45);
  --ms-shadow-hard: 0 0 0 1px rgba(0,0,0,0.35), 0 10px 22px rgba(0,0,0,0.55);
}

/* -----------------------------------------
   Global variable mapping (theme bridge)
   Map Thirvael Ruun tokens onto your existing
   site variables without changing layout.
   ----------------------------------------- */

.realm-thirvael-ruun,
.lw-site.realm-thirvael-ruun {
  /* Page surfaces */
  --lw-bg-deep: var(--ms-bg-deep);
  --lw-bg-alt: var(--ms-bg-alt);
  --lw-surface: var(--ms-surface);
  --lw-surface-soft: var(--ms-surface-soft);
  --lw-surface-contrast: var(--ms-surface-contrast);

  /* Text */
  --lw-text: var(--ms-text);
  --lw-text-soft: var(--ms-text-soft);
  --lw-text-muted: var(--ms-text-muted);
  --lw-heading: var(--ms-heading);

  /* Lines */
  --lw-border: var(--ms-border);
  --lw-border-strong: var(--ms-border-strong);
  --lw-divider: var(--ms-divider);

  /* Accents */
  --lw-accent: var(--ms-accent);
  --lw-accent-2: var(--ms-accent-2);
  --lw-accent-3: var(--ms-accent-3);

  /* Links / focus */
  --lw-link: var(--ms-link);
  --lw-link-hover: var(--ms-link-hover);
  --lw-focus: var(--ms-focus);

  /* Status */
  --lw-danger: var(--ms-danger);
  --lw-warning: var(--ms-warning);
  --lw-success: var(--ms-success);

  /* Shadows */
  --lw-shadow: var(--ms-shadow);
}

/* -----------------------------------------
   Page background + ink
   ----------------------------------------- */

.realm-thirvael-ruun body,
body.realm-thirvael-ruun {
  color: var(--lw-text);
  background:
    radial-gradient(1200px 700px at 20% 10%, rgba(159, 192, 123, 0.08), transparent 55%),
    radial-gradient(900px 600px at 80% 20%, rgba(216, 180, 107, 0.06), transparent 60%),
    linear-gradient(180deg, var(--lw-bg-deep), var(--lw-bg-alt));
}

/* -----------------------------------------
   Links
   ----------------------------------------- */

.realm-thirvael-ruun a {
  color: var(--lw-link);
  text-decoration-color: rgba(169, 210, 138, 0.35);
}

.realm-thirvael-ruun a:hover {
  color: var(--lw-link-hover);
  text-decoration-color: rgba(226, 194, 123, 0.55);
}

/* -----------------------------------------
   Focus states (keyboard friendly)
   ----------------------------------------- */

.realm-thirvael-ruun :focus-visible {
  outline: 2px solid var(--lw-accent-2);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--lw-focus);
}

/* -----------------------------------------
   Panels / cards (color only)
   ----------------------------------------- */

.realm-thirvael-ruun .lw-card,
.realm-thirvael-ruun .card,
.realm-thirvael-ruun .lw-panel {
  background: linear-gradient(180deg, var(--lw-surface), var(--lw-surface-soft));
  border-color: var(--lw-border);
  box-shadow: var(--ms-shadow-tight);
}

.realm-thirvael-ruun .lw-card:hover,
.realm-thirvael-ruun .card:hover {
  border-color: var(--lw-border-strong);
  box-shadow: var(--ms-shadow-hard);
}

/* Card headers / titles */
.realm-thirvael-ruun .lw-card h2,
.realm-thirvael-ruun .lw-card h3,
.realm-thirvael-ruun .lw-card .lw-card-title {
  color: var(--lw-heading);
}

/* -----------------------------------------
   Banner / hero / nav (color only)
   Adjust selectors to match your actual DOM.
   ----------------------------------------- */

.realm-thirvael-ruun .lw-banner,
.realm-thirvael-ruun .lw-hero,
.realm-thirvael-ruun header.lw-header {
  background:
    radial-gradient(700px 240px at 30% 0%, rgba(216, 180, 107, 0.10), transparent 60%),
    linear-gradient(180deg, rgba(20, 22, 16, 0.92), rgba(14, 16, 12, 0.92));
  border-bottom: 1px solid var(--lw-divider);
}

.realm-thirvael-ruun .lw-nav,
.realm-thirvael-ruun nav.lw-nav,
.realm-thirvael-ruun .lw-breadcrumbs {
  background: rgba(20, 22, 16, 0.65);
  border: 1px solid var(--lw-border);
}

/* Breadcrumb pills / separators */
.realm-thirvael-ruun .lw-breadcrumbs a {
  color: var(--lw-text-soft);
}
.realm-thirvael-ruun .lw-breadcrumbs a:hover {
  color: var(--lw-link-hover);
}

/* -----------------------------------------
   Buttons (color only; keeps your sizing/radius)
   ----------------------------------------- */

.realm-thirvael-ruun .lw-btn,
.realm-thirvael-ruun button,
.realm-thirvael-ruun .button {
  background: linear-gradient(180deg, rgba(159, 192, 123, 0.18), rgba(159, 192, 123, 0.08));
  border-color: rgba(159, 192, 123, 0.35);
  color: var(--lw-heading);
}

.realm-thirvael-ruun .lw-btn:hover,
.realm-thirvael-ruun button:hover,
.realm-thirvael-ruun .button:hover {
  background: linear-gradient(180deg, rgba(216, 180, 107, 0.16), rgba(216, 180, 107, 0.08));
  border-color: rgba(216, 180, 107, 0.45);
}

/* -----------------------------------------
   Dividers / HR
   ----------------------------------------- */

.realm-thirvael-ruun hr,
.realm-thirvael-ruun .lw-divider {
  border-color: var(--lw-divider);
  opacity: 0.9;
}

/* -----------------------------------------
   Tables (records vibe)
   ----------------------------------------- */

.realm-thirvael-ruun table {
  background: rgba(20, 22, 16, 0.55);
  border-color: var(--lw-border);
}

.realm-thirvael-ruun th {
  color: var(--lw-heading);
  border-color: var(--lw-divider);
  background: rgba(31, 35, 26, 0.65);
}

.realm-thirvael-ruun td {
  border-color: var(--lw-divider);
  color: var(--lw-text);
}

/* -----------------------------------------
   Selection
   ----------------------------------------- */

.realm-thirvael-ruun ::selection {
  background: rgba(216, 180, 107, 0.22);
  color: var(--lw-heading);
}