@font-face {
  font-family: "Exo 2";
  src: url("./Exo2-VariableFont_wght.woff2") format("woff2-variations"),
       url("./Exo2-VariableFont_wght.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* =~= Primary — warm bronze (base #c89b6c) =~= */
  --primary-50:  245 237 228;  /* #f5ede4 */
  --primary-100: 236 224 209;  /* #ece0d1 */
  --primary-200: 224 201 171;  /* #e0c9ab */
  --primary-300: 232 195 154;  /* #e8c39a  — accent-2 */
  --primary-400: 213 172 124;  /* #d5ac7c */
  --primary-500: 200 155 108;  /* #c89b6c  — accent */
  --primary-600: 177 130  77;  /* #b1824d */
  --primary-700: 143 102  57;  /* #8f6639 */
  --primary-800: 112  78  41;  /* #704e29 */
  --primary-900:  71  48  24;  /* #473018 */

  /* =~= Surface — deep blue-graphite (base #0a0d12) =~= */
  --surface-50:  238 242 246;  /* #eef2f6  — text */
  --surface-100: 212 220 230;  /* #d4dce6 */
  --surface-200: 170 184 200;  /* #aab8c8 */
  --surface-300: 154 167 180;  /* #9aa7b4  — muted */
  --surface-400:  90 106 128;  /* #5a6a80 */
  --surface-500:  56  77 107;  /* #384d6b */
  --surface-600:  40  54  76;  /* #28364c */
  --surface-700:  28  38  54;  /* #1c2636 */
  --surface-800:  16  22  31;  /* #10161f  — bg-2 */
  --surface-900:   9  12  17;  /* #090c11  — bg */

  /* =~= Semantic feedback =~= */
  --success-500: 126 203 138;  /* #7ecb8a */
  --warning-500: 232 168  77;  /* #e8a84d */
  --error-500:   228 108 108;  /* #e46c6c */

  /* =~= Theme surface vars =~= */
  --bg: rgb(var(--surface-900));
  --bg-2: rgb(var(--surface-800));
  --text: rgb(var(--surface-50));
  --muted: rgb(var(--surface-300));
  --accent: rgb(var(--primary-500));
  --accent-2: rgb(var(--primary-300));

  --line: rgba(255, 255, 255, 0.1);
  --glass-border: rgba(255, 255, 255, 0.12);
  --glass-border-soft: rgba(255, 255, 255, 0.06);
  --glass-fill: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.11),
    rgba(255, 255, 255, 0.03) 16%,
    rgba(255, 255, 255, 0.02) 58%,
    rgba(255, 255, 255, 0.045)
  );
  --glass-core: linear-gradient(
    155deg,
    rgba(21, 28, 38, 0.74),
    rgba(10, 13, 19, 0.68) 42%,
    rgba(8, 10, 16, 0.82)
  );
  --panel-fill: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.08),
    rgba(255, 255, 255, 0.025) 18%,
    rgba(255, 255, 255, 0.015) 62%,
    rgba(255, 255, 255, 0.035)
  );
  --glass-shadow: 0 22px 64px rgba(0, 0, 0, 0.34);
  --panel-shadow: 0 16px 42px rgba(0, 0, 0, 0.18);
  --glow: 0 16px 44px rgba(200, 155, 108, 0.1);

  --backdrop-filter-blur: blur(22px);
  --background-alpha: 0.5;
  --font-color: var(--text);
  --font-shadow: 0 2px 8px rgba(0, 0, 0, 0.9), 0 1px 2px rgba(0, 0, 0, 0.8);
}

/* =~= Base =~= */
* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  background: rgb(var(--surface-900));
  color-scheme: dark;
}

body {
  margin: 0;
  color: var(--text);
  font-family: "Exo 2", system-ui, sans-serif;
  font-weight: 500;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  background:
    linear-gradient(
      135deg,
      rgba(255, 240, 219, 0.06),
      transparent 28%,
      transparent 72%,
      rgba(255, 214, 163, 0.04)
    ),
    linear-gradient(180deg, rgb(var(--surface-900)) 0%, rgb(var(--surface-800)) 48%, rgb(var(--surface-900)) 100%);
}

picture {
  display: contents;
}

body::before {
  content: "";
  position: fixed;
  inset: -12% -8%;
  background:
    linear-gradient(110deg, rgba(255, 255, 255, 0.06), transparent 20%, transparent 78%, rgba(255, 216, 171, 0.06)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 22%, transparent 80%, rgba(255, 216, 171, 0.04));
  opacity: 0.38;
  pointer-events: none;
  z-index: 0;
}

.ph {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

code,
.monospace {
  font-family: "DejaVu Sans Mono", "Courier New", monospace;
}

.noselect {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

.text {
  text-shadow: var(--font-shadow);
}

/* =~= Glass panel utility — used on cards, panels, toolbars =~= */
.backdrop {
  position: relative;
  backdrop-filter: var(--backdrop-filter-blur);
  -webkit-backdrop-filter: var(--backdrop-filter-blur);
  background: var(--glass-fill), var(--glass-core);
  border: 1px solid var(--glass-border-soft);
  border-radius: 18px;
  box-shadow: var(--glass-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* =~= Buttons =~= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 15px 24px;
  border-radius: 12px;
  border: 1px solid transparent;
  font: inherit;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 0.2s, background 0.2s, border-color 0.2s, box-shadow 0.2s;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 10px 24px rgba(0, 0, 0, 0.18);
}

.btn:hover {
  transform: translateY(-1px);
}

.btn-primary {
  background: linear-gradient(180deg, rgb(var(--primary-300)), rgb(var(--primary-500)));
  color: rgb(var(--surface-900));
  border-color: rgba(255, 240, 219, 0.22);
}

.btn-primary:hover {
  background: linear-gradient(180deg, rgb(var(--primary-200)), rgb(var(--primary-400)));
}

.btn-ghost {
  border-color: var(--glass-border-soft);
  color: var(--text);
  background: var(--glass-fill), linear-gradient(180deg, rgba(20, 26, 36, 0.7), rgba(9, 12, 18, 0.64));
}

.btn-ghost:hover {
  border-color: rgba(255, 216, 171, 0.3);
  color: var(--accent-2);
}

.btn-sm  { padding: 10px 18px; font-size: 13px; }
.btn-lg  { padding: 18px 32px; font-size: 15px; }

/* =~= A11y native high-contrast =~= */
@media (prefers-contrast: more) {
  :root {
    --text: #ffffff;
    --line: rgba(255, 255, 255, 0.5);
    --glass-border: rgba(255, 255, 255, 0.55);
  }
  a { text-decoration: underline; }
}

@media (forced-colors: active) {
  .btn, input, button {
    border: 1px solid CanvasText;
    forced-color-adjust: none;
  }
}