/* ============================================================
   Shheletar — Self-hosted webfonts (@font-face)
   Source Serif 4 (serif) + IBM Plex Mono (data/labels).
   Files live in /static/fonts/. Replaces the Google Fonts @import.
   ============================================================ */

@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/fonts/source-serif-4-400.woff2") format("woff2");
}
@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/static/fonts/source-serif-4-600.woff2") format("woff2");
}
@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/static/fonts/source-serif-4-700.woff2") format("woff2");
}
@font-face {
  font-family: "Source Serif 4";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/static/fonts/source-serif-4-400-italic.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/fonts/ibm-plex-mono-400.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/static/fonts/ibm-plex-mono-600.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/static/fonts/ibm-plex-mono-700.woff2") format("woff2");
}

/* ============================================================
   Shheletar — Color
   Warm civic newsprint. Deep institutional green for the brand,
   rust + stamp-red for violations, amber for borderline.
   Think: a public record printed on recycled paper, rubber-stamped.
   ============================================================ */

:root {
  /* ---- Paper / surfaces (warm, newsprint) ---- */
  --paper:        #f4f1ea; /* primary canvas — warm off-white */
  --paper-deep:   #ebe5d6; /* sunk panels, table zebra stripe */
  --paper-panel:  #fbfaf5; /* raised cards, lighter than canvas */
  --paper-edge:   #ddd5c2; /* hairline borders, ledger rules */
  --paper-edge-2: #cfc6af; /* stronger divider */

  /* ---- Ink (warm near-blacks → greys) ---- */
  --ink:        #211f1a; /* primary text */
  --ink-soft:   #514c40; /* secondary text */
  --ink-faint:  #847c6a; /* captions, meta, placeholder */
  --ink-ghost:  #aaa18b; /* disabled, watermark */

  /* ---- Brand green (institutional, quiet, "compliant") ---- */
  --green:        #1c3d31; /* primary brand */
  --green-deep:   #122a22; /* pressed / headers on green */
  --green-bright: #2f6b51; /* hover, links, accents */
  --green-tint:   #dde6df; /* green wash surface */
  --green-line:   #b7c8bd; /* green hairline */

  /* ---- Alert family (violations) ---- */
  --rust:       #bd5b2a; /* primary alert accent */
  --rust-deep:  #9c3d18; /* severe / hover */
  --rust-tint:  #f1e1d4; /* alert wash surface */
  --stamp:      #9e2b25; /* official rubber-stamp red */
  --stamp-deep: #7c1f1b;

  /* ---- Amber (borderline / warning) ---- */
  --amber:      #c0902f;
  --amber-deep: #9a6f1d;
  --amber-tint: #f0e7cf;

  /* ---- Sky (rare informational accent — flight data) ---- */
  --sky:        #2e5e7e;
  --sky-tint:   #d9e4ea;

  /* ============================================================
     Semantic aliases — reference THESE in components
     ============================================================ */
  --bg:               var(--paper);
  --bg-sunk:          var(--paper-deep);
  --surface-card:     var(--paper-panel);
  --surface-inset:    var(--paper-deep);

  --text-strong:      var(--ink);
  --text-body:        var(--ink-soft);
  --text-muted:       var(--ink-faint);
  --text-disabled:    var(--ink-ghost);
  --text-on-green:    var(--paper);
  --text-on-rust:     #fbf3ec;

  --border:           var(--paper-edge);
  --border-strong:    var(--paper-edge-2);
  --rule:             var(--paper-edge); /* ledger / table hairline */

  --brand:            var(--green);
  --brand-hover:      var(--green-bright);
  --link:             var(--green-bright);

  /* status semantics */
  --status-violation:        var(--stamp);
  --status-violation-surface: var(--rust-tint);
  --status-warning:          var(--amber-deep);
  --status-warning-surface:  var(--amber-tint);
  --status-compliant:        var(--green-bright);
  --status-compliant-surface: var(--green-tint);
  --status-info:             var(--sky);
  --status-info-surface:     var(--sky-tint);

  /* focus ring */
  --focus-ring: color-mix(in srgb, var(--green-bright) 55%, transparent);
}

