/* skui-copper.css  oxidized copper patina industrial
   dark iron-rust depths, verdigris teal accent,
   PCB circuit-trace SVG pattern on body,
   bold condensed Oswald industrial typography */

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

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@300;400;500;600;700&family=Source+Sans+3:ital,wght@0,300;0,400;0,600;1,400&display=swap');

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

  --surf-t:     hsl(24, 14%, 20%);
  --surf-b:     hsl(16, 18%, 11%);
  --surf-btn-t: hsl(26, 13%, 24%);
  --surf-btn-b: hsl(16, 20%, 9%);

  --text-primary:   hsl(36, 40%, 88%);
  --text-secondary: hsl(32, 25%, 68%);
  --text-muted:     hsl(26, 14%, 46%);
  --text-inverse:   hsl(16, 20%, 7%);
  --text-link:      hsl(168, 70%, 52%);

  /* oxidized verdigris / teal accent */
  --blue-t:    hsl(168, 72%, 52%);
  --blue-b:    hsl(172, 65%, 36%);
  --blue-lit:  hsl(162, 78%, 62%);
  --blue-dim:  hsl(176, 55%, 24%);

  /* warm copper highlight */
  --secondary-t:    hsl(26, 72%, 55%);
  --secondary-b:    hsl(20, 65%, 38%);
  --secondary-lit:  hsl(32, 78%, 64%);
  --secondary-glow: rgba(180, 100, 30, 0.28);

  --danger-t:  #e85050;
  --danger-b:  #c02828;
  --success-t: #50c880;
  --success-b: #288a50;
  --warn-t:    #e8a040;
  --warn-b:    #b87018;

  --border-hi:  rgba(80, 180, 140, 0.10);
  --border-lo:  rgba(8, 4, 0, 0.62);
  --border-mid: rgba(8, 4, 0, 0.34);

  --shadow-sm:    0 1px 4px rgba(0,0,0,0.52), 0 1px 0 rgba(80,180,140,0.06);
  --shadow-md:    0 4px 22px rgba(0,0,0,0.58), 0 1px 6px rgba(0,0,0,0.40);
  --shadow-lg:    0 10px 48px rgba(0,0,0,0.68), 0 3px 14px rgba(0,0,0,0.45);
  --shadow-inset: inset 0 2px 8px rgba(0,0,0,0.48), inset 0 1px 0 rgba(80,180,140,0.05);

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

  --font-sans:    'Source Sans 3', 'Arial', sans-serif;
  --font-mono:    'Cascadia Code', 'Consolas', monospace;
  --font-display: 'Oswald', 'Arial Narrow', sans-serif;
}

/* PCB circuit-trace pattern + dark rust gradient */
body {
  background-color: hsl(16, 20%, 7%);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cline x1='0' y1='20' x2='38' y2='20' stroke='rgba(50,160,110,0.10)' stroke-width='1.5'/%3E%3Ccircle cx='40' cy='20' r='3.5' fill='none' stroke='rgba(50,160,110,0.15)' stroke-width='1.5'/%3E%3Cline x1='42' y1='20' x2='80' y2='20' stroke='rgba(50,160,110,0.07)' stroke-width='1'/%3E%3Cline x1='40' y1='23' x2='40' y2='58' stroke='rgba(50,160,110,0.10)' stroke-width='1.5'/%3E%3Ccircle cx='40' cy='60' r='3.5' fill='none' stroke='rgba(50,160,110,0.15)' stroke-width='1.5'/%3E%3Cline x1='40' y1='63' x2='40' y2='80' stroke='rgba(50,160,110,0.07)' stroke-width='1'/%3E%3Cline x1='58' y1='0' x2='58' y2='18' stroke='rgba(50,160,110,0.07)' stroke-width='1'/%3E%3Ccircle cx='58' cy='20' r='2.5' fill='rgba(50,160,110,0.09)'/%3E%3Cline x1='0' y1='52' x2='18' y2='52' stroke='rgba(50,160,110,0.07)' stroke-width='1'/%3E%3Ccircle cx='20' cy='52' r='2.5' fill='rgba(50,160,110,0.08)'/%3E%3Cline x1='20' y1='54' x2='20' y2='80' stroke='rgba(50,160,110,0.07)' stroke-width='1'/%3E%3Cline x1='62' y1='40' x2='80' y2='40' stroke='rgba(50,160,110,0.06)' stroke-width='1'/%3E%3Ccircle cx='60' cy='40' r='2' fill='rgba(50,160,110,0.07)'/%3E%3C/svg%3E"),
    radial-gradient(ellipse 60% 42% at 14% 18%, rgba(100,48,14,0.18) 0%, transparent 65%),
    radial-gradient(ellipse 45% 35% at 86% 80%, rgba(60,24,4,0.15) 0%, transparent 60%),
    linear-gradient(158deg,
      hsl(16,20%,8%)  0%,
      hsl(18,18%,10%) 30%,
      hsl(20,16%,12%) 65%,
      hsl(16,20%,7%)  100%
    );
  background-attachment: fixed;
}

