/* m7kni design system tokens — GENERATED, DO NOT HAND-EDIT.
 *
 * Concatenated verbatim from brewmdm-design/m7kni-design-system/tokens/.
 * A design-system change is not finished until this copy has it:
 * re-run the generator command in AGENTS.md, never patch this file.
 *
 * fonts.css is deliberately excluded — it points at .ttf builds under
 * assets/fonts/, and this site self-hosts .woff2 from /fonts/.
 * portie.css owns the @font-face rules instead.
 */

/* ── base.css ─────────────────────────────────────────────────────── */
/* Minimal base layer: what every m7kni surface assumes. */
/* Border-box is load-bearing, not a preference. Every control in this system
   sets `width: 100%` alongside its own padding — SearchInput, TextField,
   Select. Under the default content-box those add together and the field
   overflows its container by the width of its padding (76px for SearchInput,
   which has room for a leading glyph and a clear button). It goes unnoticed
   inside a flex:1 column and is obvious the moment a field sits in a fixed
   sidebar. Do not scope this narrower. */
*,*::before,*::after{box-sizing:border-box}
body{font-family:var(--font-sans);color:var(--color-ink);background:var(--color-canvas);-webkit-font-smoothing:antialiased}
a{color:var(--text-link);text-decoration:none}
a:hover{color:var(--text-link-hover)}
*:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px;border-radius:var(--radius-sm)}
button:active:not(:disabled),a:active{transform:scale(var(--press-scale))}
a,button,input,select,textarea{transition-property:color,background-color,border-color,box-shadow,transform,opacity;transition-duration:var(--duration-fast);transition-timing-function:var(--ease-standard)}
code,kbd,pre,samp{font-family:var(--font-mono)}

/* ── colors.css ─────────────────────────────────────────────────────── */
:root{
  /* ── Brand ────────────────────────────────────────────────
     Jade — the m7kni accent. #00764d light / #3eaf86 dark.
     Every value here is AA-verified: white on accent 5.66:1,
     accent on canvas 5.26:1, accent on its own tint 4.67:1. */
  --brand-green:#00764d;
  --brand-green-dark:#00623a;
  --brand-green-light:#3eaf86;
  --brand-ink:#171b26;

  /* ── Base palette (oklch) ─────────────────────────────────
     Paper stays warm at hue 85 and ink stays cool at hue 260 —
     that pairing is what keeps the density from reading clinical,
     and the accent change deliberately does not touch it. */
  --color-canvas:oklch(0.975 0.006 85);
  --color-canvas-deep:oklch(0.945 0.009 85);
  --color-surface:oklch(1 0 0);
  --color-surface-raised:oklch(1 0 0);

  --color-ink:oklch(0.2 0.02 260);
  --color-ink-light:oklch(0.35 0.02 260);
  --color-ink-faint:oklch(0.48 0.015 260);
  --color-muted:oklch(0.55 0.015 260);

  --color-accent:oklch(0.49 0.13 165);
  --color-accent-hover:oklch(0.42 0.13 165);
  --color-accent-light:oklch(0.93 0.035 165);
  --color-accent-subtle:oklch(0.965 0.018 165);

  /* Semantic. Foregrounds are set at the lightest value that still
     clears 4.5:1 on their own tint, because tinted pills are how this
     system shows state and they carry real text. Do not lighten them. */
  --color-ember:oklch(0.52 0.2 25);
  --color-ember-light:oklch(0.92 0.05 25);
  --color-success:oklch(0.49 0.15 155);
  --color-success-light:oklch(0.92 0.04 155);
  --color-warn:oklch(0.52 0.15 85);
  --color-warn-light:oklch(0.94 0.04 85);

  --color-soft:oklch(0.885 0.009 85);
  --color-border:oklch(0.9 0.007 85);
  --color-border-hover:oklch(0.8 0.011 85);

  --color-sidebar:oklch(0.18 0.025 260);
  --color-sidebar-top:oklch(0.22 0.03 260);
  --color-sidebar-hover:oklch(0.3 0.02 260);
  --color-sidebar-active:oklch(0.36 0.06 165);
  --color-sidebar-border:oklch(0.28 0.02 260);

  /* Per-product accent — violet. One colour marks "this is a specific
     project rather than m7kni itself", shared across projects rather
     than invented per repo. 135° from the brand accent, so the two
     never read as the same family. */
  --color-accent-product:oklch(0.53 0.16 300);
  --color-accent-product-light:oklch(0.93 0.04 300);
  /* Deprecated aliases — Paperless Dedupe's teal was retired when the
     brand accent went green. Use --color-accent-product. */
  --color-accent-dedupe:var(--color-accent-product);
  --color-accent-dedupe-light:var(--color-accent-product-light);

  /* Charts — 6 distinct series, none of which reads as the brand accent.
     Series 1 is violet so a single-series chart never looks like a
     primary action. */
  --color-chart-1:oklch(0.52 0.16 300);
  --color-chart-2:oklch(0.55 0.14 245);
  --color-chart-3:oklch(0.55 0.10 205);
  --color-chart-4:oklch(0.58 0.13 70);
  --color-chart-5:oklch(0.58 0.16 10);
  --color-chart-6:oklch(0.55 0.10 130);

  /* ── Semantic aliases ─────────────────────────────────── */
  --bg-page:var(--color-canvas);
  --bg-page-deep:var(--color-canvas-deep);
  --surface-card:var(--color-surface);
  --surface-inset:var(--color-canvas);
  --text-heading:var(--color-ink);
  --text-body:var(--color-ink-light);
  --text-secondary:var(--color-ink-faint);
  --text-muted:var(--color-muted);
  --text-link:var(--color-accent);
  --text-link-hover:var(--color-accent-hover);
  --text-on-accent:#fff;
  --border-default:var(--color-border);
  --border-strong:var(--color-border-hover);
  --focus-ring:var(--color-accent);
}

