/* =============================================================================
   ResultReach design tokens — v0.1 (2026-08-27)
   Source of truth: the Claude Design project "ResultReach Design System" → its tokens/*.css (copied to docs/redesign/tokens/).
   This file = those tokens + a bridge to KPI's existing Tailwind variable names. Names match the project; a few older aliases are kept.

   HOW TO USE IN KPI DASHBOARD
   1. Keep the existing shadcn-style variable names Tailwind already reads
      (--background, --primary, --muted-foreground, ...). Re-point them at the
      --rr-* tokens below instead of the old oklch navy values.
   2. Do NOT keep a .dark block. Single mode only (design decision DR-19).
   3. Never write a hex literal in a template again — use a token.
   ============================================================================= */

/* ---------------------------------------------------------------------------
   Contrast revision, 2026-08-27 (RM-035 Phase 2 audit).

   Measured in the browser on the live Overview, every text token was checked
   against every surface token it actually lands on. Seven failed WCAG AA:
   --rr-muted read 3.29-4.10:1 across ~25 elements and --rr-faint 1.99-2.48:1
   across ~29, which is most of the supporting text in the product. The values
   below clear 4.5:1 on paper, surface, surface-2, table-head, sidebar,
   seg-track and sidebar-search; --rr-off is a status dot, so it is held to the
   3:1 non-text bar instead.

   The cost is a shallower step between muted and faint (1.17 vs 1.65). The hue
   is unchanged: these are the same cool-green greys, darker. ink and ink-2 are
   untouched, so the primary hierarchy is intact.

   Known and deliberately NOT changed: white on --rr-orange measures 3.02:1, so
   the primary button fails AA for normal text. Fixing it means darkening the
   brand orange to roughly #b34a0a, which is a brand decision, not an audit one.
   --------------------------------------------------------------------------- */