body::before { opacity: 0.020; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-primary);
  text-shadow: 0 1px 4px rgba(0,0,0,0.55);
}

h5, h6 {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.panel {
  background: linear-gradient(162deg, var(--bg-raised) 0%, var(--bg-float) 100%);
  border: 1px solid rgba(0,12,4,0.58);
  box-shadow:
    var(--shadow-md),
    inset 0 1px 0 rgba(80,180,140,0.08),
    inset 0 -1px 0 rgba(0,0,0,0.54);
}

.btn--primary {
  background-color: var(--blue-b);
  background-image:
    linear-gradient(180deg,
      rgba(200,255,220,0.22)  0%,
      rgba(160,220,180,0.07) 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(0,38,18,0.60);
  box-shadow:
    inset 0 1px 0 rgba(160,255,200,0.22),
    inset 0 -1px 0 rgba(0,0,0,0.50),
    0 3px 14px rgba(0,0,0,0.52),
    0 0 18px rgba(40,160,110,0.22);
  color: hsl(16,20%,7%);
  font-weight: 700;
  letter-spacing: 0.05em;
  font-family: var(--font-display);
}

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

.btn--secondary {
  background-color: var(--secondary-b);
  background-image:
    linear-gradient(180deg,
      rgba(255,225,155,0.26)  0%,
      rgba(220,178,78,0.08)  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(50,20,0,0.56);
  box-shadow:
    inset 0 1px 0 rgba(255,228,155,0.24),
    inset 0 -1px 0 rgba(0,0,0,0.46),
    0 3px 14px rgba(0,0,0,0.46),
    0 0 16px var(--secondary-glow);
  color: hsl(16,20%,7%);
  font-weight: 700;
  font-family: var(--font-display);
}

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

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

.tab--active,
.tab[aria-selected="true"] {
  background-color: var(--blue-b);
  background-image:
    linear-gradient(180deg,
      rgba(200,255,220,0.20)  0%,
      rgba(160,220,180,0.06) 49%,
      transparent            50%,
      rgba(0,0,0,0.10)       100%
    ),
    linear-gradient(180deg, var(--blue-t) 0%, var(--blue-b) 100%);
  color: hsl(16,20%,7%);
  border-color: rgba(0,38,18,0.54);
  box-shadow:
    inset 0 1px 0 rgba(160,255,200,0.18),
    inset 0 -1px 0 rgba(0,0,0,0.44),
    0 2px 12px rgba(0,0,0,0.46),
    0 0 12px rgba(40,160,110,0.18);
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.tab--active::after,
.tab[aria-selected="true"]::after { display: none; }

.list-item--active {
  background-color: var(--blue-b);
  background-image:
    linear-gradient(180deg,
      rgba(200,255,220,0.18) 0%,
      rgba(160,220,180,0.05) 49%,
      transparent 50%,
      rgba(0,0,0,0.08) 100%
    ),
    linear-gradient(180deg, var(--blue-t) 0%, var(--blue-b) 100%);
  color: hsl(16,20%,7%);
  border-color: rgba(0,38,18,0.50);
}

mark { background: rgba(40,160,100,0.24); color: hsl(162,78%,68%); }

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

.progress__fill {
  background-image:
    linear-gradient(180deg, rgba(200,255,220,0.24) 0%, rgba(160,220,180,0.06) 49%, transparent 50%, rgba(255,255,255,0.03) 100%),
    linear-gradient(90deg, var(--blue-b), var(--blue-t));
  box-shadow: 0 0 8px rgba(40,160,100,0.45);
}