/* ═══════════════════════════════════════════════════════════════
   TapIt Connect — v4 design tokens
   Paper + ink + safety-orange. Industrial field tool.
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* TYPE — defaults to Plex (engineering, technical). Switch via [data-typeface] */
  --font-display: 'IBM Plex Serif', 'Times New Roman', serif;
  --font-ui: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'IBM Plex Mono', 'SF Mono', ui-monospace, monospace;

  /* SCALE */
  --t-12: 11px;
  --t-13: 12.5px;
  --t-14: 13.5px;
  --t-15: 14.5px;
  --t-16: 15.5px;
  --t-18: 17px;
  --t-21: 21px;
  --t-26: 26px;
  --t-34: 34px;
  --t-48: 48px;
  --t-64: 64px;
  --t-88: 88px;

  /* SHAPE */
  --r-2: 2px;
  --r-4: 4px;
  --r-6: 6px;
  --r-8: 8px;
  --r-10: 10px;
  --r-14: 14px;
  --r-20: 20px;
  --r-full: 9999px;

  /* SPACING (4-base) */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;

  /* MOTION */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-snap: cubic-bezier(0.65, 0, 0.35, 1);
  --d-fast: 140ms;
  --d-base: 220ms;
  --d-slow: 360ms;
}

/* LIGHT — paper + ink */
:root, [data-theme="light"] {
  --paper: #F6F4EE;      /* off-white, slight warm */
  --paper-2: #EFEDE6;
  --card: #FBFAF6;
  --ink: #14130F;         /* near-black, warm */
  --ink-2: #2A2823;
  --muted: #6A675E;
  --muted-2: #95918A;
  --line: #1413100F;      /* ink @ 6% */
  --line-2: #14131017;    /* ink @ 9% */
  --hairline: #1413101F;  /* ink @ 12% */
  --inset: #1413100A;

  /* Accent — safety orange */
  --accent: #E8501C;
  --accent-2: #CE3F0E;
  --accent-soft: #E8501C18;
  --accent-ink: #FFFFFF;

  /* Signal */
  --good: #1E7C4A;
  --warn: #B4711A;
  --bad: #C13B2C;
  --info: #2A5FAE;

  --shadow-sm: 0 1px 0 0 #14131012;
  --shadow-md: 0 2px 0 0 #14131012, 0 12px 32px -16px #14131022;
  --shadow-lg: 0 24px 60px -24px #14131038;
}

/* DARK — graphite + bone */
[data-theme="dark"] {
  --paper: #0E0F11;
  --paper-2: #16181B;
  --card: #16181B;
  --ink: #F1EFE7;
  --ink-2: #D9D6CC;
  --muted: #8A877E;
  --muted-2: #5C5A53;
  --line: #F1EFE712;
  --line-2: #F1EFE71F;
  --hairline: #F1EFE72E;
  --inset: #F1EFE708;

  --accent: #FF6A33;
  --accent-2: #FF8559;
  --accent-soft: #FF6A331F;
  --accent-ink: #0E0F11;

  --good: #4ED38A;
  --warn: #E6B255;
  --bad: #F47A6C;
  --info: #6AA1F0;

  --shadow-sm: 0 1px 0 0 #00000040;
  --shadow-md: 0 2px 0 0 #00000040, 0 16px 40px -16px #00000088;
  --shadow-lg: 0 24px 60px -24px #000000AA;
}

