/* skui-mahogany.css  warm dark leather theme
   deep mahogany browns, burnished gold accents,
   subtle herringbone textile pattern,
   editorial serif typography */

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

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

:root {
  --bg-void:    hsl(18, 22%, 9%);
  --bg-deep:    hsl(20, 18%, 13%);
  --bg-base:    hsl(22, 16%, 17%);
  --bg-raised:  hsl(24, 14%, 21%);
  --bg-float:   hsl(26, 13%, 25%);
  --bg-hover:   hsl(28, 12%, 30%);

  --surf-t:     hsl(26, 14%, 24%);
  --surf-b:     hsl(18, 18%, 14%);
  --surf-btn-t: hsl(28, 14%, 28%);
  --surf-btn-b: hsl(18, 20%, 12%);

  --text-primary:   hsl(38, 55%, 88%);
  --text-secondary: hsl(34, 35%, 70%);
  --text-muted:     hsl(28, 18%, 48%);
  --text-inverse:   hsl(18, 22%, 9%);
  --text-link:      hsl(38, 80%, 62%);

  /* burnished gold accent */
  --blue-t:    hsl(42, 88%, 62%);
  --blue-b:    hsl(36, 76%, 44%);
  --blue-lit:  hsl(46, 92%, 72%);
  --blue-dim:  hsl(32, 65%, 30%);

  /* deep amber highlight */
  --secondary-t:    hsl(30, 80%, 55%);
  --secondary-b:    hsl(24, 70%, 38%);
  --secondary-lit:  hsl(36, 86%, 65%);
  --secondary-glow: rgba(200, 140, 40, 0.28);

  --danger-t:  #e05555;
  --danger-b:  #b83030;
  --success-t: #5ec058;
  --success-b: #3a8a34;
  --warn-t:    #e8a030;
  --warn-b:    #b87018;

  --border-hi:  rgba(240, 200, 120, 0.14);
  --border-lo:  rgba(60, 30, 10, 0.55);
  --border-mid: rgba(60, 30, 10, 0.30);

  --shadow-sm:    0 1px 4px rgba(0,0,0,0.45), 0 1px 0 rgba(240,200,120,0.08);
  --shadow-md:    0 4px 20px rgba(0,0,0,0.50), 0 1px 5px rgba(0,0,0,0.35);
  --shadow-lg:    0 10px 44px rgba(0,0,0,0.60), 0 3px 12px rgba(0,0,0,0.40);
  --shadow-inset: inset 0 2px 8px rgba(0,0,0,0.40), inset 0 1px 0 rgba(240,200,120,0.06);

  --bevel-hi: inset 0 1px 0 rgba(240, 200, 120, 0.12);
  --bevel-lo: inset 0 -1px 0 rgba(0, 0, 0, 0.50);

  --font-sans:    'Crimson Pro', 'Georgia', 'Times New Roman', serif;
  --font-mono:    'Cascadia Code', 'Consolas', monospace;
  --font-display: 'Cormorant Garamond', 'Georgia', serif;
}

/* herringbone textile pattern + warm dark gradient */
body {
  background-color: hsl(18, 22%, 9%);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M0 6 L6 0 M6 24 L24 6 M0 18 L18 0' stroke='rgba(200,140,60,0.055)' stroke-width='1.5' fill='none'/%3E%3Cpath d='M18 24 L24 18 M0 12 L12 0 M12 24 L24 12' stroke='rgba(200,140,60,0.03)' stroke-width='1' fill='none'/%3E%3C/svg%3E"),
    radial-gradient(ellipse 70% 50% at 15% 20%, rgba(120,60,20,0.18) 0%, transparent 65%),
    radial-gradient(ellipse 50% 40% at 85% 80%, rgba(80,30,10,0.15) 0%, transparent 60%),
    linear-gradient(160deg,
      hsl(18,22%,10%) 0%,
      hsl(20,20%,12%) 30%,
      hsl(22,18%,15%) 60%,
      hsl(20,20%,11%) 100%
    );
  background-attachment: fixed;
}

