/*
================================================================
IQ Intel — Design Tokens
================================================================
Single source of truth for the visual system. Import this file
on every page that should adopt the IQ Intel visual language:

  <link rel="stylesheet" href="/css/iqintel-tokens.css">

All values are CSS custom properties on :root, so any element
can pick them up. Pages may add their own layout CSS on top.
================================================================
*/

/* ---------------- Webfonts ---------------- */
@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,300..700;1,8..60,300..700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

:root {

  /* ============================================================
     COLOR
     ============================================================
     The palette is white + near-black + one indigo accent.
     Accent is reserved for: primary buttons, link hover, eyebrows
     above headings, numbered method markers, and the callout
     tint background. Everything else is monochrome.
  */

  /* Surfaces */
  --iq-bg-primary:    #FFFFFF;   /* page background, white cards on gray sections */
  --iq-bg-secondary:  #FAFAFA;   /* alternating section bands, gray cards on white sections */
  --iq-bg-tint:       #F4F4FB;   /* callout blocks — a near-white tint of the accent */

  /* Ink */
  --iq-text-primary:    #0A0A0A; /* headings */
  --iq-text-body:       #1F2937; /* body prose */
  --iq-text-secondary:  #6B7280; /* captions, eyebrows in gray, secondary nav */
  --iq-text-tertiary:   #9CA3AF; /* faint metadata, separators in text */

  /* Lines */
  --iq-border:          #E5E7EB; /* default 0.5px or 1px borders */
  --iq-border-strong:   #D1D5DB; /* hover state, emphasized borders */

  /* Accent */
  --iq-accent:          #3B3FA8; /* primary indigo */
  --iq-accent-hover:    #5B5FD9; /* lighter for hover states */
  --iq-accent-on:       #FFFFFF; /* text on accent backgrounds */

  /* Semantic (rarely used — site is intentionally monochrome+accent) */
  --iq-success:         #047857;
  --iq-warning:         #B45309;
  --iq-danger:          #B91C1C;


  /* ============================================================
     TYPOGRAPHY
     ============================================================
     Source Serif 4 for headings, Inter for body and UI,
     JetBrains Mono for code and QASM snippets.
  */

  --iq-font-serif: 'Source Serif 4', 'Source Serif Pro', Charter, Georgia, 'Times New Roman', serif;
  --iq-font-sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --iq-font-mono:  'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;

  /* Type scale — heading sizes (serif) */
  --iq-h1: 48px;   /* hero */
  --iq-h2: 32px;   /* section titles */
  --iq-h3: 22px;   /* subsection / card titles */
  --iq-h4: 18px;
  --iq-h5: 15px;

  /* Type scale — body and UI (sans) */
  --iq-body-lg:   18px;  /* hero subhead, lede paragraphs */
  --iq-body:      16px;  /* default body */
  --iq-body-sm:   14px;  /* secondary text, captions on cards */
  --iq-caption:   13px;  /* fine print, image captions */
  --iq-eyebrow:   12px;  /* uppercase eyebrow labels above headings */

  /* Line heights */
  --iq-lh-tight:  1.15;  /* large display headings */
  --iq-lh-snug:   1.3;   /* mid-size headings */
  --iq-lh-body:   1.65;  /* body prose */
  --iq-lh-ui:     1.4;   /* buttons, labels, nav */

  /* Letter spacing */
  --iq-ls-heading: -0.015em; /* serif headings tighten slightly */
  --iq-ls-eyebrow: 0.08em;   /* uppercase eyebrows track open */


  /* ============================================================
     SPACING
     ============================================================
     Section padding is the heartbeat of the rebuild — generous
     vertical space is what separates this from the current dense
     dark site.
  */

  --iq-section-y:        56px;   /* desktop vertical section padding */
  --iq-section-y-mobile: 64px;   /* mobile vertical section padding */

  --iq-container:        1100px; /* max content width */
  --iq-prose:            680px;  /* max reading column for body prose */
  --iq-narrow:           560px;  /* contact form, narrow callouts */

  /* Standard spacing scale (use in rem for vertical rhythm, px for component internals) */
  --iq-space-1:  4px;
  --iq-space-2:  8px;
  --iq-space-3:  12px;
  --iq-space-4:  16px;
  --iq-space-5:  24px;
  --iq-space-6:  32px;
  --iq-space-7:  48px;
  --iq-space-8:  64px;


  /* ============================================================
     SHAPE
     ============================================================
  */

  --iq-radius-sm:  4px;   /* tags, small pills */
  --iq-radius-md:  6px;   /* buttons */
  --iq-radius-lg:  8px;   /* cards */
  --iq-radius-xl:  12px;  /* feature panels, large image frames */

  --iq-border-thin: 0.5px solid var(--iq-border);
  --iq-border-1:    1px   solid var(--iq-border);


  /* ============================================================
     ELEVATION
     ============================================================
     Almost everything sits flat. Shadows are reserved for the
     hover state on cards that lead somewhere, and the focus ring
     on form inputs.
  */

  --iq-shadow-hover: 0 4px 12px rgba(10, 10, 10, 0.04);
  --iq-shadow-card:  0 1px 2px rgba(10, 10, 10, 0.02);
  --iq-focus-ring:   0 0 0 3px rgba(59, 63, 168, 0.18);


  /* ============================================================
     MOTION
     ============================================================
  */

  --iq-ease:      cubic-bezier(0.2, 0.6, 0.2, 1);
  --iq-dur-fast:  120ms;
  --iq-dur:       200ms;
  --iq-dur-slow:  320ms;
}


/*
================================================================
BASE RESETS AND DEFAULTS
================================================================
Minimal — just enough to make the tokens render consistently.
Pages can add their own resets on top.
*/

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