/* ACCENT VARIANTS — toggled via [data-accent] on root */
[data-accent="prussian"] {
  --accent: #2563EB;
  --accent-2: #1D4ED8;
  --accent-soft: #2563EB18;
  --accent-ink: #FFFFFF;
}
[data-theme="dark"][data-accent="prussian"] {
  --accent: #5E8FD6;
  --accent-2: #7AA5E0;
  --accent-soft: #5E8FD61F;
  --accent-ink: #0E0F11;
}
[data-accent="moss"] {
  --accent: #4A6B2A;
  --accent-2: #364F1F;
  --accent-soft: #4A6B2A18;
  --accent-ink: #FFFFFF;
}
[data-theme="dark"][data-accent="moss"] {
  --accent: #8FB05E;
  --accent-2: #A8C47E;
  --accent-soft: #8FB05E1F;
  --accent-ink: #0E0F11;
}
[data-accent="iron"] {
  --accent: #2A2823;
  --accent-2: #14130F;
  --accent-soft: #2A28231F;
  --accent-ink: #FFFFFF;
}
[data-theme="dark"][data-accent="iron"] {
  --accent: #D9D6CC;
  --accent-2: #F1EFE7;
  --accent-soft: #D9D6CC1F;
  --accent-ink: #14130F;
}

/* DENSITY — toggled via [data-density] on root */
[data-density="compact"] {
  --s-3: 8px;
  --s-4: 12px;
  --s-5: 16px;
  --s-6: 18px;
  --s-8: 24px;
}

/* TYPEFACE VARIANTS — toggled via [data-typeface] on root */
[data-typeface="plex"] {
  --font-display: 'IBM Plex Serif', 'Times New Roman', serif;
  --font-ui: 'IBM Plex Sans', -apple-system, sans-serif;
  --font-mono: 'IBM Plex Mono', 'SF Mono', ui-monospace, monospace;
}
[data-typeface="industrial"] {
  --font-display: 'Big Shoulders Display', 'Arial Black', sans-serif;
  --font-ui: 'IBM Plex Sans', -apple-system, sans-serif;
  --font-mono: 'IBM Plex Mono', 'SF Mono', ui-monospace, monospace;
}
[data-typeface="grotesk"] {
  --font-display: 'Space Grotesk', sans-serif;
  --font-ui: 'Space Grotesk', sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', ui-monospace, monospace;
}
[data-typeface="editorial"] {
  --font-display: 'Instrument Serif', serif;
  --font-ui: 'Inter Tight', sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', ui-monospace, monospace;
}

/* Display tweaks per typeface */
[data-typeface="industrial"] .h-display,
[data-typeface="industrial"] .h-1,
[data-typeface="industrial"] .hero-h1,
[data-typeface="industrial"] .section-h,
[data-typeface="industrial"] .cta-h {
  font-weight: 700;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}
[data-typeface="industrial"] .h-display .ital,
[data-typeface="industrial"] .h-1 .ital,
[data-typeface="industrial"] .hero-h1 .ital,
[data-typeface="industrial"] .section-h .ital,
[data-typeface="industrial"] .cta-h .ital,
[data-typeface="industrial"] .nav-brand .mark {
  font-style: italic;
  font-weight: 700;
}

[data-typeface="plex"] .h-display,
[data-typeface="plex"] .h-1,
[data-typeface="plex"] .hero-h1,
[data-typeface="plex"] .section-h,
[data-typeface="plex"] .cta-h {
  font-weight: 400;
  letter-spacing: -0.02em;
}
[data-typeface="plex"] .ital { font-style: italic; }

[data-typeface="grotesk"] .h-display,
[data-typeface="grotesk"] .h-1,
[data-typeface="grotesk"] .hero-h1,
[data-typeface="grotesk"] .section-h,
[data-typeface="grotesk"] .cta-h {
  font-weight: 600;
  letter-spacing: -0.025em;
}
[data-typeface="grotesk"] .ital {
  font-style: normal;
  font-weight: 700;
}

/* mono-h class used on equipment detail headline */
[data-typeface="plex"] .mono-h,
[data-typeface="industrial"] .mono-h { font-weight: 500; }

/* ─── reset ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  height: 100%;
  font-family: var(--font-ui);
  font-size: var(--t-14);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'ss01' 1, 'cv11' 1, 'cv02' 1;
}
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--accent); color: var(--accent-ink); }

/* ─── focus ─── */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-4); }