body::before {
  opacity: 0.025;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}

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

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

/* gold-tinted panel with leather inset look */
.panel {
  background: linear-gradient(160deg, var(--bg-raised) 0%, var(--bg-float) 100%);
  border: 1px solid var(--border-lo);
  box-shadow: var(--shadow-md), var(--bevel-hi), var(--bevel-lo);
  position: relative;
  overflow: hidden;
}

/* subtle sheen across top of panels */
.panel::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(240,200,100,0.04) 0%, transparent 35%);
  pointer-events: none;
  border-radius: inherit;
}

/* gold-accented active states */
.btn--primary {
  background-color: var(--blue-b);
  background-image:
    linear-gradient(180deg,
      rgba(255,240,160,0.30)  0%,
      rgba(255,220,100,0.10) 49%,
      transparent            50%,
      rgba(0,0,0,0.10)       100%
    ),
    linear-gradient(180deg, var(--blue-t) 0%, var(--blue-b) 100%);
  border: 1px solid rgba(80,40,0,0.5);
  box-shadow:
    inset 0 1px 0 rgba(255,240,160,0.25),
    inset 0 -1px 0 rgba(0,0,0,0.40),
    0 3px 12px rgba(0,0,0,0.45),
    0 0 14px rgba(200,140,40,0.18);
  color: hsl(18,22%,9%);
  text-shadow: 0 1px 0 rgba(255,240,160,0.30);
  font-weight: 700;
}

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

.btn--secondary {
  background-color: var(--secondary-b);
  background-image:
    linear-gradient(180deg,
      rgba(255,240,160,0.30)  0%,
      rgba(255,220,100,0.10) 49%,
      transparent            50%,
      rgba(0,0,0,0.12)       100%
    ),
    linear-gradient(180deg, var(--secondary-t) 0%, var(--secondary-b) 100%);
  border: 1px solid rgba(60,30,0,0.5);
  box-shadow:
    inset 0 1px 0 rgba(255,240,160,0.22),
    inset 0 -1px 0 rgba(0,0,0,0.40),
    0 3px 12px rgba(0,0,0,0.40),
    0 0 16px var(--secondary-glow);
  color: hsl(18,22%,9%);
  text-shadow: 0 1px 0 rgba(255,240,160,0.25);
  font-weight: 700;
}

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

/* scrollbar  leather tone */
::-webkit-scrollbar-track { background: var(--bg-void); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--bg-float) 0%, var(--bg-deep) 100%);
  border-color: var(--border-lo);
}

/* tab active  gold underline instead of blue */
.tab--active,
.tab[aria-selected="true"] {
  background-color: var(--blue-b);
  background-image:
    linear-gradient(180deg,
      rgba(255,240,160,0.28)  0%,
      rgba(255,220,100,0.10) 49%,
      transparent            50%,
      rgba(0,0,0,0.08)       100%
    ),
    linear-gradient(180deg, var(--blue-t) 0%, var(--blue-b) 100%);
  color: hsl(18,22%,9%);
  border-color: rgba(60,30,0,0.5);
  box-shadow:
    inset 0 1px 0 rgba(255,240,160,0.20),
    inset 0 -1px 0 rgba(0,0,0,0.35),
    0 2px 10px rgba(0,0,0,0.35),
    0 0 10px rgba(180,120,30,0.15);
  text-shadow: 0 1px 1px rgba(0,0,0,0.3);
}

.list-item--active {
  background-color: var(--blue-b);
  background-image:
    linear-gradient(180deg,
      rgba(255,240,160,0.22) 0%,
      rgba(255,220,100,0.08) 49%,
      transparent 50%,
      rgba(0,0,0,0.06) 100%
    ),
    linear-gradient(180deg, var(--blue-t) 0%, var(--blue-b) 100%);
  color: hsl(18,22%,9%);
  text-shadow: 0 1px 1px rgba(0,0,0,0.25);
  border-color: rgba(60,30,0,0.45);
}

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

mark {
  background: rgba(200,140,40,0.25);
  color: hsl(42,88%,72%);
}