:root {
  /* ---- Raw tokens ------------------------------------------------------- */
  --rr-ink: #17211f;
  --rr-ink-2: #374440;
  --rr-muted: #525d59;
  --rr-faint: #5c6763;
  --rr-paper: #f6f7f5;
  --rr-surface: #ffffff;
  --rr-surface-2: #f0f3f1;
  --rr-table-head: #fafbfa;        /* table header */
  --rr-row-hover: #fafbf9;
  --rr-surface-head: var(--rr-table-head);   /* alias (older name) */
  --rr-sidebar: #eef0ed;
  --rr-sidebar-hover: rgba(255,255,255,.65);
  --rr-sidebar-search: #e4e7e3;
  --rr-sidebar-brand-border: #d8ddda;
  --rr-kbd-bg: #f8f9f7; --rr-kbd-border: #d7dcd9;
  --rr-nav-text: #56615d; --rr-nav-label: #616c68;
  --rr-seg-track: #e8ebe8;
  --rr-pulse: #25a87a;
  --rr-avatar-bg: #fde4d4; --rr-avatar-text: #9e420d;
  --rr-insight-label: #a9d7ce; --rr-insight-text: #c9e4de;
  --rr-promo-wash: #fff7f2; --rr-promo-border: #f7c9ad;
  --rr-switcher-border: #0f1614; --rr-switcher-tab: #c5cdc9;
  --rr-line: #dfe4e1;
  --rr-line-strong: #c3ccc8;

  --rr-teal: #087e72;
  --rr-teal-dark: #075d56;
  --rr-teal-soft: #e8f5f1;
  --rr-orange: #f56a19;
  --rr-orange-hover: #de5b10;
  --rr-orange-soft: #fff0e7;

  --rr-success: #23966b;
  --rr-success-text: #12704f;
  --rr-success-soft: #f0faf7;
  --rr-success-border: #b9ddd4;
  --rr-success-line: var(--rr-success-border);  /* alias */
  --rr-warn: #f56a19;
  --rr-warn-text: #9c5407;
  --rr-danger: #bc352b;
  --rr-danger-soft: #fcece9;
  --rr-off: #849089;
  --rr-off-soft: #eff1ef;
  --rr-off-text: #5a6561;

  --rr-chart-1: #087e72;   /* primary series — always teal */
  --rr-chart-2: #f56a19;   /* attention / second series */
  --rr-chart-3: #3b6fd1;
  --rr-chart-4: #a85b08;
  --rr-chart-5: #8b5cf6;
  --rr-chart-6: #23966b;
  --rr-chart-compare: #a8b2ae;  /* previous period, dashed */
  --rr-chart-grid: #e8ece9;
  --rr-chart-axis: #929c98;

  --rr-font: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --rr-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --rr-r-sm: 8px;
  --rr-r: 12px;
  --rr-r-brand: 10px;
  --rr-r-pill: 999px;
  --rr-shadow: 0 1px 2px rgba(19,35,31,.04), 0 8px 24px rgba(19,35,31,.035);
  --rr-shadow-sm: 0 1px 2px rgba(19,35,31,.05);
  --rr-focus-ring: 0 0 0 3px rgba(8,126,114,.22);
  --rr-focus: var(--rr-focus-ring);  /* alias */
  --rr-shadow-seg: 0 1px 3px rgba(19,35,31,.1);
  --rr-shadow-drawer: 12px 0 40px rgba(0,0,0,.14);
  --rr-t: 220ms; --rr-t-hover: 150ms; --rr-t-drawer: 240ms;

  --rr-s2: 8px; --rr-s2-5: 10px; --rr-s3: 12px; --rr-s3-5: 14px; --rr-s4: 16px; --rr-s4-5: 18px; --rr-s5: 20px; --rr-s6: 24px; --rr-s7: 28px; --rr-gutter: 30px; --rr-s9: 36px;
  --rr-sidebar-w: 244px;
  --rr-topbar-h: 70px;
  --rr-switcher-h: 48px;
  --rr-content-max: 1920px; --rr-card-gap: 16px; --rr-tile-gap: 12px;

  /* ---- Bridge: existing Tailwind/shadcn variable names -> tokens ---------- */
  --radius: 0.75rem;                       /* 12px cards; use rounded-lg (8px) for controls */
  --background: var(--rr-paper);
  --foreground: var(--rr-ink);
  --card: var(--rr-surface);
  --card-foreground: var(--rr-ink);
  --popover: var(--rr-surface);
  --popover-foreground: var(--rr-ink);
  --primary: var(--rr-orange);             /* primary ACTION colour */
  --primary-foreground: #ffffff;
  --secondary: var(--rr-surface-2);
  --secondary-foreground: var(--rr-ink-2);
  --muted: var(--rr-surface-2);
  --muted-foreground: var(--rr-muted);
  --accent: var(--rr-teal-soft);           /* system / selected tint */
  --accent-foreground: var(--rr-teal-dark);
  --destructive: var(--rr-danger);
  --destructive-foreground: #ffffff;
  --border: var(--rr-line);
  --input: var(--rr-line);
  --ring: var(--rr-teal);
  --chart-1: var(--rr-chart-1);
  --chart-2: var(--rr-chart-2);
  --chart-3: var(--rr-chart-3);
  --chart-4: var(--rr-chart-4);
  --chart-5: var(--rr-chart-5);
  --sidebar: var(--rr-sidebar);
  --sidebar-foreground: #56615d;
  --sidebar-primary: var(--rr-teal);
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: var(--rr-surface);     /* active nav item = white pill */
  --sidebar-accent-foreground: var(--rr-teal);
  --sidebar-border: var(--rr-line);
  --sidebar-ring: var(--rr-teal);
}

/* Base type */
body { font-family: var(--rr-font); color: var(--rr-ink); background: var(--rr-paper); -webkit-font-smoothing: antialiased; }
.rr-mono, .rr-num { font-family: var(--rr-mono); font-variant-numeric: tabular-nums; }
.rr-eyebrow { font-family: var(--rr-mono); text-transform: uppercase; letter-spacing: .09em; font-size: 10px; color: var(--rr-muted); }

