/* ═══════════════════════════════════════════════════════════════════
   DROZ DESIGN SYSTEM · colors_and_type.css
   Institutional · Industrial · Editorial
   Aesthetic reference: Apple · BlackRock · Acuren
   ═══════════════════════════════════════════════════════════════════ */

/* ───── Fonts ─────
   Display serif = Times (user-supplied, fonts/times.ttf).
   Sans/mono still use Google Fonts substitutes — flagged in README §8.
*/
@font-face {
  font-family: 'Droz Times';
  src: url('fonts/times.ttf') format('truetype');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ─── Color · Ink & Paper (institutional neutrals) ─── */
  --paper:        #F5F3EE;  /* warm off-white — default background */
  --paper-pure:   #FFFFFF;  /* pure white — cards, tables */
  --paper-bone:   #ECE8E0;  /* muted panel background */
  --rule:         #D9D4CA;  /* hairline rules */
  --rule-soft:    #E7E2D8;  /* faintest rules */

  --ink:          #0B0B0C;  /* near-black — headlines, logo */
  --ink-2:        #1D1D1F;  /* body dark */
  --graphite:     #3A3A3D;  /* secondary text */
  --graphite-2:   #6B6B70;  /* tertiary / metadata */
  --graphite-3:   #9B9B9F;  /* disabled / captions */

  /* ─── Color · Brand accent ─── */
  --steel:        #C0C0C0;  /* chrome / logo metallic reference */
  --steel-dark:   #7A7F85;  /* matte steel */
  --accent:       #14323F;  /* Droz deep teal / ink-blue */
  --accent-2:     #1F4E63;  /* hover — lifted */
  --accent-wash:  #E6ECEF;  /* accent tint for chips/rails */

  /* ─── Color · Signal (industrial / telemetry) ─── */
  --signal-ok:    #2F6B4A;  /* forest, for "nominal" */
  --signal-warn:  #B4791E;  /* caution amber, ASTM-ish */
  --signal-crit:  #A8331F;  /* red-oxide, not neon */
  --signal-info:  #2C5B78;  /* muted blue */

  /* ─── Color · Dark dossier (the "vault" mode) ─── */
  --dark-bg:      #0A0A0B;
  --dark-surface: #131316;
  --dark-panel:   #1B1B1F;
  --dark-rule:    #2A2A30;
  --dark-ink:     #F2F0EA;  /* warm cream on black */
  --dark-ink-2:   #B9B6AE;
  --dark-graphite:#6E6B66;
  --dark-accent:  #5F8B9B;  /* lifted teal for dark surfaces */

  /* ─── Typography · Families ─── */
  --font-display: 'Droz Times', 'Times New Roman', Times, Georgia, serif;
  --font-sans:    'Inter Tight', 'Söhne', 'Neue Haas Grotesk', -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    'JetBrains Mono', 'Söhne Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ─── Typography · Scale (editorial, tight) ─── */
  --fs-eyebrow:   11px;   /* uppercase labels, dossier tags */
  --fs-caption:   12px;
  --fs-meta:      13px;
  --fs-body:      16px;
  --fs-lede:      19px;   /* standfirst / lede paragraphs */
  --fs-h6:        14px;
  --fs-h5:        17px;
  --fs-h4:        22px;
  --fs-h3:        28px;
  --fs-h2:        40px;
  --fs-h1:        56px;
  --fs-display:   88px;

  /* ─── Typography · Tracking ─── */
  --ls-tight:    -0.02em;
  --ls-snug:     -0.01em;
  --ls-normal:    0;
  --ls-wide:      0.04em;
  --ls-eyebrow:   0.12em;   /* uppercase micro-labels */

  /* ─── Typography · Weight ─── */
  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;

  /* ─── Typography · Line heights ─── */
  --lh-tight:    1.05;
  --lh-snug:     1.18;
  --lh-body:     1.55;
  --lh-prose:    1.7;

  /* ─── Spacing (4px base, 8px rhythm) ─── */
  --sp-0:   0;
  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:   12px;
  --sp-4:   16px;
  --sp-5:   24px;
  --sp-6:   32px;
  --sp-7:   48px;
  --sp-8:   64px;
  --sp-9:   96px;
  --sp-10: 128px;
  --sp-11: 160px;

  /* ─── Radii (reserved; Droz is SQUARE by default) ─── */
  --r-0:   0;      /* default for dossiers, cards, chips */
  --r-1:   2px;    /* inputs */
  --r-2:   4px;    /* buttons */
  --r-3:   8px;    /* modals */
  --r-full: 9999px;/* only for avatars & status dots */

  /* ─── Elevation (restrained — no glow) ─── */
  --shadow-1: 0 1px 0 rgba(11,11,12,0.04);
  --shadow-2: 0 1px 2px rgba(11,11,12,0.06), 0 0 0 1px rgba(11,11,12,0.04);
  --shadow-3: 0 8px 24px -8px rgba(11,11,12,0.12), 0 2px 4px rgba(11,11,12,0.04);
  --shadow-4: 0 24px 48px -16px rgba(11,11,12,0.22), 0 4px 8px rgba(11,11,12,0.06);
  --shadow-dossier: 0 0 0 1px var(--rule), 0 32px 64px -24px rgba(11,11,12,0.20);

  /* ─── Motion ─── */
  --ease-standard: cubic-bezier(0.2, 0.0, 0.0, 1);
  --ease-emphatic: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:  120ms;
  --dur-base:  200ms;
  --dur-slow:  420ms;

  /* ─── Grid ─── */
  --max-w:      1280px;
  --gutter:     24px;
  --col-count:  12;
}

