/* ===========================================================================
   Ronin Management Consultants LLC — Design Tokens & Base Components
   Version: 0.4.5 (2026-05-12)
   Source: Logo color extraction (k-means, n=8 clusters) + ronin-resume-agent
           existing layout patterns.

   Canonical location:
     C:\data\GitHub\RoninConsultants\shared-library\brand-and-design\ronin.css

   Distribution to tools:
     Copy this file into each tool's static/ directory at build/setup time.
     Do NOT link to an external URL — tools run locally and must work offline.

   Usage:
     <link rel="stylesheet" href="/static/ronin.css">
     Reference tokens via var(--ronin-*) in your own styles,
     or use the base component classes (.ronin-btn, .ronin-card, etc.).

   See:
     ronin-design-system-v0.4.md (this folder) for the full design system spec
     ronin-powerbi-theme.json (this folder) for Power BI parity
   =========================================================================== */

:root {
  /* -------------------------------------------------------------------------
     1. BRAND COLORS — derived from official logo
     ------------------------------------------------------------------------- */

  /* Ink scale (near-black with teal undertone) */
  --ronin-ink-900: #031A25;   /* Body text. Contrast vs white: 17.82:1 (AAA) */
  --ronin-ink-800: #063440;   /* Headings. Contrast vs white: 13.35:1 (AAA) */

  /* Teal scale (the brand accent family) */
  --ronin-teal-700: #035664;  /* Links, primary hover. 8.34:1 (AAA) */
  --ronin-teal-500: #04818F;  /* PRIMARY accent. 4.62:1 (AA) */
  --ronin-teal-100: #DEEDF0;  /* Accent surface (badges, hover bg) */

  /* Slate (cool gray) scale */
  --ronin-slate-700: #475A5E; /* Secondary text. 7.26:1 (AAA) */
  --ronin-slate-500: #798B90; /* Tertiary / muted text. 3.55:1 (AA-large) */
  --ronin-slate-300: #B0BDC2; /* Borders, dividers, disabled */

  /* Pure neutrals */
  --ronin-white: #FFFFFF;
  --ronin-bg:    #F5F5F5;     /* Page background (matches resume agent) */

  /* -------------------------------------------------------------------------
     2. SEMANTIC COLORS — kept aligned with existing ronin-resume-agent
        so all tools speak the same status language.
     ------------------------------------------------------------------------- */

  --ronin-success-500: #22C55E;
  --ronin-success-700: #065F46;
  --ronin-success-bg:  #ECFDF5;
  --ronin-success-border: #A7F3D0;

  --ronin-warning-500: #F59E0B;
  --ronin-warning-700: #92400E;
  --ronin-warning-bg:  #FEF3C7;

  --ronin-error-500: #EF4444;
  --ronin-error-700: #991B1B;
  --ronin-error-bg:  #FEF2F2;
  --ronin-error-border: #FECACA;

  --ronin-info-500: var(--ronin-teal-500);
  --ronin-info-700: var(--ronin-teal-700);
  --ronin-info-bg:  var(--ronin-teal-100);

  /* -------------------------------------------------------------------------
     3. COMPONENT ALIASES — point components at brand colors. Update these
        once and every component updates.
     ------------------------------------------------------------------------- */

  --ronin-primary:        var(--ronin-teal-500);
  --ronin-primary-hover:  var(--ronin-teal-700);
  --ronin-primary-bg:     var(--ronin-teal-100);
  --ronin-primary-text:   var(--ronin-teal-700);

  --ronin-text:           var(--ronin-ink-900);
  --ronin-text-secondary: var(--ronin-slate-700);
  --ronin-text-muted:     var(--ronin-slate-500);

  --ronin-surface:        var(--ronin-white);
  --ronin-surface-alt:    var(--ronin-bg);
  --ronin-border:         var(--ronin-slate-300);
  --ronin-border-subtle:  #E5E7EB;

  /* -------------------------------------------------------------------------
     4. TYPOGRAPHY
     ------------------------------------------------------------------------- */

  --ronin-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI",
                     "Helvetica Neue", Arial, sans-serif;
  --ronin-font-mono: Consolas, "Courier New", ui-monospace, monospace;

  --ronin-font-size-xs:   11px;
  --ronin-font-size-sm:   12px;
  --ronin-font-size-base: 14px;   /* Matches resume agent */
  --ronin-font-size-md:   15px;
  --ronin-font-size-lg:   17px;
  --ronin-font-size-xl:   22px;
  --ronin-font-size-2xl:  28px;
  --ronin-font-size-3xl:  36px;

  --ronin-line-height-tight:  1.2;
  --ronin-line-height-normal: 1.5;
  --ronin-line-height-loose:  1.6;

  --ronin-font-weight-regular: 400;
  --ronin-font-weight-medium:  500;
  --ronin-font-weight-semi:    600;

  /* -------------------------------------------------------------------------
     5. SPACING — 4px base scale
     ------------------------------------------------------------------------- */

  --ronin-space-1:  4px;
  --ronin-space-2:  8px;
  --ronin-space-3:  12px;
  --ronin-space-4:  16px;
  --ronin-space-5:  20px;
  --ronin-space-6:  24px;
  --ronin-space-8:  32px;
  --ronin-space-10: 40px;
  --ronin-space-12: 48px;
  --ronin-space-16: 64px;

  /* -------------------------------------------------------------------------
     6. RADIUS, BORDERS, FOCUS
     ------------------------------------------------------------------------- */

  --ronin-radius-sm:   4px;
  --ronin-radius-md:   6px;   /* Cards, inputs (matches resume agent) */
  --ronin-radius-lg:   8px;   /* Modals */
  --ronin-radius-pill: 999px; /* Tags, status pills */

  --ronin-border-width: 1px;
  --ronin-focus-ring: 0 0 0 2px rgba(4, 129, 143, 0.25);

  /* -------------------------------------------------------------------------
     7. LAYOUT
     ------------------------------------------------------------------------- */

  --ronin-content-max: 1400px;
  --ronin-sidebar-width: 240px;
}

