/* 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: #6A6456;   /* tertiary — darkened to hit 4.5:1 AA on paper-200 #ECE7DC too (was #6E685B = 4.48 there) */
  --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);
}

/* 2026-05-16: marketing pages have a handful of grid layouts with fixed-width
   columns (e.g., 260px + 1fr) and content blocks that overflow viewport on
   sub-768px mobile. Per-section responsive grids are the proper fix but
   require touching every section. As an immediate fix, clip horizontal
   overflow at the document level so the marketing pages don't horizontal-
   scroll on iPhone 13 (390px). overflow-x: clip (rather than hidden) avoids
   creating a scroll container so internal scroll regions still work. */
html, body { overflow-x: clip; }

/* ─── Mobile responsive pass · 2026-05-22 ──────────────────────────────────
 *
 * Bridge selectors for the marketing home + footer grids.
 * Pattern ported from ITC website mobile-system.css + OpsTicket Shell.tsx.
 * Targets: 390x844 (iPhone 14), 375x667 (iPhone SE), 414x896 (iPhone 11).
 * Breakpoint: 820px (matches oiq-nav-desktop-links/ctas media rule in Nav JSX).
 *
 * Selectors are scoped to .oiq to avoid colliding with admin shell.
 */

@media (max-width: 820px) {

  /* --- Hero section: 2-column grid -> 1-column --- */
  .oiq [style*="gridTemplateColumns: '1.05fr 0.95fr'"],
  .oiq [style*="grid-template-columns: 1.05fr 0.95fr"] {
    grid-template-columns: 1fr !important;
  }

  /* Hero h1 font size clamp */
  .oiq .oiq-display {
    word-break: break-word;
  }

  /* --- Footer top-row: 7-col grid (1.3fr + 6x1fr) -> 2-col --- */
  .oiq [style*="gridTemplateColumns: '1.3fr repeat(6, 1fr)'"],
  .oiq [style*="grid-template-columns: 1.3fr repeat(6, 1fr)"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
  }

  /* Footer bottom-row flex -> wrap */
  .oiq [style*="display: flex"][style*="alignItems: center"][style*="gap: 16"] {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  /* Suite map 6-col grid -> 3-col */
  .oiq [style*="gridTemplateColumns: 'repeat(6, 1fr)'"],
  .oiq [style*="grid-template-columns: repeat(6, 1fr)"] {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  /* 2-column side-by-side grids used in feature / customers sections */
  .oiq [style*="gridTemplateColumns: '1fr 1fr'"],
  .oiq [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* Left/right asymmetric grids (.95fr / .88fr pairs etc.) */
  .oiq [style*="gridTemplateColumns: '0.88fr 1.12fr'"],
  .oiq [style*="grid-template-columns: 0.88fr 1.12fr"],
  .oiq [style*="gridTemplateColumns: '1.12fr 0.88fr'"],
  .oiq [style*="grid-template-columns: 1.12fr 0.88fr"],
  .oiq [style*="gridTemplateColumns: '0.9fr 1.1fr'"],
  .oiq [style*="grid-template-columns: 0.9fr 1.1fr"],
  .oiq [style*="gridTemplateColumns: '1fr 0.82fr'"],
  .oiq [style*="grid-template-columns: 1fr 0.82fr"],
  .oiq [style*="gridTemplateColumns: '1.05fr 1fr'"],
  .oiq [style*="grid-template-columns: 1.05fr 1fr"],
  .oiq [style*="gridTemplateColumns: '0.95fr 1.05fr'"],
  .oiq [style*="grid-template-columns: 0.95fr 1.05fr"] {
    grid-template-columns: 1fr !important;
  }

  /* Tight inner padding on sections at 390px */
  .oiq section[style*="padding: '72px 24px"] {
    padding: 40px 16px !important;
  }
  .oiq section[style*="padding: '96px 24px"] {
    padding: 48px 16px !important;
  }

  /* Large display headline font-size clamp */
  .oiq h1.oiq-display {
    font-size: clamp(36px, 10vw, 72px) !important;
  }
  .oiq h2.oiq-display {
    font-size: clamp(28px, 8vw, 56px) !important;
  }

  /* Print + reduced-motion safety */
  @media print {
    .oiq-nav-drawer, .oiq-nav-hamburger { display: none !important; }
  }
  @media (prefers-reduced-motion: reduce) {
    .oiq-nav-drawer { transition: none !important; }
  }
}

/* Dark-mode safety: drawer inherits paper-50 surface in light mode */
[data-theme="dark"] .oiq-nav-drawer {
  background: var(--ink-900) !important;
}
[data-theme="dark"] .oiq-nav-drawer a {
  color: var(--paper-50) !important;
  border-bottom-color: rgba(246,242,230,.12) !important;
}
[data-theme="dark"] .oiq-nav-drawer [style*="background: 'rgba(251,249,244"] {
  background: var(--ink-800) !important;
}