.dark{
  --color-canvas:oklch(0.165 0.008 85);
  --color-canvas-deep:oklch(0.135 0.009 85);
  --color-surface:oklch(0.205 0.009 85);
  --color-surface-raised:oklch(0.225 0.011 85);
  --color-ink:oklch(0.92 0.01 90);
  --color-ink-light:oklch(0.78 0.01 90);
  --color-ink-faint:oklch(0.58 0.01 90);
  --color-muted:oklch(0.6 0.015 260);
  --color-accent:oklch(0.68 0.12 165);
  --color-accent-hover:oklch(0.74 0.12 165);
  --color-accent-light:oklch(0.28 0.05 165);
  --color-accent-subtle:oklch(0.22 0.03 165);
  --color-ember:oklch(0.68 0.18 25);
  --color-ember-light:oklch(0.25 0.06 25);
  --color-success:oklch(0.68 0.14 155);
  --color-success-light:oklch(0.25 0.05 155);
  --color-warn:oklch(0.78 0.14 85);
  --color-warn-light:oklch(0.25 0.05 85);
  --color-soft:oklch(0.3 0.011 85);
  --color-border:oklch(0.305 0.009 85);
  --color-border-hover:oklch(0.4 0.012 85);
  --color-sidebar:oklch(0.13 0.02 260);
  --color-sidebar-top:oklch(0.17 0.025 260);
  --color-sidebar-hover:oklch(0.25 0.02 260);
  --color-sidebar-active:oklch(0.32 0.06 165);
  --color-sidebar-border:oklch(0.22 0.015 260);
  --color-accent-product:oklch(0.70 0.14 300);
  --color-accent-product-light:oklch(0.28 0.06 300);
}