/* ===========================================================================
   BASE STYLES
   =========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--ronin-font-sans);
  font-size: var(--ronin-font-size-base);
  line-height: var(--ronin-line-height-loose);
  color: var(--ronin-text);
  background: var(--ronin-bg);
}

code, pre, .ronin-mono {
  font-family: var(--ronin-font-mono);
}

a {
  color: var(--ronin-teal-700);
  text-decoration: none;
}
a:hover { text-decoration: underline; }
a:focus-visible {
  outline: none;
  box-shadow: var(--ronin-focus-ring);
  border-radius: var(--ronin-radius-sm);
}

h1, h2, h3, h4 {
  color: var(--ronin-ink-800);
  margin: 0 0 var(--ronin-space-3);
  line-height: var(--ronin-line-height-tight);
  font-weight: var(--ronin-font-weight-semi);
}
h1 { font-size: var(--ronin-font-size-xl); }
h2 { font-size: var(--ronin-font-size-lg); }
h3 { font-size: var(--ronin-font-size-md); }
h4 { font-size: var(--ronin-font-size-base); }

/* ===========================================================================
   COMPONENTS
   =========================================================================== */

/* ---------- Buttons ---------- */

.ronin-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--ronin-space-2);
  padding: var(--ronin-space-2) var(--ronin-space-4);
  border: 1px solid var(--ronin-border);
  border-radius: var(--ronin-radius-sm);
  background: var(--ronin-white);
  color: var(--ronin-ink-900);
  font-family: inherit;
  font-size: 13px;
  font-weight: var(--ronin-font-weight-medium);
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.ronin-btn:hover:not(:disabled) {
  background: var(--ronin-bg);
  border-color: var(--ronin-slate-500);
}
.ronin-btn:focus-visible {
  outline: none;
  box-shadow: var(--ronin-focus-ring);
}
.ronin-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.ronin-btn--primary {
  background: var(--ronin-primary);
  border-color: var(--ronin-primary);
  color: var(--ronin-white);
}
.ronin-btn--primary:hover:not(:disabled) {
  background: var(--ronin-primary-hover);
  border-color: var(--ronin-primary-hover);
}

.ronin-btn--danger {
  color: var(--ronin-error-700);
  border-color: var(--ronin-error-border);
}
.ronin-btn--danger:hover:not(:disabled) {
  background: var(--ronin-error-bg);
}

.ronin-btn--link {
  background: transparent;
  border: none;
  color: var(--ronin-teal-700);
  padding: 0;
}
.ronin-btn--link:hover:not(:disabled) {
  background: transparent;
  text-decoration: underline;
}

.ronin-btn--small { padding: var(--ronin-space-1) var(--ronin-space-3); font-size: 12px; }

/* ---------- Cards ---------- */

