/* =========================================================
   SacMap — Colors & Type
   Single source of truth for the SacMap visual foundation.
   Mirrors source/css/style.css but adds semantic tokens.
   ========================================================= */

:root {
  /* ── Brand palette ───────────────────────────────────── */
  --sac-gold:       #d4af37;   /* Sacramento gold — primary accent */
  --sac-gold-hover: #caa531;   /* darker gold for press */
  --kings-purple:   #7B3FAD;   /* Kings purple — "Light the Beam" */
  --kings-purple-hover: #6a3596;
  --kings-silver:   #63727A;   /* secondary brand neutral */
  --deep-black:     #0b0b0f;   /* primary page background */
  --off-white:      #fafafa;   /* primary text / fg */

  /* ── Status colors ───────────────────────────────────── */
  --status-success: #44bb66;   /* green LED, "Live" pulse */
  --status-error:   #cc4455;   /* red LED, "Loss" */
  --status-info:    var(--sac-gold);
  --status-muted:   rgba(250, 250, 250, .5);

  /* ── Semantic foreground ─────────────────────────────── */
  --fg-1: var(--off-white);            /* headings + emphasis */
  --fg-2: rgba(250, 250, 250, .70);    /* body copy */
  --fg-3: rgba(250, 250, 250, .50);    /* meta / labels */
  --fg-4: rgba(250, 250, 250, .30);    /* placeholders */
  --fg-on-gold: #111;                  /* text on gold buttons */

  /* ── Semantic backgrounds ────────────────────────────── */
  --bg-page:      var(--deep-black);
  --bg-card:      rgba(255, 255, 255, .03);
  --bg-card-hi:   rgba(255, 255, 255, .04);
  --bg-input:     rgba(0, 0, 0, .40);
  --bg-overlay:   rgba(0, 0, 0, .55);   /* nav */
  --bg-cta-soft:  rgba(212, 175, 55, .06); /* purchase CTA */
  --bg-pill-gold: rgba(212, 175, 55, .12); /* emoji bullet pill */
  --bg-step:      rgba(212, 175, 55, .15); /* step number circle */

  /* ── Borders (gold-tinted, semi-transparent) ─────────── */
  --border-faint:   rgba(212, 175, 55, .10);
  --border-soft:    rgba(212, 175, 55, .15);
  --border-default: rgba(212, 175, 55, .18);
  --border-strong:  rgba(212, 175, 55, .25);
  --border-emphasis:rgba(212, 175, 55, .30);
  --border-row:     rgba(255, 255, 255, .04); /* table row dividers */

  /* ── Typography ──────────────────────────────────────── */
  /* SacMap uses Bootstrap 5.3 defaults — system UI stack.
     No custom webfont is loaded by the source site. If a
     branded display face is desired in future, swap --font-display. */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, "Noto Sans", sans-serif,
               "Apple Color Emoji", "Segoe UI Emoji";
  --font-mono: SFMono-Regular, Menlo, Monaco, Consolas,
               "Liberation Mono", "Courier New", monospace;
  --font-display: var(--font-sans); /* same stack, heavier weight */

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-black:    800;

  /* Type ramp (matches Bootstrap utility classes used in source) */
  --fs-display:  3.0rem;     /* .display-5 */
  --fs-h1:       2.5rem;
  --fs-h2:       2.0rem;
  --fs-h3:       1.5rem;
  --fs-h4:       1.25rem;
  --fs-h5:       1.10rem;
  --fs-h6:       1.00rem;
  --fs-lead:     1.25rem;
  --fs-body:     1.00rem;
  --fs-small:    0.90rem;
  --fs-xsmall:   0.80rem;
  --fs-tiny:     0.75rem;   /* uppercase labels, table headers */

  --lh-tight: 1.15;
  --lh-snug:  1.30;
  --lh-base:  1.55;

  --ls-tight:  -0.01em;
  --ls-normal: 0;
  --ls-loose:  0.05em;     /* uppercase eyebrows / table headers */
  --ls-looser: 0.08em;     /* config-card eyebrow */

  /* ── Radii ──────────────────────────────────────────── */
  --radius-xs: 5px;        /* .btn-remove */
  --radius-sm: 7px;        /* inputs, .btn-add */
  --radius-md: 9px;        /* .btn-config */
  --radius-lg: 10px;       /* config-block <pre> */
  --radius-xl: 12px;       /* .config-card */
  --radius-2xl: 14px;      /* .purchase-cta-card */
  --radius-pill: 999px;    /* .tag, .brand-dot */

  /* ── Spacing scale (Bootstrap-aligned) ───────────────── */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;

  /* ── Shadows / glows ─────────────────────────────────── */
  --glow-gold:   0 0 18px rgba(212, 175, 55, .75);   /* brand dot */
  --glow-purple: 0 0 20px rgba(123, 63, 173, .40);   /* beam-burst text */
  --pulse-success: 0 0 0 6px rgba(68, 187, 102, 0);

  /* ── Hero / page gradients ───────────────────────────── */
  --grad-hero:
    radial-gradient(900px 280px at 10% 0%, rgba(212,175,55,.20), transparent 60%),
    radial-gradient(900px 280px at 90% 0%, rgba(212,175,55,.10), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,0));
  --grad-purchase-hero:
    radial-gradient(600px 200px at 50% 0%, rgba(212,175,55,.15), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,0));

  /* ── Motion ──────────────────────────────────────────── */
  --ease-out: cubic-bezier(.2,.7,.2,1);
  --dur-fast: 150ms;
  --dur-base: 200ms;
  --dur-slow: 600ms;
}

/* =========================================================
   Base / element defaults
   ========================================================= */
html, body {
  background: var(--bg-page);
  color: var(--fg-1);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-base);
}

h1, .h1 { font-size: var(--fs-h1); font-weight: var(--fw-bold); line-height: var(--lh-tight); color: var(--fg-1); }
h2, .h2 { font-size: var(--fs-h2); font-weight: var(--fw-bold); line-height: var(--lh-tight); color: var(--fg-1); }
h3, .h3 { font-size: var(--fs-h3); font-weight: var(--fw-semibold); line-height: var(--lh-snug); color: var(--fg-1); }
h4, .h4 { font-size: var(--fs-h4); font-weight: var(--fw-semibold); color: var(--fg-1); }
h5, .h5 { font-size: var(--fs-h5); font-weight: var(--fw-semibold); color: var(--fg-1); }
h6, .h6 { font-size: var(--fs-h6); font-weight: var(--fw-semibold); color: var(--fg-1); }

.display { font-size: var(--fs-display); font-weight: var(--fw-bold); line-height: var(--lh-tight); }
.lead    { font-size: var(--fs-lead);    color: var(--fg-2); }

p        { color: var(--fg-2); line-height: var(--lh-base); }

code, pre, kbd, samp {
  font-family: var(--font-mono);
  color: var(--sac-gold);
  font-size: var(--fs-small);
}

pre.config-block {
  background: var(--bg-input);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  color: var(--fg-1);
  font-size: 0.85rem;
  overflow-x: auto;
}

/* Eyebrow / overline (used on config-card h3 + table th) */
.eyebrow {
  font-size: var(--fs-tiny);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-looser);
  color: var(--sac-gold);
}

/* Helpers carried from source */
.gold   { color: var(--sac-gold); }
.purple { color: var(--kings-purple); }