/* Patchwork Instruments — design tokens (dark theme default) */
/* Drop into your :root or scope under [data-theme] */

:root {
  /* — Color — */
  --pi-ink:          #0E0E10;
  --pi-ink-2:        #15151A;
  --pi-ink-3:        #1F1F25;
  --pi-bone:         #F2EFE9;
  --pi-bone-2:       #E6E2DA;
  --pi-muted:        #7E7A72;
  --pi-oxide:        #B33A1A;     /* primary accent — used sparingly */
  --pi-amber:        #E8A33C;     /* LED active states */
  --pi-border:       rgba(242, 239, 233, 0.12);
  --pi-border-strong: rgba(242, 239, 233, 0.22);

  /* Semantic */
  --pi-bg:           var(--pi-ink);
  --pi-surface:      var(--pi-ink-2);
  --pi-fg:           var(--pi-bone);
  --pi-fg-muted:     var(--pi-bone-2);
  --pi-fg-subtle:    var(--pi-muted);
  --pi-accent:       var(--pi-oxide);
  --pi-accent-2:     var(--pi-amber);

  /* — Type — */
  --pi-font-display: 'DM Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --pi-font-body:    'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --pi-font-tag:     'Fraunces', Georgia, serif;

  --pi-text-xs:   11px;   /* monocaps, eyebrows */
  --pi-text-sm:   13px;
  --pi-text-base: 15px;
  --pi-text-md:   17px;
  --pi-text-lg:   22px;
  --pi-text-xl:   32px;
  --pi-text-2xl:  48px;
  --pi-text-3xl:  72px;

  --pi-track-eyebrow: 0.18em;
  --pi-track-tight:  -0.02em;
  --pi-track-tighter: -0.03em;

  /* — Spacing — */
  --pi-space-1:  4px;
  --pi-space-2:  8px;
  --pi-space-3:  12px;
  --pi-space-4:  16px;
  --pi-space-5:  24px;
  --pi-space-6:  32px;
  --pi-space-8:  48px;
  --pi-space-10: 64px;
  --pi-space-12: 96px;
  --pi-space-16: 128px;

  /* — Radius — */
  --pi-radius-sm: 2px;
  --pi-radius-md: 4px;
  --pi-radius-lg: 8px;

  /* — Motion — */
  --pi-ease:      cubic-bezier(0.2, 0, 0, 1);
  --pi-dur-fast:  120ms;
  --pi-dur-base:  200ms;
  --pi-dur-slow:  320ms;

  /* — Shadow — */
  --pi-shadow-sm: 0 1px 0 rgba(0,0,0,0.4);
  --pi-shadow-md: 0 8px 24px rgba(0,0,0,0.5);
  --pi-shadow-lg: 0 24px 64px rgba(0,0,0,0.6);
}

/* Light theme override (for printed materials, light surface needs) */
[data-theme="light"] {
  --pi-bg:        #F4EFE6;
  --pi-surface:   #EBE3D4;
  --pi-fg:        #1A1815;
  --pi-fg-muted:  #2A2620;
  --pi-fg-subtle: #7A6F5C;
  --pi-border:    rgba(26, 24, 21, 0.14);
  --pi-border-strong: rgba(26, 24, 21, 0.24);
}

/* — Base — */
html { font-family: var(--pi-font-body); }
body {
  background: var(--pi-bg);
  color: var(--pi-fg);
  font-size: var(--pi-text-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* — Eyebrow / monocaps utility — */
.pi-eyebrow {
  font-family: var(--pi-font-display);
  font-size: var(--pi-text-xs);
  letter-spacing: var(--pi-track-eyebrow);
  text-transform: uppercase;
  color: var(--pi-fg-subtle);
}

/* — Wordmark — */
.pi-wordmark {
  font-family: var(--pi-font-display);
  font-weight: 500;
  letter-spacing: var(--pi-track-tight);
  color: var(--pi-fg);
}
.pi-wordmark--lg { font-size: var(--pi-text-3xl); line-height: 1; }
.pi-wordmark--md { font-size: var(--pi-text-2xl); line-height: 1; }

/* — Editorial italic (use sparingly) — */
.pi-tag {
  font-family: var(--pi-font-tag);
  font-style: italic;
  color: var(--pi-fg-muted);
}