/* skui-forest.css  dark forest green / ember theme
   deep moss and pine greens, warm amber-ember accents,
   organic flowing topographic-contour body pattern,
   literary serif typography */

@import url('../skui.css');

@import url('https://fonts.googleapis.com/css2?family=Vollkorn:ital,wght@0,400;0,600;0,700;1,400;1,600&family=Lora:ital,wght@0,400;0,500;0,600;1,400&display=swap');

:root {
  --bg-void:    hsl(138, 28%, 7%);
  --bg-deep:    hsl(140, 24%, 10%);
  --bg-base:    hsl(142, 20%, 13%);
  --bg-raised:  hsl(144, 18%, 17%);
  --bg-float:   hsl(146, 16%, 21%);
  --bg-hover:   hsl(148, 14%, 26%);

  --surf-t:     hsl(146, 17%, 20%);
  --surf-b:     hsl(138, 24%, 11%);
  --surf-btn-t: hsl(148, 16%, 24%);
  --surf-btn-b: hsl(138, 26%, 9%);

  --text-primary:   hsl(48, 60%, 90%);
  --text-secondary: hsl(44, 35%, 72%);
  --text-muted:     hsl(40, 18%, 48%);
  --text-inverse:   hsl(138, 28%, 7%);
  --text-link:      hsl(42, 92%, 62%);

  /* ember / amber accent */
  --blue-t:    hsl(38, 92%, 60%);
  --blue-b:    hsl(30, 82%, 44%);
  --blue-lit:  hsl(44, 96%, 68%);
  --blue-dim:  hsl(24, 70%, 28%);

  /* warm gold variant */
  --secondary-t:    hsl(52, 88%, 58%);
  --secondary-b:    hsl(44, 78%, 42%);
  --secondary-lit:  hsl(56, 92%, 66%);
  --secondary-glow: rgba(210, 160, 30, 0.30);

  --danger-t:  #e05858;
  --danger-b:  #b83232;
  --success-t: #60c860;
  --success-b: #389238;
  --warn-t:    #e8a838;
  --warn-b:    #b87820;

  --border-hi:  rgba(180, 220, 120, 0.10);
  --border-lo:  rgba(0, 20, 0, 0.60);
  --border-mid: rgba(0, 20, 0, 0.32);

  --shadow-sm:    0 1px 4px rgba(0,0,0,0.50), 0 1px 0 rgba(140,200,80,0.06);
  --shadow-md:    0 4px 22px rgba(0,0,0,0.55), 0 1px 6px rgba(0,0,0,0.38);
  --shadow-lg:    0 10px 48px rgba(0,0,0,0.65), 0 3px 14px rgba(0,0,0,0.42);
  --shadow-inset: inset 0 2px 8px rgba(0,0,0,0.42), inset 0 1px 0 rgba(140,200,80,0.05);

  --bevel-hi: inset 0 1px 0 rgba(140, 200, 80, 0.09);
  --bevel-lo: inset 0 -1px 0 rgba(0, 0, 0, 0.55);

  --font-sans:    'Lora', 'Georgia', serif;
  --font-mono:    'Cascadia Code', 'Consolas', monospace;
  --font-display: 'Vollkorn', 'Georgia', serif;
}

/* organic contour-line body pattern + deep forest gradient */
body {
  background-color: hsl(138, 28%, 7%);
  background-image:
    /* flowing topographic-style curves */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cellipse cx='60' cy='60' rx='50' ry='30' fill='none' stroke='rgba(80,160,60,0.055)' stroke-width='1'/%3E%3Cellipse cx='60' cy='60' rx='36' ry='20' fill='none' stroke='rgba(80,160,60,0.045)' stroke-width='1'/%3E%3Cellipse cx='60' cy='60' rx='22' ry='11' fill='none' stroke='rgba(80,160,60,0.035)' stroke-width='1'/%3E%3Cellipse cx='30' cy='90' rx='40' ry='24' fill='none' stroke='rgba(80,160,60,0.04)' stroke-width='1'/%3E%3Cellipse cx='95' cy='20' rx='35' ry='18' fill='none' stroke='rgba(80,160,60,0.04)' stroke-width='1'/%3E%3C/svg%3E"),
    radial-gradient(ellipse 65% 45% at 18% 20%, rgba(30,90,30,0.22) 0%, transparent 65%),
    radial-gradient(ellipse 50% 40% at 82% 78%, rgba(10,50,10,0.20) 0%, transparent 60%),
    radial-gradient(ellipse 40% 30% at 55% 50%, rgba(20,70,20,0.12) 0%, transparent 55%),
    linear-gradient(155deg,
      hsl(140,30%,7%)  0%,
      hsl(138,26%,9%)  30%,
      hsl(142,22%,12%) 65%,
      hsl(136,28%,8%)  100%
    );
  background-attachment: fixed;
}

