/* ==========================================================================
   lint.uz — design tokens
   One base system shared by every tool. Each tool sets --hue-* only.
   ========================================================================== */

/* ---------- fonts (self-hosted: zero outbound requests) ---------- */
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 100 700;
  font-stretch: 85% 100%;
  font-display: swap;
  src: url("fonts/plex-sans-var.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 100 700;
  font-stretch: 85% 100%;
  font-display: swap;
  src: url("fonts/plex-sans-var-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url("fonts/jetbrains-mono-var.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url("fonts/jetbrains-mono-var-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- invariants: identical in every theme ---------- */
:root {
  /* one sans for the whole suite; --display stays as a name so a heading
     can still ask for "the display face" without caring that it is the same */
  --ui: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: var(--ui);
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* type scale — whole pixels around a 13px base: tight steps for the
     dense chrome, wider ones for the few headings. Every size in the suite
     is one of these six. */
  --fs-micro: 11px;
  --fs-small: 12px;
  --fs-base: 13px;
  --fs-mid: 15px;
  --fs-large: 17px;
  --fs-display: 22px;

  /* space — 4px grid */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 36px;

  /* controls use --radius, menus and popovers --radius-lg; --radius-sm is
     only for chips nested inside a control (a segment, a kbd, a type icon) */
  --radius-sm: 4px;
  --radius: 6px;
  --radius-lg: 10px;
  --gutter-w: 52px;
  --hairline: 1px;

  --t-fast: 110ms;
  --t-mid: 180ms;

  /* fallback hue — every tool overrides these three */
  --hue: #5B61E8;
  --hue-ink: #FFFFFF;
  --hue-wash: color-mix(in srgb, var(--hue) 10%, transparent);
}

/* ==========================================================================
   THEMES
   Three choices: System (no data-theme), Light ("daylight") and Dark
   ("slate"). Each block defines the same tokens. Increase contrast is a
   separate switch (data-contrast="more") laid over whichever of light or
   dark is showing; theme-boot.js turns it on from the OS setting until
   someone chooses. The ids keep their old names so a saved cookie still
   means the same thing.
   ========================================================================== */

/* ---------- Light ("daylight") ---------- */
/* The gutter carries the tool's hue but should not be the loudest thing on
   screen: a faint wash, muted numbers, and the current line in the hue. */
:root,
:root[data-theme="daylight"] {
  --gutter-tint: 5%;
  --gutter-ink: 30%;
  --gutter-cur: var(--hue);
  --surface: #FBFBFC;
  --raised: #FFFFFF;
  --sunken: #F2F3F6;
  --line: #E1E4EA;
  --line-strong: #CBD0D9;
  --ink: #1A1D23;
  --muted: #5F6672;
  --faint: #969CA8;

  --ok: #17794B;
  --bad: #C42B1C;
  --warn: #A96500;

  --t-key: #2A4FB8;
  --t-str: #17794B;
  --t-num: #7A3DB8;
  --t-bool: #A8480B;
  --t-null: #7C838F;
  --t-cont: #0E6E78;
  --t-date: #A96500;
  --t-punct: #8B919C;

  --row-hover: #F0F2F6;
  --row-active: color-mix(in srgb, var(--hue) 13%, transparent);
  --mark: #FBE38E;
  --mark-ink: #3A2E00;
  --scroll: #C6CBD4;
  --shadow: 0 6px 20px -6px rgb(26 29 35 / 0.18), 0 1px 2px rgb(26 29 35 / 0.07);
  color-scheme: light;
}

/* ---------- Dark ("slate") ---------- */
/* pure hue is too dim on a dark surface, so the current line lifts it */
:root[data-theme="slate"] {
  --gutter-tint: 7%;
  --gutter-ink: 30%;
  --gutter-cur: color-mix(in srgb, var(--hue) 55%, var(--ink));
  --surface: #15171C;
  --raised: #1B1E25;
  --sunken: #101216;
  --line: #2A2E38;
  --line-strong: #3C4250;
  --ink: #E6E9F0;
  --muted: #98A0AE;
  --faint: #656C7A;

  --ok: #56C88C;
  --bad: #F2796B;
  --warn: #E0A33E;

  --t-key: #82B5F0;
  --t-str: #8FCB9B;
  --t-num: #C3A2F5;
  --t-bool: #EFA063;
  --t-null: #79808D;
  --t-cont: #5FC7D4;
  --t-date: #E0A33E;
  --t-punct: #6E7684;

  --row-hover: #222630;
  --row-active: color-mix(in srgb, var(--hue) 26%, transparent);
  --mark: #7A6220;
  --mark-ink: #FFF3D0;
  --scroll: #3A404C;
  --shadow: 0 8px 26px -8px rgb(0 0 0 / 0.6), 0 1px 2px rgb(0 0 0 / 0.35);
  color-scheme: dark;
}

/* ---------- System — follows the OS when no explicit theme is set ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --gutter-tint: 7%;
    --gutter-ink: 30%;
    --gutter-cur: color-mix(in srgb, var(--hue) 55%, var(--ink));
    --surface: #15171C;
    --raised: #1B1E25;
    --sunken: #101216;
    --line: #2A2E38;
    --line-strong: #3C4250;
    --ink: #E6E9F0;
    --muted: #98A0AE;
    --faint: #656C7A;

    --ok: #56C88C;
    --bad: #F2796B;
    --warn: #E0A33E;

    --t-key: #82B5F0;
    --t-str: #8FCB9B;
    --t-num: #C3A2F5;
    --t-bool: #EFA063;
    --t-null: #79808D;
    --t-cont: #5FC7D4;
    --t-date: #E0A33E;
    --t-punct: #6E7684;

    --row-hover: #222630;
    --row-active: color-mix(in srgb, var(--hue) 26%, transparent);
    --mark: #7A6220;
    --mark-ink: #FFF3D0;
    --scroll: #3A404C;
    --shadow: 0 8px 26px -8px rgb(0 0 0 / 0.6), 0 1px 2px rgb(0 0 0 / 0.35);
    color-scheme: dark;
  }
}

/* ==========================================================================
   INCREASE CONTRAST — data-contrast="more"
   AAA text on both palettes, heavier lines and the gutter's numbers at full
   strength. These come after the System block so they win over it. The
   dark one is written twice, like Dark itself, because System can only
   know the OS is dark from inside a media query.
   ========================================================================== */

/* ---------- light + contrast ---------- */
:root[data-contrast="more"]:not([data-theme="slate"]) {
  --gutter-tint: 7%;
  --gutter-ink: 0%;
  --gutter-cur: var(--hue);
  --surface: #FFFFFF;
  --raised: #FFFFFF;
  --sunken: #F0F0F0;
  --line: #7A7A7A;
  --line-strong: #000000;
  --ink: #000000;
  --muted: #3D3D3D;
  --faint: #5C5C5C;

  --ok: #006B3C;
  --bad: #B10000;
  --warn: #7A4B00;

  --t-key: #0033A0;
  --t-str: #006B3C;
  --t-num: #5C1F99;
  --t-bool: #8A3400;
  --t-null: #4A4A4A;
  --t-cont: #00575E;
  --t-date: #7A4B00;
  --t-punct: #3D3D3D;

  --row-hover: #E8E8E8;
  --row-active: color-mix(in srgb, var(--hue) 20%, transparent);
  --mark: #FFE55C;
  --mark-ink: #000000;
  --scroll: #7A7A7A;
  --shadow: 0 0 0 2px #000000;
  --hairline: 1.5px;
  color-scheme: light;
}

/* ---------- dark + contrast ----------
   Black surfaces, white ink, grey lines a reader can actually see, and
   syntax colours lifted until every one is above 10:1 on the surface. */
:root[data-contrast="more"][data-theme="slate"] {
  --gutter-tint: 10%;
  --gutter-ink: 0%;
  --gutter-cur: color-mix(in srgb, var(--hue) 30%, #FFFFFF);
  --surface: #000000;
  --raised: #0D0D0D;
  --sunken: #000000;
  --line: #8A8A8A;
  --line-strong: #FFFFFF;
  --ink: #FFFFFF;
  --muted: #D9D9D9;
  --faint: #B3B3B3;

  --ok: #5BE38F;
  --bad: #FF8F85;
  --warn: #FFC247;

  --t-key: #8CC8FF;
  --t-str: #7EE2A0;
  --t-num: #D4B3FF;
  --t-bool: #FFAE6B;
  --t-null: #C4C4C4;
  --t-cont: #5CE1EC;
  --t-date: #FFD166;
  --t-punct: #C4C4C4;

  --row-hover: #262626;
  --row-active: color-mix(in srgb, var(--hue) 40%, transparent);
  --mark: #FFE55C;
  --mark-ink: #000000;
  --scroll: #8A8A8A;
  --shadow: 0 0 0 2px #FFFFFF;
  --hairline: 1.5px;
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root[data-contrast="more"]:not([data-theme]) {
    --gutter-tint: 10%;
    --gutter-ink: 0%;
    --gutter-cur: color-mix(in srgb, var(--hue) 30%, #FFFFFF);
    --surface: #000000;
    --raised: #0D0D0D;
    --sunken: #000000;
    --line: #8A8A8A;
    --line-strong: #FFFFFF;
    --ink: #FFFFFF;
    --muted: #D9D9D9;
    --faint: #B3B3B3;

    --ok: #5BE38F;
    --bad: #FF8F85;
    --warn: #FFC247;

    --t-key: #8CC8FF;
    --t-str: #7EE2A0;
    --t-num: #D4B3FF;
    --t-bool: #FFAE6B;
    --t-null: #C4C4C4;
    --t-cont: #5CE1EC;
    --t-date: #FFD166;
    --t-punct: #C4C4C4;

    --row-hover: #262626;
    --row-active: color-mix(in srgb, var(--hue) 40%, transparent);
    --mark: #FFE55C;
    --mark-ink: #000000;
    --scroll: #8A8A8A;
    --shadow: 0 0 0 2px #FFFFFF;
    --hairline: 1.5px;
    color-scheme: dark;
  }
}