/* OnboardIQ — design tokens & base styles
   ---------------------------------------- */

:root {
  /* Paper: warm off-white system (low-saturation) */
  --paper-50:  #FBF9F4;
  --paper-100: #F4F1EA;
  --paper-200: #ECE7DC;
  --paper-300: #DDD6C6;
  --paper-400: #C5BDA9;

  /* Ink: warm near-black */
  --ink-900: #16140F;
  --ink-800: #25221C;
  --ink-700: #3D3930;
  --ink-600: #5F5A4E;
  --ink-500: #807A6C;
  --ink-400: #A5A091;
  --ink-300: #C2BEB3;

  /* Accent: industrial amber (credential / safety / torque) */
  --amber-700: #8B6017;
  --amber-600: #B07B1F;
  --amber-500: #D49A3A;   /* primary accent */
  --amber-400: #E2B25F;
  --amber-200: #F1DAA1;
  --amber-100: #F8ECCB;
  --amber-50:  #FCF6E4;

  /* Support: muted slate-teal */
  --slate-700: #2F3D49;
  --slate-600: #475866;
  --slate-500: #647686;
  --slate-300: #B6C0CA;
  --slate-100: #E2E7EC;

  /* Status family (distinct from accent) */
  --green-700: #1F4D38;
  --green-500: #3F7A5A;
  --green-100: #DCE9DF;
  --red-700:   #6F1F2C;
  --red-500:   #98353F;
  --red-100:   #ECD6D8;
  --blue-700:  #1F3D5E;
  --blue-500:  #3D5878;
  --blue-100:  #D7DEE9;

  /* Type stack */
  --sans: "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --serif: "IBM Plex Serif", "New York", Georgia, serif;

  /* Radii — restrained, slightly squared */
  --r-1: 3px;
  --r-2: 5px;
  --r-3: 8px;
  --r-pill: 999px;

  /* Shadows — subtle, paper-on-paper, never glow */
  --shadow-1: 0 1px 0 rgba(22,20,15,.04), 0 1px 2px rgba(22,20,15,.05);
  --shadow-2: 0 1px 0 rgba(22,20,15,.04), 0 2px 8px rgba(22,20,15,.06), 0 8px 24px rgba(22,20,15,.06);
  --shadow-3: 0 12px 40px rgba(22,20,15,.12), 0 2px 8px rgba(22,20,15,.06);

  /* Spacing — 4px grid */
  --sp-0: 0;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
}

/* Base resets within the canvas */
.oiq, .oiq * {
  box-sizing: border-box;
}
.oiq {
  font-family: var(--sans);
  color: var(--ink-900);
  background: var(--paper-100);
  font-feature-settings: "ss01", "ss02", "cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- Type scale ---------- */
.oiq-display {
  font-family: var(--sans);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.02;
}
.oiq-mono {
  font-family: var(--mono);
  font-feature-settings: "zero", "ss01";
}
.oiq-serif {
  font-family: var(--serif);
}
.oiq-eyebrow {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-600);
  font-weight: 500;
}
.oiq-tabular {
  font-variant-numeric: tabular-nums;
}

/* Default link */
.oiq a { color: inherit; text-underline-offset: 2px; }