/* ── radius.css ─────────────────────────────────────────────────────── */
:root{
  --radius-sm:0.25rem;
  --radius-md:0.375rem;
  --radius-lg:0.5rem;
  --radius-xl:0.75rem;
  --radius-2xl:1rem;
  --radius-full:9999px;

  --radius-control:var(--radius-lg);  /* buttons, inputs sm/md */
  --radius-control-lg:var(--radius-xl);/* lg buttons, search fields */
  --radius-card:var(--radius-xl);
  --radius-pill:var(--radius-full);
  --border-width:1px;
}

/* ── spacing.css ─────────────────────────────────────────────────────── */
:root{
  --space-0:0;
  --space-0-5:0.125rem;
  --space-1:0.25rem;
  --space-1-5:0.375rem;
  --space-2:0.5rem;
  --space-2-5:0.625rem;
  --space-3:0.75rem;
  --space-4:1rem;
  --space-5:1.25rem;
  --space-6:1.5rem;
  --space-8:2rem;
  --space-10:2.5rem;
  --space-12:3rem;
  --space-16:4rem;

  /* Layout constants lifted from the apps */
  --sidebar-width:15rem;        /* 240px — Intune Assignments */
  --sidebar-width-wide:16rem;   /* 256px — Paperless Dedupe */
  --topbar-height:3rem;         /* 48px sticky breadcrumb bar */
  --mobile-bar-height:3.5rem;   /* 56px */
  --content-max:72rem;          /* max-w-6xl */
  --panel-padding:1.75rem;
  --panel-inset-padding:1.25rem;
  --stack-gap:2rem;
}

/* ── typography.css ─────────────────────────────────────────────────────── */
/* Type scale.
 *
 * ROOT-SIZE BASIS. Every size below is authored against a 16px root, which is
 * what the React apps run. Material for MkDocs / Zensical sets
 * `html { font-size: 125% }` — a 20px root — so the same tokens render 1.25x
 * their intended size there: --text-xs measures 15px, not 12px, and a caption
 * lands a hair under the theme's own 16px body copy.
 *
 * That is silent. The build is clean and the page looks plausible, just
 * uniformly heavy. So the correction is a single knob: a consuming stylesheet
 * on a 20px root sets
 *
 *   :root { --m7-root-basis: 0.8; }   (exactly 16/20)
 *
 * once, and the whole type scale lands where it was drawn. Nothing else needs
 * touching, and the default of 1 leaves 16px-root consumers untouched.
 *
 * Type only. Do NOT apply the basis to spacing, radius or shadow: those should
 * scale with the theme's larger root, and correcting them would leave a
 * correctly-sized page with cramped gutters. Line-heights DO take it — leaving
 * them uncorrected against corrected sizes is what makes text read loose.
 */
:root{
  --m7-root-basis:1; /* @kind other */

  --font-sans:'Geist','Geist Sans',ui-sans-serif,system-ui,sans-serif;
  --font-mono:'JetBrains Mono','JetBrains Mono Variable',ui-monospace,monospace;

  --text-xs:calc(0.75rem * var(--m7-root-basis));    --leading-xs:calc(1rem * var(--m7-root-basis));
  --text-sm:calc(0.875rem * var(--m7-root-basis));   --leading-sm:calc(1.25rem * var(--m7-root-basis));
  --text-base:calc(1rem * var(--m7-root-basis));     --leading-base:calc(1.5rem * var(--m7-root-basis));
  --text-lg:calc(1.125rem * var(--m7-root-basis));   --leading-lg:calc(1.75rem * var(--m7-root-basis));
  --text-xl:calc(1.25rem * var(--m7-root-basis));    --leading-xl:calc(1.75rem * var(--m7-root-basis));
  --text-2xl:calc(1.5rem * var(--m7-root-basis));    --leading-2xl:calc(2rem * var(--m7-root-basis));
  --text-3xl:calc(1.875rem * var(--m7-root-basis));  --leading-3xl:calc(2.25rem * var(--m7-root-basis));
  --text-4xl:calc(2.25rem * var(--m7-root-basis));   --leading-4xl:calc(2.5rem * var(--m7-root-basis));
  --text-5xl:calc(3rem * var(--m7-root-basis));      --leading-5xl:1.1; /* unitless — no basis */

  --weight-normal:400;
  --weight-medium:500;
  --weight-semibold:600;
  --weight-bold:700;

  --tracking-tight:-0.02em;
  --tracking-normal:0;
  --tracking-wide:0.05em;
  --tracking-wider:0.1em;

  /* Semantic type roles */
  --type-display:var(--weight-bold) var(--text-5xl)/var(--leading-5xl) var(--font-sans);
  --type-h1:var(--weight-bold) var(--text-2xl)/var(--leading-2xl) var(--font-sans);
  --type-h2:var(--weight-semibold) var(--text-lg)/var(--leading-lg) var(--font-sans);
  --type-body:var(--weight-normal) var(--text-sm)/var(--leading-sm) var(--font-sans);
  --type-label:var(--weight-medium) var(--text-sm)/var(--leading-sm) var(--font-sans);
  --type-caption:var(--weight-normal) var(--text-xs)/var(--leading-xs) var(--font-sans);
  --type-eyebrow:var(--weight-semibold) var(--text-xs)/var(--leading-xs) var(--font-sans);
  --type-code:var(--weight-medium) var(--text-xs)/var(--leading-xs) var(--font-mono);
}