.ronin-card {
  background: var(--ronin-surface);
  border: 1px solid var(--ronin-border);
  border-radius: var(--ronin-radius-md);
  padding: var(--ronin-space-5);
}

.ronin-card__title {
  font-size: var(--ronin-font-size-base);
  font-weight: var(--ronin-font-weight-semi);
  color: var(--ronin-ink-800);
  margin-bottom: var(--ronin-space-4);
  display: flex;
  align-items: center;
  gap: var(--ronin-space-2);
}
.ronin-card__num {
  background: var(--ronin-primary);
  color: var(--ronin-white);
  font-size: var(--ronin-font-size-xs);
  font-weight: 700;
  width: 20px;
  height: 20px;
  border-radius: var(--ronin-radius-sm);
  display: grid;
  place-items: center;
}

/* ---------- Inputs ---------- */

.ronin-input,
.ronin-select,
.ronin-textarea {
  width: 100%;
  padding: var(--ronin-space-2) var(--ronin-space-3);
  border: 1px solid var(--ronin-slate-300);
  border-radius: var(--ronin-radius-sm);
  font-family: inherit;
  font-size: var(--ronin-font-size-base);
  background: var(--ronin-white);
  color: var(--ronin-ink-900);
}
.ronin-input:focus,
.ronin-select:focus,
.ronin-textarea:focus {
  outline: none;
  border-color: var(--ronin-primary);
  box-shadow: var(--ronin-focus-ring);
}
.ronin-label {
  display: block;
  font-size: var(--ronin-font-size-sm);
  color: var(--ronin-slate-700);
  margin-bottom: var(--ronin-space-1);
  font-weight: var(--ronin-font-weight-medium);
}

/* ---------- Badges ---------- */

