/* =====================================================================
   JVM Energy Software — Design Tokens
   Colors, type, spacing, motion, elevation.

   Import this file in any page:
     <link rel="stylesheet" href="/path/to/colors_and_type.css">

   Webfonts loaded from Google Fonts. If running offline, the .woff2 files
   are also vendored in /fonts/ — see README.
   ===================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500;600&display=swap");

:root {
  /* -------------------------------------------------------------------
     COLOR — primitives
     ------------------------------------------------------------------- */

  /* Brand chord */
  --paper:        #F2EEE5;  /* warm cream — default page bg */
  --paper-bright: #F8F5EE;  /* a touch lighter, for raised surfaces */
  --ink:          #0F1B2D;  /* deep navy — primary text + structure */
  --ink-press:    #1A2840;  /* a hair cooler, used for press states */
  --voltage:      #F5B400;  /* warm amber — primary accent */
  --voltage-deep: #C68F00;  /* darker voltage, hover/press */
  --turbine:      #2E7D7A;  /* muted teal — secondary accent */
  --turbine-deep: #1F5B58;
  --surge:        #D9482B;  /* burnt orange — alerts / destructive */
  --surge-deep:   #A8351F;

  /* Neutral ramp (steel → smoke → paper) */
  --steel:    #2C3A4F;
  --graphite: #4A5468;
  --slate:    #6B7689;
  --smoke:    #A0A8B5;
  --mist:     #D6D2C8;
  --paper-2:  #E8E3D7;       /* slightly darker paper, used for borders/dividers */

  /* -------------------------------------------------------------------
     COLOR — semantic
     ------------------------------------------------------------------- */
  --bg:               var(--paper);
  --bg-surface:       var(--paper-bright);
  --bg-inverse:       var(--ink);
  --bg-accent:        var(--voltage);

  --fg1:              var(--ink);         /* primary text */
  --fg2:              var(--steel);       /* secondary text */
  --fg3:              var(--graphite);    /* tertiary / metadata */
  --fg-mute:          var(--slate);       /* placeholder, disabled */
  --fg-on-ink:        var(--paper);       /* text on dark surfaces */
  --fg-on-voltage:    var(--ink);         /* text on amber */

  --border:           var(--ink);          /* primary 1.5px rule */
  --border-soft:      var(--paper-2);      /* gentle dividers */

  --link:             var(--ink);
  --link-underline:   var(--voltage);

  /* -------------------------------------------------------------------
     TYPE — families
     ------------------------------------------------------------------- */
  --font-display:  "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-body:     "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono:     "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* -------------------------------------------------------------------
     TYPE — scale (px values; convert to rem at the consumer)
     ------------------------------------------------------------------- */
  --t-12: 12px;
  --t-14: 14px;
  --t-16: 16px;
  --t-18: 18px;
  --t-20: 20px;
  --t-24: 24px;
  --t-32: 32px;
  --t-44: 44px;
  --t-64: 64px;
  --t-88: 88px;

  /* -------------------------------------------------------------------
     SPACE
     ------------------------------------------------------------------- */
  --s-2:  2px;
  --s-4:  4px;
  --s-8:  8px;
  --s-12: 12px;
  --s-16: 16px;
  --s-24: 24px;
  --s-32: 32px;
  --s-48: 48px;
  --s-64: 64px;
  --s-96: 96px;
  --s-128: 128px;

  /* -------------------------------------------------------------------
     RADIUS
     ------------------------------------------------------------------- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;

  /* -------------------------------------------------------------------
     ELEVATION — two levels only
     ------------------------------------------------------------------- */
  --shadow-1: 0 1px 0 0 var(--ink);
  --shadow-2: 0 8px 24px -12px rgba(15, 27, 45, 0.18);

  /* -------------------------------------------------------------------
     MOTION
     ------------------------------------------------------------------- */
  --ease-decisive: cubic-bezier(0.2, 0, 0, 1);
  --dur-fast: 150ms;
  --dur-base: 200ms;
  --dur-slow: 400ms;

  /* -------------------------------------------------------------------
     LAYOUT
     ------------------------------------------------------------------- */
  --content-max: 1200px;
  --prose-max:    680px;
  --gutter:        24px;
}

/* =====================================================================
   Semantic typography styles
   Use as @extend / direct classes. The .heading-1, .body, .mono-eyebrow
   names are how the rest of the system references type.
   ===================================================================== */

.heading-1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-88);
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--fg1);
}

.heading-2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-64);
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--fg1);
}

.heading-3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-44);
  line-height: 1.12;
  letter-spacing: -0.005em;
  color: var(--fg1);
}

.heading-4 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-32);
  line-height: 1.2;
  color: var(--fg1);
}

.heading-5 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-24);
  line-height: 1.3;
  color: var(--fg1);
}

.body-lg {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--t-20);
  line-height: 1.6;
  color: var(--fg1);
}

.body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--t-18);
  line-height: 1.65;
  color: var(--fg1);
}

.body-sm {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--t-16);
  line-height: 1.55;
  color: var(--fg2);
}

.mono-eyebrow {
  /* The signature "engineering metadata" label.
     Use above titles, on tags, dates, version markers, byline. */
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--t-12);
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg3);
}

.mono-label {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--t-14);
  line-height: 1.3;
  letter-spacing: 0.02em;
  color: var(--fg2);
}

.code {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: var(--t-14);
  line-height: 1.5;
  color: var(--fg1);
  background: var(--paper-2);
  padding: 0.15em 0.4em;
  border-radius: var(--radius-sm);
}

.code-block {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: var(--t-14);
  line-height: 1.6;
  color: var(--fg-on-ink);
  background: var(--ink);
  padding: var(--s-24);
  border-radius: var(--radius-md);
  overflow-x: auto;
}

/* Links — the signature "underline grows on hover" */
.link {
  color: var(--link);
  text-decoration: underline;
  text-decoration-color: var(--link-underline);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: text-decoration-thickness var(--dur-fast) var(--ease-decisive);
}
.link:hover {
  text-decoration-thickness: 2px;
}

/* Reset-ish defaults for the surrounding page */
body.jvm {
  margin: 0;
  background: var(--bg);
  color: var(--fg1);
  font-family: var(--font-body);
  font-size: var(--t-18);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}