/* ── elevation.css ─────────────────────────────────────────────────────── */
:root{
  --shadow-sm:0 1px 2px 0 oklch(0.2 0.02 260 / 0.04);
  --shadow-md:0 4px 6px -1px oklch(0.2 0.02 260 / 0.06),0 2px 4px -2px oklch(0.2 0.02 260 / 0.04);
  --shadow-lg:0 10px 15px -3px oklch(0.2 0.02 260 / 0.08),0 4px 6px -4px oklch(0.2 0.02 260 / 0.04);
  --shadow-panel:0 1px 2px oklch(0.2 0.02 260 / 0.04),0 2px 8px oklch(0.2 0.02 260 / 0.03);
  /* Focus ring. Tracks --color-accent by hand: these are literal values, not
     var() references, because a colour cannot be given an alpha channel
     inside a shadow without re-declaring it. Change the accent, change this. */
  --shadow-glow:0 0 0 3px oklch(0.49 0.13 165 / 0.15);
}
.dark{
  --shadow-sm:0 1px 2px 0 oklch(0 0 0 / 0.2);
  --shadow-md:0 4px 6px -1px oklch(0 0 0 / 0.3),0 2px 4px -2px oklch(0 0 0 / 0.2);
  --shadow-lg:0 10px 15px -3px oklch(0 0 0 / 0.35),0 4px 6px -4px oklch(0 0 0 / 0.2);
  --shadow-panel:0 1px 2px oklch(0 0 0 / 0.25),0 2px 8px oklch(0 0 0 / 0.2);
  --shadow-glow:0 0 0 3px oklch(0.68 0.12 165 / 0.2);
}

/* ── motion.css ─────────────────────────────────────────────────────── */
:root{
  --ease-standard:cubic-bezier(0.4,0,0.2,1); /* @kind other */
  --ease-out:ease-out; /* @kind other */
  --duration-fast:150ms; /* @kind other */
  --duration-base:200ms; /* @kind other */
  --duration-slow:300ms; /* @kind other */
  --duration-progress:500ms; /* @kind other */
  --press-scale:0.98; /* @kind other */
}
@keyframes m7-fade-in-up{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes m7-scale-in{from{opacity:0;transform:scale(0.96)}to{opacity:1;transform:scale(1)}}
@keyframes m7-slide-down{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
@keyframes m7-slide-in-right{from{opacity:0;transform:translateX(1rem)}to{opacity:1;transform:translateX(0)}}
@keyframes m7-shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
@keyframes m7-progress-pulse{0%,100%{opacity:1}50%{opacity:0.7}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:0.01ms!important;animation-iteration-count:1!important;transition-duration:0.01ms!important}}