.ronin-badge {
  display: inline-block;
  font-size: var(--ronin-font-size-xs);
  font-weight: var(--ronin-font-weight-semi);
  padding: 2px var(--ronin-space-2);
  border-radius: 10px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.ronin-badge--primary  { background: var(--ronin-teal-100);   color: var(--ronin-teal-700); }
.ronin-badge--success  { background: #D1FAE5;                 color: var(--ronin-success-700); }
.ronin-badge--warning  { background: var(--ronin-warning-bg); color: var(--ronin-warning-700); }
.ronin-badge--error    { background: var(--ronin-error-bg);   color: var(--ronin-error-700); }
.ronin-badge--neutral  { background: #F3F4F6;                 color: #4B5563; }

/* ---------- Stat cards (for KPI dashboards) ---------- */

.ronin-stat {
  background: var(--ronin-surface);
  border: 1px solid var(--ronin-border);
  border-radius: var(--ronin-radius-md);
  padding: var(--ronin-space-4) var(--ronin-space-5);
}
.ronin-stat__label {
  font-size: var(--ronin-font-size-xs);
  color: var(--ronin-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.ronin-stat__value {
  font-size: var(--ronin-font-size-2xl);
  font-weight: var(--ronin-font-weight-semi);
  color: var(--ronin-ink-900);
  margin-top: var(--ronin-space-1);
}
.ronin-stat__sub {
  font-size: var(--ronin-font-size-sm);
  color: var(--ronin-text-muted);
  margin-top: 2px;
}

/* ---------- Status bar (top of app shell) ---------- */

.ronin-status-bar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: var(--ronin-space-3);
  padding: var(--ronin-space-2) var(--ronin-space-5);
  background: var(--ronin-surface);
  border-bottom: 1px solid var(--ronin-border);
  font-size: 13px;
}
.ronin-status-bar__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ronin-slate-500);
}
.ronin-status-bar__dot--ok  { background: var(--ronin-success-500); }
.ronin-status-bar__dot--err { background: var(--ronin-error-500); }

/* ---------- Sidebar nav ---------- */

.ronin-sidebar {
  background: var(--ronin-surface);
  border: 1px solid var(--ronin-border);
  border-radius: var(--ronin-radius-md);
  padding: var(--ronin-space-3) var(--ronin-space-2);
}
.ronin-nav-item {
  display: flex;
  align-items: center;
  gap: var(--ronin-space-2);
  padding: 7px var(--ronin-space-3);
  border-radius: var(--ronin-radius-sm);
  font-size: 13px;
  cursor: pointer;
  color: var(--ronin-ink-900);
  user-select: none;
}
.ronin-nav-item:hover { background: var(--ronin-primary-bg); }
.ronin-nav-item--active {
  background: var(--ronin-primary);
  color: var(--ronin-white);
  font-weight: var(--ronin-font-weight-medium);
}


/* ---------- Help system (§9 of design system) ---------- */
/* WCAG 2.2 SC 3.2.6 + WAI-ARIA APG Disclosure pattern.
   Unprefixed class names match the reference implementation in ronin-file-organizer.
   Companion JS controller: see §9.6 of ronin-design-system-v0.4.md */

.card { position: relative; } /* required so .help-btn anchors to the card */

.help-btn {
  position: absolute;
  top: var(--ronin-space-3);
  right: var(--ronin-space-3);
  width: 24px;
  height: 24px;
  box-sizing: border-box;
  padding: 0;
  border-radius: var(--ronin-radius-pill);
  background: var(--ronin-surface-alt);
  border: var(--ronin-border-width) solid var(--ronin-border);
  color: var(--ronin-text-muted);
  /* font-size: 0 hides the literal "?" text in the button so the SVG
     icon below is the only visible glyph. aria-label still announces
     "Help for ..." to screen readers (WCAG 2.2 SC 3.2.6 / WAI-ARIA APG
     Disclosure pattern); the visible "?" is decorative. */
  font-size: 0;
  line-height: 0;
  letter-spacing: 0;
  text-align: center;
  cursor: pointer;
  /* Centering history:
       v0.4.2 (padding-bottom): pushed glyph UP — wrong direction.
       v0.4.3 (place-items + nudge): overshot for some users.
       v0.4.4 (inline-flex + no nudge): still optically high due to the
         "?" glyph's font-metric asymmetry (curve carries more visual
         mass than the dot, plus the baseline varies per font).
     v0.4.5 (this): replace the text glyph with an SVG mask. The mask
     is filled by currentColor so hover/focus color transitions still
     work, and the viewBox-defined visual center is guaranteed to land
     on the button's geometric center regardless of font or OS. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  z-index: 2;
}
.help-btn::before {
  content: "";
  display: block;
  width: 12px;
  height: 12px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M8 2.5a3.75 3.75 0 0 0-3.75 3.75.875.875 0 1 0 1.75 0A2 2 0 1 1 8 8.25a.875.875 0 0 0-.875.875v1.625a.875.875 0 1 0 1.75 0V9.94A3.752 3.752 0 0 0 8 2.5zM8 13.5a1 1 0 1 0 0-2 1 1 0 0 0 0 2z' fill='black'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M8 2.5a3.75 3.75 0 0 0-3.75 3.75.875.875 0 1 0 1.75 0A2 2 0 1 1 8 8.25a.875.875 0 0 0-.875.875v1.625a.875.875 0 1 0 1.75 0V9.94A3.752 3.752 0 0 0 8 2.5zM8 13.5a1 1 0 1 0 0-2 1 1 0 0 0 0 2z' fill='black'/></svg>") center/contain no-repeat;
}
.help-btn:hover,
.help-btn[aria-expanded="true"] {
  background: var(--ronin-teal-500);
  color: var(--ronin-white);
  border-color: var(--ronin-teal-500);
}
.help-btn:focus-visible {
  outline: none;
  box-shadow: var(--ronin-focus-ring);
}

.help-flyout {
  display: none;
  position: absolute;
  top: 42px;
  right: var(--ronin-space-3);
  width: 320px;
  max-width: calc(100% - var(--ronin-space-5));
  background: var(--ronin-surface);
  border: var(--ronin-border-width) solid var(--ronin-border);
  border-radius: var(--ronin-radius-md);
  padding: var(--ronin-space-3) var(--ronin-space-4);
  font-size: var(--ronin-font-size-sm);
  line-height: 1.7;
  color: var(--ronin-text);
  box-shadow: 0 1px 3px rgba(3, 26, 37, 0.06);
  z-index: 10;
}
.help-flyout.active { display: block; }
.help-flyout strong { color: var(--ronin-ink-800); }
.help-flyout p { margin: 0 0 var(--ronin-space-2) 0; }
.help-flyout p:last-child { margin-bottom: 0; }
.help-flyout ol { margin: 0 0 var(--ronin-space-2) var(--ronin-space-4); }
.help-flyout code {
  font-family: var(--ronin-font-mono);
  font-size: 11px;
  background: var(--ronin-surface-alt);
  padding: 1px 4px;
  border-radius: var(--ronin-radius-sm);
}

@media (max-width: 720px) {
  .help-flyout { width: calc(100% - var(--ronin-space-5)); }
}