body::before { opacity: 0.022; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.005em;
  color: var(--text-primary);
  text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

h5, h6 { font-family: var(--font-sans); }

.panel {
  background: linear-gradient(160deg, var(--bg-raised) 0%, var(--bg-float) 100%);
  border: 1px solid rgba(0,30,0,0.58);
  box-shadow:
    var(--shadow-md),
    inset 0 1px 0 rgba(140,200,80,0.07),
    inset 0 -1px 0 rgba(0,0,0,0.50);
}

/* ember-glow active button */
.btn--primary {
  background-color: var(--blue-b);
  background-image:
    linear-gradient(180deg,
      rgba(255,240,160,0.28)  0%,
      rgba(255,210,80,0.08)  49%,
      transparent            50%,
      rgba(0,0,0,0.12)       100%
    ),
    linear-gradient(180deg, var(--blue-t) 0%, var(--blue-b) 100%);
  border: 1px solid rgba(60,20,0,0.55);
  box-shadow:
    inset 0 1px 0 rgba(255,240,160,0.22),
    inset 0 -1px 0 rgba(0,0,0,0.45),
    0 3px 14px rgba(0,0,0,0.50),
    0 0 18px rgba(200,130,30,0.20);
  color: hsl(138,28%,7%);
  text-shadow: 0 1px 0 rgba(255,240,160,0.25);
  font-weight: 600;
}

.btn--primary:hover { filter: brightness(1.10); }

.btn--secondary {
  background-color: var(--secondary-b);
  background-image:
    linear-gradient(180deg,
      rgba(255,248,160,0.30)  0%,
      rgba(255,230,80,0.10)  49%,
      transparent            50%,
      rgba(0,0,0,0.10)       100%
    ),
    linear-gradient(180deg, var(--secondary-t) 0%, var(--secondary-b) 100%);
  border: 1px solid rgba(50,30,0,0.50);
  box-shadow:
    inset 0 1px 0 rgba(255,248,160,0.22),
    inset 0 -1px 0 rgba(0,0,0,0.40),
    0 3px 12px rgba(0,0,0,0.45),
    0 0 16px var(--secondary-glow);
  color: hsl(138,28%,7%);
  font-weight: 600;
}

.btn--secondary:hover { filter: brightness(1.08); }

::-webkit-scrollbar-track { background: var(--bg-void); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, hsl(146,17%,24%) 0%, hsl(138,24%,12%) 100%);
  border-color: var(--border-lo);
}

.tab--active,
.tab[aria-selected="true"] {
  background-color: var(--blue-b);
  background-image:
    linear-gradient(180deg,
      rgba(255,240,160,0.25)  0%,
      rgba(255,210,80,0.08)  49%,
      transparent            50%,
      rgba(0,0,0,0.10)       100%
    ),
    linear-gradient(180deg, var(--blue-t) 0%, var(--blue-b) 100%);
  color: hsl(138,28%,7%);
  border-color: rgba(60,20,0,0.50);
  box-shadow:
    inset 0 1px 0 rgba(255,240,160,0.18),
    inset 0 -1px 0 rgba(0,0,0,0.40),
    0 2px 12px rgba(0,0,0,0.45),
    0 0 12px rgba(200,130,30,0.16);
}

.list-item--active {
  background-color: var(--blue-b);
  background-image:
    linear-gradient(180deg,
      rgba(255,240,160,0.20) 0%,
      rgba(255,210,80,0.06) 49%,
      transparent 50%,
      rgba(0,0,0,0.08) 100%
    ),
    linear-gradient(180deg, var(--blue-t) 0%, var(--blue-b) 100%);
  color: hsl(138,28%,7%);
  border-color: rgba(60,20,0,0.45);
}

mark { background: rgba(200,140,30,0.28); color: hsl(48,95%,78%); }

blockquote {
  border-left-color: var(--blue-b);
  background: linear-gradient(90deg, rgba(200,130,30,0.09) 0%, transparent 100%);
}