/* ==========================================================================
   RJD Design System — Tokens
   ------------------------------------------------------------------------
   Single source of truth for all colors, type, spacing, and motion.
   Import this file BEFORE any project-specific stylesheet.
   ========================================================================== */

:root {
  /* ---------- Brand: Green ----------
     Two greens, two jobs:
       Signal      (--brand-green-signal)     — light-ground accent (SOLUTIONS wordmark, focus rings, eyebrows, link underlines)
       Signal-400  (--brand-green-signal-400) — dark-ground accent (logo sidebar, RJ glyphs on the ink tile)
     They are not interchangeable. UI fills use Ink, not green. See LOGO.md §1.2. */

  --brand-green-signal:      #0E7A5F;  /* Signal — light-ground accent */
  --brand-green-signal-400:  #3DD9AC;  /* Signal 400 — dark-ground accent (logo sidebar, RJ glyphs) */

  /* ---------- Brand: Ink (cool near-black) ----------
     Ink is the workhorse fill — buttons, headings, body, logo tile. */
  --brand-ink:          #1B2A3A;  /* headings, body, logo tile fill */
  --brand-ink-700:      #2B3A4B;
  --brand-ink-500:      #4A5968;  /* secondary text */
  --brand-ink-400:      #6B7787;  /* tertiary, placeholders */
  --brand-ink-300:      #9099A5;  /* disabled, meta */

  /* ---------- Surfaces ---------- */
  --bg-page:            #F3F4F6;  /* app background */
  --bg-surface:         #FFFFFF;  /* cards, panels */
  --bg-subtle:          #F7F8FA;  /* input fields, zebra rows */
  --bg-muted:           #EEF0F3;
  --bg-dark:            #0E141B;  /* reverse sections */

  /* ---------- Borders ---------- */
  --border-subtle:      #E3E6EB;
  --border-default:     #D3D8DF;
  --border-strong:      #B4BCC7;

  /* ---------- Status ---------- */
  --status-success:     #2F9E6B;
  --status-warning:     #C9861A;
  --status-danger:      #C0433A;
  --status-info:        var(--brand-ink);

  /* ---------- Typography ---------- */
  --font-sans:          'Inter Tight', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono:          'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --fs-display:         clamp(2.5rem, 8vw, 4.5rem);
  --fs-h1:              clamp(2rem, 5.5vw, 3rem);
  --fs-h2:              clamp(1.5rem, 4vw, 2.25rem);
  --fs-h3:              clamp(1.125rem, 2.5vw, 1.5rem);
  --fs-body:            1rem;      /* never below on phones */
  --fs-small:           0.875rem;
  --fs-micro:           0.75rem;

  --lh-tight:           1.05;
  --lh-heading:         1.15;
  --lh-body:            1.55;

  --ls-display:         -0.02em;
  --ls-mono:            0.1em;
  --ls-eyebrow:         0.14em;

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

  /* ---------- Radius ---------- */
  --radius-sm:          4px;
  --radius-md:          6px;
  --radius-lg:          8px;
  --radius-full:        999px;

  /* ---------- Shadows (cool-toned) ---------- */
  --shadow-sm:          0 1px 2px rgba(27, 42, 58, 0.06);
  --shadow-md:          0 4px 12px rgba(27, 42, 58, 0.08);
  --shadow-lg:          0 16px 40px rgba(27, 42, 58, 0.12);

  /* ---------- Motion ---------- */
  --ease-out:           cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:           120ms;
  --dur-base:           180ms;
  --dur-slow:           280ms;

  /* ---------- Breakpoints (for JS — CSS uses media queries) ---------- */
  --bp-sm:              480px;
  --bp-md:              768px;
  --bp-lg:              1024px;
  --bp-xl:              1280px;
  --bp-2xl:             1536px;

  /* ---------- Layout ---------- */
  --shell-max:          1280px;
}

/* ==========================================================================
   Base resets — opinionated, RJD-friendly defaults
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--brand-ink);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video { display: block; max-width: 100%; }

h1, h2, h3, h4, h5, h6 { margin: 0; text-wrap: balance; letter-spacing: var(--ls-display); }
p { margin: 0; text-wrap: pretty; }

a { color: var(--brand-ink); text-decoration: none; }
a:hover { color: var(--brand-ink-700); }

:focus-visible {
  outline: 2px solid var(--brand-ink);
  outline-offset: 2px;
  border-radius: 2px;
}

::selection { background: var(--bg-muted); color: var(--brand-ink); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ==========================================================================
   Utility primitives
   ========================================================================== */

.shell {
  width: 100%;
  max-width: var(--shell-max);
  margin: 0 auto;
  padding: 0 20px;
}
@media (min-width: 768px)  { .shell { padding: 0 32px; } }
@media (min-width: 1280px) { .shell { padding: 0 48px; } }

.stack > * + * { margin-top: var(--space-4); }
.stack-lg > * + * { margin-top: var(--space-8); }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--brand-ink);
  margin: 0;
}

.display { font-size: var(--fs-display); font-weight: 700; line-height: var(--lh-tight); color: var(--brand-ink); }
.h1 { font-size: var(--fs-h1); font-weight: 700; line-height: var(--lh-heading); }
.h2 { font-size: var(--fs-h2); font-weight: 700; line-height: var(--lh-heading); }
.h3 { font-size: var(--fs-h3); font-weight: 600; line-height: 1.25; }
.lede { font-size: 1.125rem; color: var(--brand-ink-500); max-width: 56ch; }

.grid { display: grid; gap: var(--space-4); }
.grid--2 { grid-template-columns: 1fr; }
.grid--3 { grid-template-columns: 1fr; }
.grid--4 { grid-template-columns: 1fr; }
@media (min-width: 768px) {
  .grid { gap: var(--space-6); }
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
}

/* ==========================================================================
   Components — floor-level building blocks
   ========================================================================== */

/* Button */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 20px;
  border-radius: var(--radius-md);
  border: 1px solid var(--brand-ink);
  background: var(--brand-ink); color: #fff;
  font-family: var(--font-sans); font-weight: 600; font-size: 15px;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.btn:hover { background: var(--brand-ink-700); }
.btn:active { background: #000; }
.btn.ghost { background: transparent; color: var(--brand-ink); border-color: var(--border-strong); }
.btn.ghost:hover { border-color: var(--brand-ink); background: var(--bg-muted); }
.btn.green { background: var(--brand-ink); border-color: var(--brand-ink); }
.btn.green:hover { background: var(--brand-ink-700); border-color: var(--brand-ink-700); }
@media (min-width: 768px) { .btn { min-height: 40px; } }

/* Input */
.input, textarea.input {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-default);
  background: var(--bg-surface);
  color: var(--brand-ink);
  font-family: var(--font-sans);
  font-size: 16px; /* prevents iOS zoom */
  line-height: 1.4;
}
textarea.input { min-height: unset; resize: vertical; }
.input::placeholder { color: var(--brand-ink-400); }
.input:focus { border-color: var(--brand-ink); outline: 2px solid var(--brand-ink); outline-offset: 2px; }

.field { display: block; }
.field__label {
  display: block;
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: var(--ls-eyebrow); text-transform: uppercase;
  color: var(--brand-ink-400); margin-bottom: 6px;
}

/* Card */
.card {
  padding: 24px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

/* Pill */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  height: 28px; padding: 0 12px;
  border-radius: var(--radius-full);
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  background: var(--bg-muted); color: var(--brand-ink-700);
}
.pill .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--brand-green-signal); }