/* Card Vendor Suite — Obsidian Sage & Gold tokens */
:root {
  /* Surfaces */
  --obsidian: #050505;
  --surface: #0b0b0b;
  --surface-1: #111111;
  --surface-2: #161616;
  --surface-3: #1c1b1b;
  --surface-4: #201f1f;
  --surface-5: #2a2a2a;
  --surface-6: #353534;

  /* Ink */
  --ink: #e9e6e3;
  --ink-2: #d0c5af;
  --ink-3: #99907c;
  --ink-4: #5b5648;
  --ink-5: #3a382f;

  /* Accents */
  --gold: #d4af37;
  --gold-bright: #f2ca50;
  --gold-deep: #8a6f1c;
  --sage: #b5ccc1;
  --sage-deep: #394d45;
  --crimson: #c46060;

  /* Dividers / glass */
  --hairline: rgba(255, 255, 255, 0.06);
  --hairline-strong: rgba(255, 255, 255, 0.10);
  --gold-edge: rgba(212, 175, 55, 0.18);
  --gold-glow: rgba(212, 175, 55, 0.06);

  /* Type */
  --font-sans: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --font-display: 'Fraunces', 'Inter', serif; /* used sparingly for editorial moments */

  /* Spacing scale (8pt) */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;

  /* Radii */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;

  --gutter: 24px;
}

html, body { background: var(--obsidian); color: var(--ink); }

body {
  font-family: var(--font-sans);
  font-feature-settings: 'cv11', 'ss01', 'ss03';
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Type primitives */
.t-eyebrow {
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  font-weight: 600; color: var(--ink-3);
}
.t-mono { font-family: var(--font-mono); font-feature-settings: 'zero', 'ss01'; }

/* Glass surfaces */
.glass {
  background: rgba(17, 17, 17, 0.72);
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  border: 1px solid var(--hairline);
}
.glass-strong {
  background: rgba(22, 22, 22, 0.86);
  backdrop-filter: blur(28px) saturate(150%);
  -webkit-backdrop-filter: blur(28px) saturate(150%);
  border: 1px solid var(--hairline-strong);
}

/* Gold edge — light-catching highlight */
.gold-edge { position: relative; }
.gold-edge::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  border-radius: inherit;
  border: 1px solid var(--gold-edge);
  mask: linear-gradient(180deg, #000 0%, #000 30%, transparent 60%);
  -webkit-mask: linear-gradient(180deg, #000 0%, #000 30%, transparent 60%);
}

/* Hairline rule */
.hr-fade {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--hairline-strong), transparent);
  border: 0;
}

/* Sage chip */
.chip-sage {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  background: rgba(181, 204, 193, 0.10);
  color: var(--sage); border: 1px solid rgba(181, 204, 193, 0.18);
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600;
}
.chip-gold {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  background: rgba(212, 175, 55, 0.10);
  color: var(--gold-bright); border: 1px solid rgba(212, 175, 55, 0.20);
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600;
}

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: 8px; font-weight: 600;
  border-radius: 8px; transition: transform .12s ease, filter .15s ease, background .15s ease, color .15s ease;
  white-space: nowrap; cursor: pointer; user-select: none;
}
.btn-gold {
  background: var(--gold); color: #1a1300; padding: 12px 20px;
  box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 -1px 0 rgba(0,0,0,.25) inset, 0 10px 30px -12px rgba(212,175,55,.4);
}
.btn-gold:hover { filter: brightness(1.06); }
.btn-gold:active { transform: translateY(1px); }
.btn-ghost {
  color: var(--ink); padding: 12px 20px; border: 1px solid var(--hairline-strong);
  background: rgba(255,255,255,0.02);
}
.btn-ghost:hover { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.16); }

/* Focus */
:focus-visible { outline: 1px solid var(--gold); outline-offset: 2px; }

/* Diagonal hatch placeholder */
.hatch {
  background-color: var(--surface-2);
  background-image:
    repeating-linear-gradient(135deg, rgba(255,255,255,0.025) 0 1px, transparent 1px 10px);
}

/* Subtle grid */
.grid-bg {
  background-image:
    linear-gradient(var(--hairline) 1px, transparent 1px),
    linear-gradient(90deg, var(--hairline) 1px, transparent 1px);
  background-size: 32px 32px;
}

/* Noise (cheap css) */
.noise::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .035;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.6 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,.06); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.12); }
::-webkit-scrollbar-track { background: transparent; }