html {
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
  font-family: var(--iq-font-sans);
  font-size: var(--iq-body);
  line-height: var(--iq-lh-body);
  color: var(--iq-text-body);
  background: var(--iq-bg-primary);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--iq-font-serif);
  font-weight: 400;
  color: var(--iq-text-primary);
  letter-spacing: var(--iq-ls-heading);
  margin: 0;
}

h1 { font-size: var(--iq-h1); line-height: var(--iq-lh-tight); }
h2 { font-size: var(--iq-h2); line-height: var(--iq-lh-snug); }
h3 { font-size: var(--iq-h3); line-height: var(--iq-lh-snug); }
h4 { font-size: var(--iq-h4); line-height: var(--iq-lh-snug); }

p { margin: 0; }

a {
  color: var(--iq-accent);
  text-decoration: none;
  transition: color var(--iq-dur-fast) var(--iq-ease);
}
a:hover { color: var(--iq-accent-hover); }

code, pre {
  font-family: var(--iq-font-mono);
  font-size: 0.7em;
}


/*
================================================================
UTILITY CLASSES
================================================================
Small, reusable classes used across the site. Optional —
pages can replicate these with inline styles if preferred.
*/

.iq-container {
  max-width: var(--iq-container);
  margin: 0 auto;
  padding-left: var(--iq-space-5);
  padding-right: var(--iq-space-5);
}

.iq-section {
  padding-top: var(--iq-section-y);
  padding-bottom: var(--iq-section-y);
}

.iq-section--gray { background: var(--iq-bg-secondary); }
.iq-section--white { background: var(--iq-bg-primary); }

.iq-eyebrow {
  font-family: var(--iq-font-sans);
  font-size: var(--iq-eyebrow);
  font-weight: 500;
  letter-spacing: var(--iq-ls-eyebrow);
  text-transform: uppercase;
  color: var(--iq-accent);
}

.iq-eyebrow--muted { color: var(--iq-text-secondary); }

.iq-prose {
  max-width: var(--iq-prose);
  font-size: var(--iq-body);
  line-height: var(--iq-lh-body);
  color: var(--iq-text-body);
}

.iq-prose-lg {
  font-size: var(--iq-body-lg);
  line-height: 1.55;
  color: var(--iq-text-body);
}

.iq-caption {
  font-size: var(--iq-caption);
  color: var(--iq-text-secondary);
  line-height: 1.5;
}

/* Buttons */
.iq-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--iq-font-sans);
  font-size: var(--iq-body-sm);
  font-weight: 500;
  line-height: var(--iq-lh-ui);
  padding: 11px 18px;
  border-radius: var(--iq-radius-md);
  border: 0.5px solid transparent;
  cursor: pointer;
  transition: background var(--iq-dur) var(--iq-ease),
              color var(--iq-dur) var(--iq-ease),
              border-color var(--iq-dur) var(--iq-ease);
  text-decoration: none;
}

.iq-btn--primary {
  background: var(--iq-accent);
  color: var(--iq-accent-on);
}
.iq-btn--primary:hover {
  background: var(--iq-accent-hover);
  color: var(--iq-accent-on);
}

.iq-btn--secondary {
  background: transparent;
  color: var(--iq-text-primary);
  border-color: var(--iq-border);
}
.iq-btn--secondary:hover {
  border-color: var(--iq-border-strong);
  background: var(--iq-bg-secondary);
  color: var(--iq-text-primary);
}

.iq-btn--ghost {
  background: transparent;
  color: var(--iq-accent);
  padding-left: 0;
  padding-right: 0;
}
.iq-btn--ghost:hover { color: var(--iq-accent-hover); }

/* Cards */
.iq-card {
  background: var(--iq-bg-primary);
  border: var(--iq-border-thin);
  border-radius: var(--iq-radius-lg);
  padding: var(--iq-space-5);
  transition: box-shadow var(--iq-dur) var(--iq-ease),
              border-color var(--iq-dur) var(--iq-ease);
}
.iq-card--gray { background: var(--iq-bg-secondary); border: none; }
.iq-card--callout { background: var(--iq-bg-tint); border: none; }

a.iq-card:hover,
.iq-card--linked:hover {
  border-color: var(--iq-border-strong);
  box-shadow: var(--iq-shadow-hover);
}

/* Form inputs */
.iq-input,
.iq-select,
.iq-textarea {
  width: 100%;
  font-family: var(--iq-font-sans);
  font-size: var(--iq-body);
  line-height: var(--iq-lh-ui);
  color: var(--iq-text-primary);
  background: var(--iq-bg-primary);
  border: 1px solid var(--iq-border);
  border-radius: var(--iq-radius-md);
  padding: 11px 14px;
  transition: border-color var(--iq-dur) var(--iq-ease),
              box-shadow var(--iq-dur) var(--iq-ease);
}
.iq-input:focus,
.iq-select:focus,
.iq-textarea:focus {
  outline: none;
  border-color: var(--iq-accent);
  box-shadow: var(--iq-focus-ring);
}
.iq-textarea { min-height: 120px; resize: vertical; }
.iq-label {
  display: block;
  font-size: var(--iq-body-sm);
  font-weight: 500;
  color: var(--iq-text-primary);
  margin-bottom: var(--iq-space-2);
}


/*
================================================================
RESPONSIVE
================================================================
*/

@media (max-width: 768px) {
  :root {
    --iq-h1: 34px;
    --iq-h2: 26px;
    --iq-h3: 20px;
    --iq-body-lg: 17px;
  }
  .iq-section {
    padding-top: var(--iq-section-y-mobile);
    padding-bottom: var(--iq-section-y-mobile);
  }
}