/* Stetho — Premium dark + gold deal-room aesthetic.
   Cormorant Garamond serif · Outfit sans · Space Mono. */

@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,600&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400&display=swap");

:root {
  /* Obsidian — deep cool ink scale (the brand lives here) */
  --obsidian-950: oklch(0.13 0.010 250);
  --obsidian-900: oklch(0.16 0.012 250);   /* primary surface */
  --obsidian-800: oklch(0.20 0.013 250);   /* surface-2 */
  --obsidian-700: oklch(0.25 0.014 250);   /* surface-3 */
  --obsidian-600: oklch(0.32 0.014 250);
  --obsidian-500: oklch(0.42 0.012 250);
  --obsidian-400: oklch(0.55 0.010 250);
  --obsidian-300: oklch(0.68 0.008 250);
  --obsidian-200: oklch(0.80 0.006 250);

  /* Bone — warm light foreground */
  --bone:    oklch(0.94 0.008 80);
  --bone-2:  oklch(0.86 0.010 80);
  --bone-3:  oklch(0.74 0.010 80);
  --bone-4:  oklch(0.58 0.012 80);

  /* Gold — the single brand accent */
  --gold-900: oklch(0.34 0.07 80);
  --gold-700: oklch(0.50 0.10 80);
  --gold-500: oklch(0.72 0.12 80);   /* primary */
  --gold-300: oklch(0.84 0.10 80);
  --gold-100: oklch(0.92 0.05 80);

  /* Semantic (figures only) */
  --pos:      oklch(0.65 0.16 145);
  --pos-soft: oklch(0.30 0.08 145);
  --neg:      oklch(0.65 0.20 25);
  --neg-soft: oklch(0.30 0.10 25);

  /* Light surface (for non-dark surfaces like marketing OG) */
  --paper:   oklch(0.97 0.008 80);

  /* Type */
  --serif: "Cormorant Garamond", "Source Serif Pro", Georgia, serif;
  --sans:  "Outfit", "Söhne", system-ui, -apple-system, sans-serif;
  --mono:  "Space Mono", "IBM Plex Mono", ui-monospace, monospace;

  /* Radius — soft + classical */
  --r-2: 2px;
  --r-3: 3px;
  --r-4: 4px;
  --r-6: 6px;
  --r-8: 8px;
}

.st-root {
  font-family: var(--sans);
  color: var(--bone);
  background: var(--obsidian-900);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;

  /* Override shared BrandNav tokens for dark theme */
  --surface: var(--obsidian-900);
  --surface-2: var(--obsidian-800);
  --ink-200: var(--obsidian-700);
  --ink-100: var(--obsidian-800);
  --ink-300: var(--obsidian-600);
  --ink-500: var(--bone-4);
  --ink-600: var(--bone-3);
  --ink-700: var(--bone-2);
  --ink-800: var(--bone);
  --ink-950: var(--bone);
  --volt-500: var(--gold-500);
  --volt-700: var(--gold-700);
}

.st-root .serif {
  font-family: var(--serif);
  font-feature-settings: "lnum", "kern";
  letter-spacing: -0.005em;
}

.st-root .num, .st-root .mono {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums slashed-zero;
}

.st-root .micro {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--gold-500);
}

/* Gold-rule divider (used as a recurring motif) */
.st-rule-gold {
  border: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--gold-500) 12%, var(--gold-500) 88%, transparent);
  margin: 0;
}
.st-rule { border: 0; border-top: 1px solid var(--obsidian-700); margin: 0; }
.st-rule-bone { border: 0; border-top: 1px solid var(--bone-4); margin: 0; opacity: 0.3; }

/* Pill */
.st-root .pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  border-radius: var(--r-2);
  background: var(--obsidian-800);
  color: var(--bone-2);
  border: 1px solid var(--obsidian-700);
}
.st-root .pill.gold { background: transparent; color: var(--gold-500); border-color: var(--gold-700); }
.st-root .pill.pos  { background: var(--pos-soft);  color: oklch(0.85 0.16 145); border-color: transparent; }
.st-root .pill.neg  { background: var(--neg-soft);  color: oklch(0.85 0.18 25); border-color: transparent; }

/* Buttons */
.st-root .btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 20px;
  font-family: var(--sans);
  font-size: 13.5px;
  font-weight: 600;
  border-radius: var(--r-2);
  cursor: pointer;
  border: 1px solid transparent;
  transition: background .12s;
  white-space: nowrap;
  letter-spacing: -0.005em;
}
.st-root .btn-primary { background: var(--gold-500); color: var(--obsidian-950); }
.st-root .btn-ghost   { background: transparent; color: var(--bone); border-color: var(--obsidian-600); }
.st-root .btn-bone    { background: var(--bone); color: var(--obsidian-900); }

/* Input */
.st-root .input {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px;
  font-family: var(--sans); font-size: 14px;
  color: var(--bone-2);
  background: var(--obsidian-800);
  border: 1px solid var(--obsidian-700);
  border-radius: var(--r-3);
}
.st-root .input .kbd {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 10px;
  padding: 1px 6px;
  border: 1px solid var(--obsidian-600);
  border-radius: 2px;
  color: var(--bone-3);
}

/* Card */
.st-root .card {
  background: var(--obsidian-800);
  border: 1px solid var(--obsidian-700);
  border-radius: var(--r-4);
}

/* Light/paper card (for marketing & invoice surfaces) */
.st-root .paper-card {
  background: var(--paper);
  color: var(--obsidian-900);
  border: 1px solid var(--bone-3);
  border-radius: var(--r-4);
}

/* Subtle texture for hero panels */
.st-grain {
  background-image:
    radial-gradient(ellipse at top right, oklch(0.34 0.07 80 / 0.18) 0%, transparent 50%),
    radial-gradient(ellipse at bottom left, oklch(0.20 0.013 250 / 0.5) 0%, transparent 60%);
}