/* ============================================================
   Shheletar — Typography
   Editorial serif system. Mono is the "instrument" voice for any
   measured datum: tail numbers, decibels, timestamps, ref codes,
   coordinates. Eyebrows/labels use letterspaced mono uppercase.
   ============================================================ */

:root {
  /* ---- Families ---- */
  --font-serif: "Source Serif 4", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-mono:  "IBM Plex Mono", "SFMono-Regular", ui-monospace, "Menlo", monospace;

  /* semantic family aliases */
  --font-display: var(--font-serif); /* mastheads, headlines */
  --font-body:    var(--font-serif); /* running text */
  --font-data:    var(--font-mono);  /* any measured value */
  --font-label:   var(--font-mono);  /* eyebrows, UI micro-labels */

  /* ---- Weights ---- */
  --w-light:   300; /* @kind other */
  --w-regular: 400; /* @kind other */
  --w-medium:  500; /* @kind other */
  --w-semibold:600; /* @kind other */
  --w-bold:    700; /* @kind other */
  --w-black:   900; /* @kind other */ /* big violation numbers, masthead */

  /* ---- Type scale (fluid-ish, rem based on 16px root) ---- */
  --t-display:  4.5rem;   /* 72 — hero masthead */
  --t-h1:       3rem;     /* 48 */
  --t-h2:       2.125rem; /* 34 */
  --t-h3:       1.5rem;   /* 24 */
  --t-h4:       1.1875rem;/* 19 */
  --t-lede:     1.375rem; /* 22 — intro paragraph */
  --t-body:     1.0625rem;/* 17 — running text */
  --t-small:    0.9375rem;/* 15 */
  --t-caption:  0.8125rem;/* 13 */
  --t-eyebrow:  0.6875rem;/* 11 — letterspaced mono labels */

  /* big data readout (decibels, counts) */
  --t-readout:  3.25rem;  /* 52 */

  /* ---- Line heights ---- */
  --lh-tight:   1.05; /* @kind other */
  --lh-snug:    1.2;  /* @kind other */
  --lh-normal:  1.55; /* @kind other */
  --lh-data:    1.3;  /* @kind other */

  /* ---- Tracking ---- */
  --track-tight:   -0.02em; /* @kind other */
  --track-normal:  0;       /* @kind other */
  --track-eyebrow:  0.16em; /* @kind other */
  --track-data:     0.01em; /* @kind other */
}

/* ============================================================
   Optional helper classes (components mostly use vars directly)
   ============================================================ */
.t-eyebrow {
  font-family: var(--font-label);
  font-size: var(--t-eyebrow);
  font-weight: var(--w-semibold);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
}
.t-data {
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--track-data);
}

/* ============================================================
   Shheletar — Spacing, radii, layout rhythm
   8px base grid. Tight, document-like density.
   ============================================================ */

:root {
  /* ---- Spacing scale (8px grid, with 2/4 micro steps) ---- */
  --s-0:   0; /* @kind spacing */
  --s-1:   0.25rem; /* 4  */
  --s-2:   0.5rem;  /* 8  */
  --s-3:   0.75rem; /* 12 */
  --s-4:   1rem;    /* 16 */
  --s-5:   1.5rem;  /* 24 */
  --s-6:   2rem;    /* 32 */
  --s-7:   3rem;    /* 48 */
  --s-8:   4rem;    /* 64 */
  --s-9:   6rem;    /* 96 */
  --s-10:  8rem;    /* 128 */

  /* ---- Radii — small & papery. Documents are crisp, not pillowy ---- */
  --r-0:   0; /* @kind radius */
  --r-sm:  3px;
  --r-md:  5px;
  --r-lg:  8px;
  --r-pill: 999px;

  /* ---- Border widths ---- */
  --bw-hair:   1px;
  --bw-rule:   1.5px; /* ledger rules, table heads */
  --bw-strong: 2px;   /* stamp frames, emphasis */

  /* ---- Layout ---- */
  --measure:        66ch;   /* ideal reading width */
  --content-max:    1200px; /* app / marketing container */
  --doc-max:        816px;  /* printable report (US Letter @96dpi-ish) */
  --gutter:         var(--s-5);
}

