/* RocketRez Design Tokens v1.0
 * Drop-in stylesheet. Import once at the top of your app:
 *   <link rel="stylesheet" href="/assets/tokens.css">
 * Then use the variables (var(--brand), var(--ink-50), etc.) anywhere.
 *
 * Source of truth: rr-launchpad/BRAND_GUIDE.md
 */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;600&display=swap');

:root {
  color-scheme: light;

  /* Surfaces — warm off-white, never pure gray */
  --bg:          #fafaf7;
  --surface:     #ffffff;
  --border:      #e5e0d4;
  --border-soft: #ece8df;

  /* Ink — desaturated navy, four-step ramp */
  --ink:    #1c2030;
  --ink-70: #4a4f60;
  --ink-50: #6b6258;
  --ink-30: #aaa499;

  /* Brand — RocketRez blue, three-step ramp + black + soft tint */
  --brand:            #0453fb;  /* canonical brand */
  --brand-blue:       #0051f9;  /* used in gradients */
  --brand-blue-light: #2c6ffa;
  --brand-dark:       #0341cc;  /* link text on light bg */
  --brand-black:      #131313;  /* gradient anchor, never on body text */
  --brand-soft:       #e8efff;  /* tinted backgrounds */

  /* Semantic accents */
  --accent:      #d97706;  /* highlights, callouts */
  --eliminated:  #c9462c;  /* removed / blocker red */
  --shifted:     #b87900;  /* moved / amber */
  --opportunity: #2e7a4d;  /* won / green */
  --risk:        #5b3f8b;  /* watch / purple */
  --planned:     #c7c0b1;  /* pale neutral, never competes with status */

  /* T-shirt sizes — warm-to-cool ramp, no collisions with status colors */
  --size-xs: #c9a45a;
  --size-s:  #c2185b;
  --size-m:  #c8362a;
  --size-l:  #b87900;  /* shares hue with --shifted */
  --size-xl: #5b3f8b;  /* shares hue with --risk */

  /* Type scale — fixed pixel ramp; resist arbitrary values */
  --fs-xs:   10.5px;  /* eyebrow / caps labels */
  --fs-sm:   11px;    /* meta, pills */
  --fs-base: 13px;    /* body */
  --fs-md:   14px;    /* default page text */
  --fs-lg:   16px;    /* section h2 */
  --fs-xl:   22px;    /* page h1 */

  /* Letter-spacing — only two values: tight headings, eyebrow caps */
  --ls-tight:    -0.01em;
  --ls-eyebrow:   0.08em;

  /* Radii — three steps */
  --r-pill: 999px;
  --r-md:   8px;
  --r-lg:   10px;
  --r-xl:   14px;

  /* Elevation — flat → modal */
  --shadow-1: 0 1px 2px rgba(15,23,42,0.04);
  --shadow-2: 0 4px 14px rgba(0,0,0,0.04);
  --shadow-3: 0 4px 24px rgba(0,0,0,0.06);
  --shadow-pop: 0 12px 32px rgba(0,0,0,0.14);
  --shadow-brand: 0 3px 10px rgba(4, 83, 251, 0.22);

  /* Layout */
  --container: 1100px;
  --gutter:    24px;
}

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

body {
  font-family: 'Archivo', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: var(--fs-md);
  line-height: 1.45;
  margin: 0;
  -webkit-font-smoothing: antialiased;
}

* { box-sizing: border-box; }

code, .mono {
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: var(--fs-base);
}

.value, .num, .tnum {
  font-feature-settings: "tnum";
  font-weight: 700;
}

/* ---- Primitives any RocketRez surface should reuse verbatim ---- */

.rr-brandbar {
  background: linear-gradient(180deg, var(--brand-black) 0%, var(--brand-blue) 100%);
  color: #fff;
  padding: 14px 0;
}
.rr-brandbar-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.rr-receipts-bar {
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-blue-light) 100%);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 6px 0;
  box-shadow: 0 4px 14px rgba(4, 83, 251, 0.25);
  text-shadow: 0 1px 2px rgba(0,0,0,0.12);
}

.rr-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 18px 20px;
  margin-bottom: 16px;
  box-shadow: var(--shadow-1);
}

.rr-eyebrow {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  font-weight: 800;
  color: var(--ink-50);
}

.rr-pill {
  display: inline-block;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: var(--r-pill);
  white-space: nowrap;
}
.rr-pill--brand    { background: var(--brand); color: #fff; }
.rr-pill--archive  { background: var(--bg); color: var(--ink-50); border: 1px solid var(--border); }
.rr-pill--inflight { background: #fff7e0; color: var(--shifted); border: 1px solid #f1d68b; }

.rr-button {
  font-family: inherit;
  font-weight: 700;
  font-size: 12px;
  background: var(--brand);
  color: #fff;
  padding: 5px 13px;
  border: none;
  border-radius: var(--r-pill);
  letter-spacing: 0.01em;
  cursor: pointer;
  box-shadow: var(--shadow-brand);
  transition: box-shadow 0.15s, transform 0.1s;
}
.rr-button:hover { box-shadow: 0 6px 18px rgba(4, 83, 251, 0.35); }

/* Content card with brand left rule + tinted gradient — the workhorse */
.rr-card-accent {
  background: linear-gradient(180deg, var(--brand-soft) 0%, var(--surface) 100%);
  border-left: 3px solid var(--brand);
  padding: 14px 18px;
  border-radius: var(--r-lg);
  font-size: 13.5px;
  line-height: 1.55;
}

/* Pod accent system — set --pod on a parent to recolor the whole subtree */
[data-pod="origin"]    { --pod: var(--brand);       --pod-soft: var(--brand-soft); }
[data-pod="orion"]     { --pod: var(--risk);        --pod-soft: #efe9f6; }
[data-pod="reporting"] { --pod: var(--opportunity); --pod-soft: #e6f4ea; }
[data-pod="icp"]       { --pod: var(--accent);      --pod-soft: #fef3c7; }