/* Elenium Design System: the brand font, the tokens the base element rules
   below read, and those rules. The console's own palette and components are
   page.css and inline styles; the hover states are hover.css. */

/* Inter Variable — bundled brand font. TTF with full 100–900 weight axis. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/static/inter-var.ttf") format("truetype-variations"),
       url("/static/inter-var.ttf") format("truetype");
}

:root {
  /* ----- Colour: brand palette ----- */
  --elenium-dark:            #1A274C;   /* primary brand navy */
  --secondary-dark:          #1C3172;   /* hover / link / secondary accent */
  --voyager-yellow:          #FEBE10;   /* accent — VYGR mark, CTAs, focus */

  /* ----- Colour: neutrals ----- */
  --white:                   #FFFFFF;
  --grey-text:               #4A4A4A;   /* subdued body on light */

  /* ----- Colour: semantic ----- */
  --bg:                      var(--white);

  --fg:                      var(--elenium-dark);
  --fg-muted:                var(--grey-text);
  --fg-link:                 var(--elenium-dark);
  --fg-link-hover:           var(--secondary-dark);

  --focus-ring:              var(--voyager-yellow);

  /* ----- Typography: families ----- */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-display: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* ----- Typography: scale ----- */
  --text-h1:            clamp(36px, 4.4vw, 56px);
  --text-h2:            clamp(28px, 3vw, 40px);
  --text-h3:            24px;
  --text-h4:            20px;
  --text-body-lg:       18px;
  --text-body:          16px;
  --text-body-sm:       14px;

  /* ----- Typography: weights ----- */
  --weight-semibold:    600;
  --weight-bold:        700;

  /* ----- Typography: leading ----- */
  --lh-tight:           1.05;
  --lh-snug:            1.2;
  --lh-normal:          1.5;

  /* ----- Typography: tracking ----- */
  --track-tight:        -0.01em;
  --track-caps:         0.08em;

  /* ----- Spacing (8px base) ----- */
  --space-4:   16px;

  /* ----- Motion ----- */
  --ease:       cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur:        200ms;
}

/* Base element rules. */
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--lh-normal);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--fg);
  letter-spacing: var(--track-tight);
  line-height: var(--lh-tight);
  font-weight: var(--weight-bold);
  margin: 0 0 var(--space-4);
  text-wrap: balance;
}
h1 { font-size: var(--text-h1); }
h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-h3); line-height: var(--lh-snug); }
h4 { font-size: var(--text-h4); line-height: var(--lh-snug); }
h5 { font-size: var(--text-body-lg); font-weight: var(--weight-semibold); letter-spacing: 0; }
h6 { font-size: var(--text-body); font-weight: var(--weight-semibold); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--fg-muted); }

p  { margin: 0 0 var(--space-4); text-wrap: pretty; }

small { font-size: var(--text-body-sm); color: var(--fg-muted); }

a {
  color: var(--fg-link);
  text-decoration: none;
  transition: color var(--dur) var(--ease);
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
}
a:hover { color: var(--fg-link-hover); }

code, pre {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

::selection { background: var(--voyager-yellow); color: var(--elenium-dark); }

*:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: 2px;
}