/* ═══════════════════════════════════════════════════════════════════
   Base + Semantic elements
   ═══════════════════════════════════════════════════════════════════ */

html, body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-feature-settings: "ss01", "cv11", "kern";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Display — editorial serif, used SPARINGLY for section headings or marquee numbers */
.display, h1.display {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--ink);
}

h1 {
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--ink);
}

h2 {
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  color: var(--ink);
}

h3 {
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size: var(--fs-h3);
  line-height: 1.22;
  letter-spacing: var(--ls-snug);
  color: var(--ink);
}

h4 {
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size: var(--fs-h4);
  line-height: 1.3;
  letter-spacing: var(--ls-snug);
  color: var(--ink);
}

h5 {
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size: var(--fs-h5);
  line-height: 1.35;
  color: var(--ink);
}

h6, .eyebrow {
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size: var(--fs-eyebrow);
  line-height: 1.2;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--graphite-2);
}

p {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink-2);
}

.lede {
  font-size: var(--fs-lede);
  line-height: var(--lh-prose);
  color: var(--graphite);
  font-weight: var(--fw-regular);
}

small, .caption {
  font-size: var(--fs-caption);
  color: var(--graphite-2);
  line-height: 1.45;
}

code, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
  font-feature-settings: "tnum", "ss01";
}

.num, .tabular {
  font-feature-settings: "tnum", "lnum";
  font-variant-numeric: tabular-nums lining-nums;
}

/* Serial / code / part numbers */
.serial {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  color: var(--graphite);
  letter-spacing: 0.05em;
  font-feature-settings: "tnum";
}

/* Rule */
hr {
  border: 0;
  height: 1px;
  background: var(--rule);
  margin: var(--sp-6) 0;
}

/* Dark surface helpers */
.on-dark {
  background: var(--dark-bg);
  color: var(--dark-ink);
}
.on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4, .on-dark h5 { color: var(--dark-ink); }
.on-dark p, .on-dark .lede { color: var(--dark-ink-2); }
.on-dark .eyebrow, .on-dark h6 { color: var(--dark-graphite); }

/* Link — editorial restraint, not bluish */
a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--ink-2);
  transition: color var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard);
}
a:hover {
  color: var(--accent);
  border-color: var(--accent);
}

::selection { background: var(--ink); color: var(--paper-pure); }