/* ============================================================
   Focus Matters Technology — Design tokens
   Copied from the Focus Matters Technology Design System
   (Claude Design project). Brand blue #4498E7 · Deep navy
   #0A3049 · Ink #232323. Edit the source design system, not
   this file, if the brand tokens change.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&family=IBM+Plex+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  /* ---- Brand core (raw) ---- */
  --fmt-blue:        #4498e7;
  --fmt-blue-600:    #2f82d4;
  --fmt-blue-700:    #1f6cba;
  --fmt-blue-300:    #8fc2f1;
  --fmt-blue-100:    #e3f0fc;
  --fmt-blue-50:     #f2f8fe;

  --fmt-navy:        #0a3049;
  --fmt-navy-800:    #0d3a58;
  --fmt-navy-700:    #14496c;

  --fmt-ink:         #232323;
  --fmt-white:       #ffffff;

  /* ---- Neutral ramp (cool-leaning grays) ---- */
  --gray-50:   #f6f8fa;
  --gray-100:  #eef1f5;
  --gray-200:  #e0e5eb;
  --gray-300:  #cbd2db;
  --gray-400:  #9aa4b1;
  --gray-500:  #6b7682;
  --gray-600:  #4c5660;
  --gray-700:  #353d45;
  --gray-800:  #262c33;
  --gray-900:  #1a1e23;

  /* ---- Semantic status ---- */
  --status-ok:        #1f9d6b;
  --status-ok-bg:     #e6f6ef;
  --status-warn:      #c8861b;
  --status-warn-bg:   #fbf1dd;
  --status-risk:      #cf4b3f;
  --status-risk-bg:   #fbe9e7;
  --status-info:      var(--fmt-blue);
  --status-info-bg:   var(--fmt-blue-100);

  /* ---- Semantic aliases ---- */
  --brand-primary:        var(--fmt-blue);
  --brand-primary-hover:  var(--fmt-blue-600);
  --brand-primary-press:  var(--fmt-blue-700);
  --brand-dark:           var(--fmt-navy);
  --brand-on-dark:        var(--fmt-white);

  --text-strong:    var(--fmt-ink);
  --text-body:      var(--gray-700);
  --text-muted:     var(--gray-500);
  --text-faint:     var(--gray-400);
  --text-on-brand:  var(--fmt-white);
  --text-link:      var(--fmt-blue-700);

  --surface-page:     var(--gray-50);
  --surface-card:     var(--fmt-white);
  --surface-sunken:   var(--gray-100);
  --surface-tint:     var(--fmt-blue-50);
  --surface-dark:     var(--fmt-navy);
  --surface-dark-raised: var(--fmt-navy-800);

  --border-subtle:  var(--gray-200);
  --border-default: var(--gray-300);
  --border-strong:  var(--gray-400);
  --border-on-dark: var(--fmt-navy-700);
  --border-focus:   var(--fmt-blue);

  --selection-bg:   var(--fmt-blue-100);

  /* ---- Families ---- */
  --font-display: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:    'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ---- Weights ---- */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-extra:    800;

  /* ---- Type scale ---- */
  --text-2xs:  0.6875rem;
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-md:   1.125rem;
  --text-lg:   1.375rem;
  --text-xl:   1.75rem;
  --text-2xl:  2.25rem;
  --text-3xl:  2.875rem;
  --text-4xl:  3.75rem;
  --text-5xl:  4.75rem;

  --leading-tight:   1.08;
  --leading-snug:    1.25;
  --leading-normal:  1.55;
  --leading-relaxed: 1.7;

  --tracking-tight:   -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-wider:   0.18em;

  --eyebrow-font:    var(--font-mono);
  --eyebrow-size:    var(--text-xs);
  --eyebrow-weight:  var(--fw-medium);
  --eyebrow-track:   var(--tracking-wide);

  --h1-size: var(--text-4xl);
  --h2-size: var(--text-3xl);
  --h3-size: var(--text-2xl);
  --h4-size: var(--text-xl);
  --h5-size: var(--text-lg);

  --body-size:   var(--text-base);
  --body-lead:   var(--text-md);
  --caption-size: var(--text-sm);

  /* ---- Spacing scale (8px base) ---- */
  --space-0:   0;
  --space-1:   0.25rem;
  --space-2:   0.5rem;
  --space-3:   0.75rem;
  --space-4:   1rem;
  --space-5:   1.5rem;
  --space-6:   2rem;
  --space-7:   2.5rem;
  --space-8:   3rem;
  --space-9:   4rem;
  --space-10:  5rem;
  --space-11:  6rem;
  --space-12:  8rem;

  --container-sm:  640px;
  --container-md:  860px;
  --container-lg:  1120px;
  --container-xl:  1320px;
  --gutter:        var(--space-5);
  --section-y:     var(--space-11);

  /* ---- Corner radius ---- */
  --radius-none:  0;
  --radius-xs:    3px;
  --radius-sm:    5px;
  --radius-md:    8px;
  --radius-lg:    12px;
  --radius-xl:    18px;
  --radius-pill:  999px;

  /* ---- Border widths ---- */
  --border-hair:  1px;
  --border-thick: 2px;
  --border-accent: 3px;

  /* ---- Elevation ---- */
  --shadow-xs:  0 1px 2px rgba(16, 38, 58, 0.06);
  --shadow-sm:  0 1px 3px rgba(16, 38, 58, 0.08), 0 1px 2px rgba(16, 38, 58, 0.06);
  --shadow-md:  0 4px 12px rgba(16, 38, 58, 0.08), 0 2px 4px rgba(16, 38, 58, 0.05);
  --shadow-lg:  0 12px 28px rgba(16, 38, 58, 0.12), 0 4px 8px rgba(16, 38, 58, 0.06);
  --shadow-xl:  0 24px 56px rgba(16, 38, 58, 0.16);
  --shadow-focus: 0 0 0 3px rgba(68, 152, 231, 0.30);
  --shadow-inset: inset 0 1px 2px rgba(16, 38, 58, 0.08);

  /* ---- Motion ---- */
  --ease-standard: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:   120ms;
  --dur-base:   180ms;
  --dur-slow:   280ms;
  --transition-base: all var(--dur-base) var(--ease-standard);

  /* ---- Brand gradients ---- */
  --grad-hero:    linear-gradient(150deg, #0a3049 0%, #0d3a58 55%, #12527c 100%);
  --grad-blue:    linear-gradient(135deg, #4498e7 0%, #2f82d4 100%);
  --grad-wash:    linear-gradient(180deg, #f2f8fe 0%, #ffffff 100%);

  --circuit-line: rgba(68, 152, 231, 0.55);
  --circuit-node: var(--fmt-blue);
}

::selection { background: var(--selection-bg); }

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--body-size);
  line-height: var(--leading-normal);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--text-strong);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: var(--fw-bold);
  margin: 0 0 var(--space-4);
  text-wrap: balance;
}
h1 { font-size: var(--h1-size); font-weight: var(--fw-extra); }
h2 { font-size: var(--h2-size); }
h3 { font-size: var(--h3-size); line-height: var(--leading-snug); }
h4 { font-size: var(--h4-size); line-height: var(--leading-snug); }
h5 { font-size: var(--h5-size); line-height: var(--leading-snug); letter-spacing: var(--tracking-normal); }

p  { margin: 0 0 var(--space-4); text-wrap: pretty; }
a  { color: var(--text-link); text-decoration: none; }

strong { font-weight: var(--fw-semibold); color: var(--text-strong); }
small  { font-size: var(--text-sm); }

hr {
  border: 0;
  border-top: var(--border-hair) solid var(--border-subtle);
  margin: var(--space-6) 0;
}

.fmt-eyebrow {
  font-family: var(--eyebrow-font);
  font-size: var(--eyebrow-size);
  font-weight: var(--eyebrow-weight);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--brand-primary);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.fmt-container { max-width: var(--container-lg); margin-inline: auto; padding-inline: var(--gutter); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}