/* ── Switcher bar (hub-served, DR-09; KPI integration spec v2 §2.6) ──
   Component rules copied from the hub's rr-components.css "Switcher bar"
   section, then three layout rules that move KPI's own chrome down 48px
   while the bar is on the page (body.has-hub-switcher). */
.rr-switcher { height: var(--rr-switcher-h); display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 16px; background: var(--rr-ink); color: #fff; border-bottom: 1px solid var(--rr-switcher-border); position: fixed; top: 0; left: 0; right: 0; z-index: 70; font-family: var(--rr-font); -webkit-font-smoothing: antialiased; }
.rr-switcher a { color: inherit; text-decoration: none; }
.rr-switcher-left, .rr-switcher-right, .rr-switcher-tabs { display: flex; align-items: center; min-width: 0; }
.rr-switcher-left { gap: 12px; } .rr-switcher-right { gap: 10px; flex-shrink: 0; } .rr-switcher-tabs { gap: 2px; }
.rr-switcher-tenant { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: var(--rr-r-sm); border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.06); font-size: 13px; font-weight: 600; white-space: nowrap; min-width: 0; }
.rr-switcher-tenant:hover { background: rgba(255,255,255,.1); }
.rr-switcher-tenant-name { overflow: hidden; text-overflow: ellipsis; }
.rr-switcher-chevron { color: #9ca7a3; flex-shrink: 0; }
.rr-switcher-mark { width: 22px; height: 22px; border-radius: 6px; background: var(--rr-orange); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 11px; flex-shrink: 0; }
.rr-switcher-sep { width: 1px; height: 20px; background: rgba(255,255,255,.14); flex-shrink: 0; }
.rr-switcher-tab { display: flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: var(--rr-r-sm); font-size: 13px; font-weight: 500; color: var(--rr-switcher-tab); white-space: nowrap; }
.rr-switcher-tab:hover { background: rgba(255,255,255,.08); color: #fff; }
.rr-switcher-tab.rr-active { background: #fff; color: var(--rr-ink); font-weight: 600; }
.rr-switcher-tab-icon { width: 18px; height: 18px; border-radius: 5px; background: rgba(255,255,255,.14); color: #fff; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.rr-switcher-tab.rr-active .rr-switcher-tab-icon { background: var(--rr-ink); }
.rr-switcher-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: var(--rr-r-sm); font-size: 12.5px; font-weight: 500; border: 1px solid rgba(255,255,255,.2); color: #fff; white-space: nowrap; }
.rr-switcher-btn:hover { background: rgba(255,255,255,.08); }
.rr-switcher-avatar { width: 26px; height: 26px; border-radius: 50%; background: var(--rr-orange); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; flex-shrink: 0; }
.rr-switcher :focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Layout: KPI's fixed sidebar, sticky topbar and mobile header all start at
   top:0; push each down by the bar's height while the bar is present. */
body.has-hub-switcher .sidebar-container { top: var(--rr-switcher-h); height: calc(100vh - var(--rr-switcher-h)); }
body.has-hub-switcher .dashboard-content-area { padding-top: var(--rr-switcher-h); }
body.has-hub-switcher .rr-topbar { top: var(--rr-switcher-h); }
body.has-hub-switcher .rr-skip:focus { top: calc(var(--rr-switcher-h) + 8px); }
@media (max-width: 1023px) {
  body.has-hub-switcher .rr-mobile-header { top: var(--rr-switcher-h); }
  body.has-hub-switcher .dashboard-content-area { padding-top: calc(var(--rr-switcher-h) + 3.5rem); } /* pt-14 + bar */
  body.has-hub-switcher .rr-topbar { top: calc(var(--rr-switcher-h) + 3.5rem); }
  .rr-switcher-tabs, .rr-switcher-all, .rr-switcher-sep { display: none; }
}