/* ==========================================================================
   ENTROPY — colors & type tokens
   Black / white / gray + stoplight semantics. Dark theme is canonical.
   ========================================================================== */

/* -- Webfonts (Google Fonts CDN) ---------------------------------------- */
/* NOTE: We are using DM Sans + JetBrains Mono as the closest readily-available
   match to the geometric, even-stroke wordmark used in the Entropy logo.
   Flag: if a licensed primary font exists, drop ttf/woff2 into ./fonts/ and
   replace the @import below with @font-face declarations. */
/* Sora — closest open match to the Entropy wordmark: even strokes, geometric,
   round o/p, flat-cut terminals on e/t. Used for both display and body. */
/* entropy.build serves Sora and JetBrains Mono itself (/fonts/fonts.css); the Google Fonts @import that
   stood here was removed when the site was brought in (tools/import-handoff.py). */

:root {
  /* ----- Color: neutral scale (the spine of the system) ----------------- */
  --ink-000: #ffffff;          /* pure white          (light fg, paper)   */
  --ink-050: #f5f5f5;          /* paper / cards on light                  */
  --ink-100: #e6e6e6;          /* hairline / divider on light             */
  --ink-200: #c9c9c9;          /* subtle text on dark                     */
  --ink-300: #9a9a9a;          /* meta / secondary on dark                */
  --ink-400: #6e6e6e;          /* muted                                    */
  --ink-500: #4a4a4a;          /* divider on dark                          */
  --ink-600: #2e2e2e;          /* surface raised on dark                   */
  --ink-700: #1c1c1c;          /* surface (cards) on dark                  */
  --ink-800: #121212;          /* page background (canonical dark)         */
  --ink-900: #000000;          /* pure black (logo lockup, deep canvas)    */

  /* ----- Semantic foreground / background (dark-first) ------------------ */
  --bg-canvas:    var(--ink-800);   /* page                                */
  --bg-surface:   var(--ink-700);   /* cards, panels                       */
  --bg-raised:    var(--ink-600);   /* hover, modals                       */
  --bg-inset:     var(--ink-900);   /* code blocks, deep wells             */

  --fg-1: var(--ink-000);           /* primary text                        */
  --fg-2: var(--ink-200);           /* secondary text                      */
  --fg-3: var(--ink-300);           /* meta / captions                     */
  --fg-4: var(--ink-400);           /* placeholder, disabled               */

  --line-1: var(--ink-500);         /* hairline divider                    */
  --line-2: var(--ink-600);         /* subtle divider                      */

  /* ----- Stoplight: status & risk -------------------------------------- */
  /* Used for indicators, traffic-light KPIs, risk badges, status pills.
     Pair with neutral chrome — never together as "rainbow". */
  --status-go-500:      #2bb673;    /* green   — on track / approved      */
  --status-go-300:      #5fd49a;
  --status-go-700:      #1d8553;
  --status-go-bg:       #11341f;    /* tinted bg on dark surface          */

  --status-watch-500:   #f5b400;    /* yellow  — caution / at risk        */
  --status-watch-300:   #ffd25c;
  --status-watch-700:   #b88500;
  --status-watch-bg:    #3a2c00;

  --status-stop-500:    #e53935;    /* red     — blocked / over           */
  --status-stop-300:    #ff6b67;
  --status-stop-700:    #a8201d;
  --status-stop-bg:     #3a1110;

  --status-neutral-500: var(--ink-300);
  --status-neutral-bg:  var(--ink-600);

  /* ----- Light-theme inversions (rarely used; print, exports) ---------- */
  --light-bg-canvas:  var(--ink-000);
  --light-bg-surface: var(--ink-050);
  --light-fg-1:       var(--ink-900);
  --light-fg-2:       var(--ink-700);
  --light-fg-3:       var(--ink-400);
  --light-line-1:     var(--ink-100);

  /* ----- Type families -------------------------------------------------- */
  --font-display: "Sora", "Avenir Next", "Futura", -apple-system, system-ui, sans-serif;
  --font-body:    "Sora", -apple-system, system-ui, "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* ----- Type scale (1.250 — major third, on a 16px base) -------------- */
  --fs-12: 0.75rem;       /* 12 — micro / legal                            */
  --fs-13: 0.8125rem;     /* 13 — meta                                     */
  --fs-14: 0.875rem;      /* 14 — small body                               */
  --fs-16: 1rem;          /* 16 — body                                     */
  --fs-18: 1.125rem;      /* 18 — lead body                                */
  --fs-20: 1.25rem;       /* 20 — h5                                       */
  --fs-24: 1.5rem;        /* 24 — h4                                       */
  --fs-32: 2rem;          /* 32 — h3                                       */
  --fs-44: 2.75rem;       /* 44 — h2                                       */
  --fs-60: 3.75rem;       /* 60 — h1                                       */
  --fs-84: 5.25rem;       /* 84 — display                                  */

  /* ----- Weights -------------------------------------------------------- */
  --fw-light:   300;
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;

  /* ----- Letter spacing ------------------------------------------------- */
  --tracking-tight:   -0.01em;   /* large display (Sora is already tight)   */
  --tracking-snug:     0em;      /* headings — let the geometry breathe    */
  --tracking-normal:   0em;
  --tracking-loose:    0.04em;   /* eyebrow / overline                     */
  --tracking-eyebrow:  0.18em;   /* ALL-CAPS labels                        */

  /* ----- Line heights --------------------------------------------------- */
  --lh-display: 1.08;
  --lh-heading: 1.18;
  --lh-body:    1.55;
  --lh-tight:   1.25;

  /* ----- Spacing (4 px base) ------------------------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;
  --space-32: 128px;

  /* ----- Radius — restrained; prefer flat / hard edges ----------------- */
  --radius-0:  0;
  --radius-1:  2px;     /* inputs, chips                                   */
  --radius-2:  4px;     /* cards                                           */
  --radius-3:  8px;     /* modals                                          */
  --radius-pill: 999px;

  /* ----- Elevation (very subtle on dark — value contrast does the work) */
  --shadow-0: none;
  --shadow-1: 0 1px 0 rgba(255,255,255,0.04) inset, 0 1px 2px rgba(0,0,0,0.4);
  --shadow-2: 0 4px 16px rgba(0,0,0,0.5);
  --shadow-3: 0 16px 48px rgba(0,0,0,0.65);
  --shadow-focus: 0 0 0 2px var(--ink-800), 0 0 0 4px var(--ink-000);

  /* ----- Motion --------------------------------------------------------- */
  --ease-standard: cubic-bezier(0.2, 0.0, 0.0, 1);
  --ease-emphasis: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-fast:   120ms;
  --dur-base:   200ms;
  --dur-slow:   400ms;
}