/* Subtle grid for diagrams */
.oiq-grid-bg {
  background-image:
    linear-gradient(to right, rgba(22,20,15,.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(22,20,15,.045) 1px, transparent 1px);
  background-size: 8px 8px;
}

/* Status dot */
.oiq-dot {
  width: 7px; height: 7px; border-radius: 50%;
  display: inline-block; vertical-align: 0;
}

/* Subtle stripe for unfinished bars / progress empty */
.oiq-stripe {
  background-image: repeating-linear-gradient(
    -45deg,
    transparent 0 4px,
    rgba(22,20,15,.06) 4px 5px
  );
}

/* Custom scrollbar inside canvas content */
.oiq ::-webkit-scrollbar { width: 10px; height: 10px; }
.oiq ::-webkit-scrollbar-thumb { background: rgba(22,20,15,.18); border-radius: 999px; border: 2px solid transparent; background-clip: content-box; }
.oiq ::-webkit-scrollbar-track { background: transparent; }

/* Density modifier */
.oiq[data-density="compact"]  { --row-h: 32px; --pad-y: 6px; }
.oiq[data-density="regular"]  { --row-h: 40px; --pad-y: 10px; }
.oiq[data-density="comfy"]    { --row-h: 52px; --pad-y: 14px; }

/* Accent swaps (curated) */
.oiq[data-accent="amber"] {
  --accent-700: #8B6017; --accent-600: #B07B1F; --accent-500: #D49A3A;
  --accent-400: #E2B25F; --accent-200: #F1DAA1; --accent-100: #F8ECCB;
  --accent-50:  #FCF6E4;
}
.oiq[data-accent="verdigris"] {
  --accent-700: #1F4A3F; --accent-600: #2D6557; --accent-500: #437D6D;
  --accent-400: #6FA294; --accent-200: #B5D2C8; --accent-100: #D6E5DF;
  --accent-50:  #E9F0EC;
}
.oiq[data-accent="oxblood"] {
  --accent-700: #5C1A24; --accent-600: #7A2530; --accent-500: #98353F;
  --accent-400: #B65762; --accent-200: #DEB1B6; --accent-100: #ECD0D3;
  --accent-50:  #F4E0E2;
}
/* default if no accent set */
.oiq:not([data-accent]) {
  --accent-700: var(--amber-700); --accent-600: var(--amber-600);
  --accent-500: var(--amber-500); --accent-400: var(--amber-400);
  --accent-200: var(--amber-200); --accent-100: var(--amber-100);
  --accent-50:  var(--amber-50);
}

/* ─── DARK MODE — not a recolor.
   Dark uses a different hierarchy: heavier surface contrast (3 elevations
   instead of paper's 2), lighter type weights (text is 400/500, never 600
   for body), and the accent moves up a step (–400 instead of –500). */
.oiq[data-theme="dark"] {
  --paper-50:  #1B1915;
  --paper-100: #14120E;   /* base canvas */
  --paper-200: #221F19;   /* elevated 1 */
  --paper-300: #2E2A22;   /* border / elevated 2 */
  --paper-400: #423E33;   /* prominent border */

  --ink-900: #F6F2E6;     /* high-contrast text */
  --ink-800: #ECE7D9;
  --ink-700: #C4BFB1;     /* body */
  --ink-600: #8E8A7E;     /* secondary */
  --ink-500: #6F6C62;     /* tertiary */
  --ink-400: #54514A;
  --ink-300: #3A382F;

  /* Status colors brightened for dark */
  --green-700: #5BAF85; --green-500: #4E9B73; --green-100: #1E3A2B;
  --red-700:   #D77580; --red-500:   #C25D69; --red-100:   #3E1F25;
  --blue-700:  #8AAAD2; --blue-500:  #7595C0; --blue-100:  #1F2E45;
  --slate-700: #C4D0DA; --slate-500: #8B98A6; --slate-300: #4A5763; --slate-100: #232B33;
}

.oiq[data-theme="dark"][data-accent="amber"] {
  --accent-700: #F3D389; --accent-600: #EAC471; --accent-500: #E2B25F;
  --accent-400: #C9952C; --accent-200: #5E4514; --accent-100: #3A2A0E;
  --accent-50:  #29200B;
}
.oiq[data-theme="dark"][data-accent="verdigris"] {
  --accent-700: #A9D3C5; --accent-600: #8FBEAE; --accent-500: #6FA294;
  --accent-400: #437D6D; --accent-200: #294A40; --accent-100: #1A3029;
  --accent-50:  #142420;
}
.oiq[data-theme="dark"][data-accent="oxblood"] {
  --accent-700: #E5A6AC; --accent-600: #CC7E87; --accent-500: #B65762;
  --accent-400: #98353F; --accent-200: #4A1F25; --accent-100: #2E1318;
  --accent-50:  #221013;
}

/* Shadows tone down on dark */
.oiq[data-theme="dark"] {
  --shadow-1: 0 1px 0 rgba(0,0,0,.4), 0 2px 6px rgba(0,0,0,.3);
  --shadow-2: 0 4px 12px rgba(0,0,0,.4), 0 12px 32px rgba(0,0,0,.32);
}

/* Focus ring (single, consistent) */
.oiq :focus-visible {
  outline: 2px solid var(--amber-500);
  outline-offset: 2px;
  border-radius: var(--r-2);
}