/* =========================================================
   THE PRESTIGE — colors + type tokens
   Source of truth for brand visuals.
   Mirror of values lifted from source/styles.css.
   ========================================================= */

@font-face {
  font-family: "Batmfa";
  /* PROXY ONLY — true Batmfa.ttf (chrome/metallic block) is not yet in repo.
     Download missing — using Archivo Black as visual fallback.
     The real wordmark is delivered as the_prestige_logo.png. */
  src: local("Archivo Black");
  font-display: swap;
}

@import url("https://fonts.googleapis.com/css2?family=Archivo+Black&family=Manrope:wght@400;500;700;800&display=swap");

:root {
  /* ---------- Color: neutrals (the obsidian base) ---------- */
  --bg:            #151515;   /* page base — near-black, never pure */
  --bg-elev:      #1b1727;   /* cards, surface panels (deepest) */
  --bg-elev-2:    #221b31;   /* raised elements */
  --ink:           #f0e9ff;   /* highest contrast text on dark */
  --text:          #d8d8eb;   /* body text */
  --text-on-light: #151515;   /* used on silver chrome surfaces */
  --muted:         #b7a8d8;   /* sub-copy, captions */
  --line:          #6f57a5;   /* default border on dark surfaces */
  --line-soft:     rgba(193, 193, 219, 0.28);

  /* ---------- Color: brand (purple → silver) ---------- */
  --brand:         #7f5bbc;   /* primary purple, used for fills */
  --brand-dark:    #65459f;   /* hover / pressed primary */
  --brand-bright:  #b98eff;   /* accent / glow / hero gradients */
  --brand-glow:    #caa5ff;   /* hover state of bright buttons */
  --silver:        #c1c1db;   /* signature chrome silver */
  --silver-dark:   #a6a6c2;
  --silver-glow:   rgba(193, 193, 219, 0.62);

  /* ---------- Color: semantic (status) ---------- */
  --success:       #6dd28a;
  --warn:          #f3c969;
  --danger:        #ff6f7a;
  --info:          #88a9ff;

  /* ---------- Color: tints (translucent overlays) ---------- */
  --brand-tint-12:   rgba(185, 142, 255, 0.12);
  --brand-tint-22:   rgba(185, 142, 255, 0.22);
  --brand-tint-44:   rgba(185, 142, 255, 0.44);
  --silver-tint-08:  rgba(193, 193, 219, 0.08);
  --silver-tint-16:  rgba(193, 193, 219, 0.16);
  --silver-tint-28:  rgba(193, 193, 219, 0.28);

  /* ---------- Color: gradients (the brand “signature”) ---------- */
  --grad-header:    linear-gradient(90deg, #8f60df, #7448c6);
  --grad-header-alt:linear-gradient(90deg, #6849a3, #563a8a);
  --grad-card:      linear-gradient(165deg, rgba(185, 142, 255, 0.12), rgba(21, 21, 21, 0.9));
  --grad-card-alt:  linear-gradient(168deg, rgba(127, 91, 188, 0.18), rgba(21, 21, 21, 0.94));
  --grad-section:   linear-gradient(180deg, rgba(185, 142, 255, 0.14), rgba(21, 21, 21, 0.18));
  --grad-hero:
    radial-gradient(1200px 520px at 92% -8%, rgba(185, 142, 255, 0.34), rgba(185, 142, 255, 0)),
    radial-gradient(900px 420px at -10% 22%, rgba(185, 142, 255, 0.20), rgba(185, 142, 255, 0)),
    #151515;
  --grad-chrome:    linear-gradient(180deg, #f4f3ff 0%, #c1c1db 35%, #6e6f8c 60%, #c1c1db 80%, #f4f3ff 100%);
  --grad-chrome-bezel: linear-gradient(180deg, #e6e4f5 0%, #a9a9c4 28%, #4d4960 55%, #878399 82%, #dcdaee 100%);
  --grad-chrome-edge:  linear-gradient(180deg, rgba(255,255,255,.65), rgba(255,255,255,0) 30%, rgba(0,0,0,.45));
  --grad-well:         linear-gradient(180deg, rgba(10,8,16,.94), rgba(28,22,42,.9));
  --grad-card-chrome:
    radial-gradient(120% 80% at 50% -10%, rgba(193,193,219,.16), transparent 55%),
    linear-gradient(168deg, rgba(127, 91, 188, 0.22), rgba(21, 21, 21, 0.96));

  /* ---------- Type: families ---------- */
  --font-display:  "Archivo Black", "Inter Tight", system-ui, sans-serif;
  --font-body:     "Manrope", system-ui, sans-serif;
  --font-mark:     "Batmfa", "Archivo Black", sans-serif; /* brand wordmark proxy */
  --font-mono:     "JetBrains Mono", "Courier New", Courier, monospace;

  /* ---------- Type: scale (display) ---------- */
  --fs-display:    clamp(2.4rem, 5.4vw, 4.8rem);
  --fs-h1:         clamp(2.1rem, 4.6vw, 4.0rem);
  --fs-h2:         clamp(1.5rem, 3.0vw, 2.2rem);
  --fs-h3:         1.08rem;

  /* ---------- Type: scale (body) ---------- */
  --fs-lead:       1.15rem;
  --fs-body:       1.00rem;
  --fs-sm:         0.92rem;
  --fs-xs:         0.82rem;
  --fs-eyebrow:    0.77rem;

  /* ---------- Type: weights ---------- */
  --fw-reg:        400;
  --fw-med:        500;
  --fw-bold:       700;
  --fw-heavy:      800;

  /* ---------- Type: tracking ---------- */
  --tr-tight:     -0.02em;
  --tr-normal:     0;
  --tr-wide:       0.04em;
  --tr-eyebrow:    0.10em;   /* 100 */

  /* ---------- Spacing (4px ramp) ---------- */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-8:  32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;

  /* ---------- Radii ---------- */
  --r-xs:   6px;
  --r-sm:   10px;
  --r-md:   12px;
  --r-lg:   14px;
  --r-xl:   20px;       /* canonical card radius */
  --r-pill: 999px;      /* used by buttons, chips, avatar wells */

  /* ---------- Shadows / glows ---------- */
  --shadow-card:    0 18px 40px rgba(0, 0, 0, 0.44);
  --shadow-elev:    0 14px 28px rgba(0, 0, 0, 0.38);
  --shadow-pop:     0 16px 34px rgba(0, 0, 0, 0.46);
  --shadow-btn:     0 8px 20px rgba(92, 93, 165, 0.35);
  --glow-brand:     0 0 0 3px rgba(185, 142, 255, 0.26), 0 12px 28px rgba(0, 0, 0, 0.42);
  --glow-silver:    0 0 0 3px rgba(255, 255, 255, 0.80), 0 10px 24px rgba(92, 93, 165, 0.35);

  /* ---------- Borders ---------- */
  --border-card:    1px solid rgba(185, 142, 255, 0.44);
  --border-card-alt:1px solid rgba(193, 193, 219, 0.28);
  --border-input:   1px solid rgba(193, 193, 219, 0.32);

  /* ---------- Motion ---------- */
  --ease-out:       cubic-bezier(.2, .7, .2, 1);
  --ease-in-out:    cubic-bezier(.45, 0, .25, 1);
  --dur-fast:       0.16s;
  --dur-base:       0.20s;
  --dur-slow:       0.32s;
}

/* =========================================================
   Semantic element styles — drop into any page after vars
   ========================================================= */

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1 {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  text-transform: uppercase;
  line-height: 1.05;
  margin: 0 0 var(--s-4);
  color: var(--ink);
  max-width: 15ch;
  letter-spacing: var(--tr-tight);
}

h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  text-transform: uppercase;
  line-height: 1.1;
  margin: 0 0 var(--s-3);
  color: var(--ink);
}

h3 {
  font-family: var(--font-body);
  font-weight: var(--fw-heavy);
  font-size: var(--fs-h3);
  margin: 0 0 var(--s-3);
  color: var(--ink);
}

p {
  margin: 0 0 var(--s-3);
  font-size: var(--fs-body);
  color: var(--text);
}

.eyebrow,
small.eyebrow {
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: var(--tr-eyebrow);
  font-weight: var(--fw-heavy);
  font-size: var(--fs-eyebrow);
  color: var(--brand-dark);
  margin: 0 0 var(--s-3);
}

.lead { font-size: var(--fs-lead); color: var(--muted); }
.muted { color: var(--muted); }
.ink { color: var(--ink); }

/* code/mono — used in command-builder pre blocks */
code, pre, .mono {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  background: rgba(21, 21, 21, 0.6);
  border: 1px solid rgba(193, 193, 219, 0.24);
  border-radius: var(--r-sm);
  color: var(--ink);
}
pre { padding: var(--s-3); white-space: pre-wrap; word-break: break-word; }

/* hero stat numerals — Archivo Black is also the “stat” font here */
.stat {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  color: var(--ink);
  letter-spacing: var(--tr-tight);
}