/* ==========================================================================
   Element-level defaults (semantic styles)
   ========================================================================== */

html, body {
  background: var(--bg-canvas);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-size: var(--fs-16);
  line-height: var(--lh-body);
  font-weight: var(--fw-regular);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--fs-60);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-tight);
  font-weight: var(--fw-medium);
  color: var(--fg-1);
  margin: 0;
}
h2, .h2 {
  font-family: var(--font-display);
  font-size: var(--fs-44);
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-snug);
  font-weight: var(--fw-medium);
  color: var(--fg-1);
  margin: 0;
}
h3, .h3 {
  font-family: var(--font-display);
  font-size: var(--fs-32);
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-snug);
  font-weight: var(--fw-medium);
  color: var(--fg-1);
  margin: 0;
}
h4, .h4 {
  font-family: var(--font-display);
  font-size: var(--fs-24);
  line-height: var(--lh-heading);
  font-weight: var(--fw-medium);
  color: var(--fg-1);
  margin: 0;
}
h5, .h5 {
  font-family: var(--font-display);
  font-size: var(--fs-20);
  line-height: var(--lh-tight);
  font-weight: var(--fw-medium);
  color: var(--fg-1);
  margin: 0;
}

.display {
  font-family: var(--font-display);
  font-size: var(--fs-84);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-tight);
  font-weight: var(--fw-medium);
}

p, .body {
  font-size: var(--fs-16);
  line-height: var(--lh-body);
  color: var(--fg-2);
  margin: 0;
}
.lead {
  font-size: var(--fs-18);
  line-height: var(--lh-body);
  color: var(--fg-2);
}
.small {
  font-size: var(--fs-14);
  line-height: var(--lh-body);
  color: var(--fg-3);
}
.meta {
  font-size: var(--fs-13);
  color: var(--fg-3);
}
.eyebrow {
  font-size: var(--fs-12);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-3);
}
.mono, code, kbd {
  font-family: var(--font-mono);
  font-size: 0.92em;
  letter-spacing: 0;
}
code {
  background: var(--bg-inset);
  color: var(--fg-1);
  padding: 2px 6px;
  border-radius: var(--radius-1);
}
hr {
  border: 0;
  border-top: 1px solid var(--line-1);
  margin: var(--space-8) 0;
}
a {
  color: var(--fg-1);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: opacity var(--dur-fast) var(--ease-standard);
}
a:hover { opacity: 0.7; }

/* Status helpers */
.is-go    { color: var(--status-go-500); }
.is-watch { color: var(--status-watch-500); }
.is-stop  { color: var(--status-stop-500); }