/* Shared design tokens for the html-effectiveness gallery.
   Derived from the repo-root DESIGN.md token contract (lusion-inspired
   direction). Every page in this directory links this file first and
   builds its page-specific styles on these custom properties. */

@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/fonts/JetBrainsMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Color */
  --he-bg: #f0f1fa;
  --he-surface: #ffffff;
  --he-ink: #000000;
  --he-ink-muted: #2b2e3a;
  --he-primary: #1a2ffb;
  --he-on-primary: #f0f1fa;
  --he-border: rgba(0, 0, 0, 0.14);
  --he-surface-2: #e6e8f4; /* subtle inset panels, code backgrounds */

  /* Semantic status (restrained, harmonizes with the two-hue palette) */
  --he-ok: #2e7d51;
  --he-warn: #a8741f;
  --he-err: #c03a2e;

  /* Type */
  --he-sans: "Inter", "Helvetica Neue", Arial, sans-serif;
  --he-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --he-code: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Shape — flat surfaces, no drop shadows */
  --he-radius-sm: 10px;
  --he-radius-md: 15px;
  --he-radius-lg: 20px;
  --he-radius-pill: 100px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --he-bg: #000000;
    --he-surface: #131320;
    --he-ink: #f0f1fa;
    --he-ink-muted: #b9bcc9;
    --he-primary: #5b6bff;
    --he-on-primary: #f0f1fa;
    --he-border: rgba(240, 241, 250, 0.18);
    --he-surface-2: #1c1c2c;

    --he-ok: #5cb884;
    --he-warn: #d9a44a;
    --he-err: #e0685c;
  }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--he-bg);
  color: var(--he-ink);
  font-family: var(--he-sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--he-primary);
}

/* Uppercase mono label — the site's metadata/index idiom */
.he-label {
  font-family: var(--he-mono);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0.0975em;
  text-transform: uppercase;
  color: var(--he-ink-muted);
}

/* Slim top nav back to the gallery index */
.he-nav {
  max-width: 960px;
  margin: 0 auto;
  padding: 24px 24px 0;
}
.he-nav a {
  font-family: var(--he-mono);
  font-size: 12px;
  letter-spacing: 0.0975em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--he-ink-muted);
}
.he-nav a:hover {
  color: var(--he-primary);
}

/* Footer attribution */
.he-footer {
  max-width: 960px;
  margin: 64px auto 0;
  padding: 24px;
  font-family: var(--he-mono);
  font-size: 12px;
  letter-spacing: 0.0975em;
  text-transform: uppercase;
  color: var(--he-ink-muted);
}
.he-footer a {
  color: inherit;
}
.he-footer a:hover {
  color: var(--he-primary);
}