/* ============================================================
   Shheletar — Elevation & texture
   Institutional documents are mostly FLAT. Shadows are subtle and
   warm-tinted — never floaty drop-shadows. Borders do most of the
   structural work. A faint paper grain is available as a motif.
   ============================================================ */

:root {
  /* ---- Shadows (warm, restrained) ---- */
  --shadow-none: none;
  /* card resting on paper — barely lifted */
  --shadow-sm:  0 1px 2px rgba(33, 31, 26, 0.06);
  /* raised panel / dropdown */
  --shadow-md:  0 2px 4px rgba(33, 31, 26, 0.07), 0 6px 16px rgba(33, 31, 26, 0.06);
  /* dialog / popover */
  --shadow-lg:  0 8px 24px rgba(33, 31, 26, 0.12), 0 2px 6px rgba(33, 31, 26, 0.08);
  /* pressed / inset (form fields) */
  --shadow-inset: inset 0 1px 2px rgba(33, 31, 26, 0.08);

  /* ---- The "document" elevation: hairline frame, no blur ---- */
  --frame: var(--bw-hair) solid var(--border);
  --frame-strong: var(--bw-rule) solid var(--border-strong);

  /* ---- Paper grain (very subtle, layer under content as a motif) ---- */
  --grain:
    repeating-linear-gradient(
      0deg,
      rgba(33,31,26,0.013) 0px,
      rgba(33,31,26,0.013) 1px,
      transparent 1px,
      transparent 3px
    ); /* @kind other */

  /* ---- Stamp ink texture-ish (used for the VIOLATION stamp) ---- */
  --stamp-frame: var(--bw-strong) solid var(--stamp);

  /* ---- Motion ---- */
  --ease-out:   cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */
  --ease-in-out:cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
  --dur-fast:   120ms; /* @kind other */
  --dur-base:   200ms; /* @kind other */
  --dur-slow:   360ms; /* @kind other */
}

/* ============================================================
   Shheletar — Base element styling
   Sensible document defaults so raw HTML already looks "Shheletar".
   ============================================================ */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background-color: var(--bg);
  background-image: var(--grain);
  color: var(--text-body);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: var(--lh-normal);
  font-weight: var(--w-regular);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---- Headings — serif, ink, tight ---- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--text-strong);
  font-weight: var(--w-bold);
  line-height: var(--lh-snug);
  letter-spacing: var(--track-tight);
  margin: 0 0 var(--s-3);
  text-wrap: balance;
}
h1 { font-size: var(--t-h1); line-height: var(--lh-tight); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); letter-spacing: var(--track-normal); }
h4 { font-size: var(--t-h4); letter-spacing: var(--track-normal); }

p { margin: 0 0 var(--s-4); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a {
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--green-line);
  transition: color var(--dur-fast) var(--ease-out),
              text-decoration-color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--green-deep); text-decoration-color: currentColor; }

strong, b { font-weight: var(--w-bold); color: var(--text-strong); }
em { font-style: italic; }

small { font-size: var(--t-caption); color: var(--text-muted); }

hr {
  border: 0;
  border-top: var(--bw-hair) solid var(--rule);
  margin: var(--s-5) 0;
}

code, kbd, samp {
  font-family: var(--font-mono);
  font-size: 0.92em;
  font-variant-numeric: tabular-nums;
}

/* numeric/data tables read as a ledger */
table { border-collapse: collapse; }

::selection { background: color-mix(in srgb, var(--amber) 40%, transparent); }

:focus-visible {
  outline: 2px solid var(--green-bright);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* utility: constrained reading column */
.measure { max-width: var(--measure); }

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