/*
 * Python Parts design tokens: STEVE Studio's (web/src/styles/tokens.css at 3b2ff69e), graphite surfaces and the mint
 * brand accent, with the site's own type sizes and layout added. Dark is the default as in Studio; light comes from
 * data-theme="light" (the theme menu, or the system's when the choice is "system": site.js sets it before paint) and,
 * without JavaScript, from prefers-color-scheme.
 */
:root {
  color-scheme: dark;

  /* Surfaces, deepest to most raised. */
  --bg-0: #0c0e10;
  --bg-1: #121518;
  --bg-2: #171b1f;
  --bg-3: #1d2226;
  --bg-4: #242a2f;
  --bg-5: #2c3339;
  --bg-overlay: rgb(20 24 27 / 0.86);
  --scrim: rgb(5 7 8 / 0.62);

  --line-1: rgb(255 255 255 / 0.055);
  --line-2: rgb(255 255 255 / 0.085);
  --line-3: rgb(255 255 255 / 0.13);
  --line-4: rgb(255 255 255 / 0.2);

  --text-1: #eef1f2;
  --text-2: #b4bcc0;
  --text-3: #7d878d;
  --text-4: #555e64;

  /* Brand. */
  --mint: #8fdcc0;
  --mint-strong: #5fcfa5;
  --amber: #e8bd84;
  --iris: #a99bff;
  --azure: #5cb8ff;
  --coral: #ff8a78;
  --lime: #b7e27a;

  /* Workspace accent, swapped by [data-workspace]. */
  --ws: var(--mint);
  --ws-strong: var(--mint-strong);
  --ws-ink: #07251b;
  --ws-soft: rgb(143 220 192 / 0.12);
  --ws-softer: rgb(143 220 192 / 0.07);
  --ws-glow: rgb(143 220 192 / 0.35);

  /* Semantic. */
  --sel: #53b6ff;
  --sel-soft: rgb(83 182 255 / 0.16);
  --sel-line: rgb(83 182 255 / 0.55);
  --success: #7bd89d;
  --warning: #eec077;
  --danger: #ff8474;
  --danger-soft: rgb(255 132 116 / 0.12);
  --warning-soft: rgb(238 192 119 / 0.12);
  --info: var(--azure);

  --axis-x: #ff6b6b;
  --axis-y: #7ed47c;
  --axis-z: #5aa9ff;

  /* Viewport backdrop. */
  --vp-top: #2a3136;
  --vp-bottom: #0f1214;

  /* Code. */
  --code-bg: #0d1012;
  --code-gutter: #111517;
  --code-line: rgb(255 255 255 / 0.035);
  --tok-kw: #c7a0ff;
  --tok-str: #b8dd9a;
  --tok-num: #f7ab7c;
  --tok-fn: #86b8ff;
  --tok-cm: #6b777d;
  --tok-bi: #7fd6e8;
  --tok-dec: #f3cf7d;
  --tok-prop: #d7dde0;
  --tok-op: #9aa6ad;

  /* Type. */
  --font-sans: 'Inter Variable', 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono Variable', 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --fs-2xs: 9.5px;
  --fs-xs: 10.5px;
  --fs-sm: 11.5px;
  --fs-md: 12.5px;
  --fs-lg: 14px;
  --fs-xl: 17px;
  --fs-2xl: 22px;
  --fs-3xl: 30px;

  /* Shape. */
  --r-xs: 4px;
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 8px;
  --r-xl: 10px;
  --r-pill: 999px;

  /* Elevation. */
  --shadow-1: 0 1px 2px rgb(0 0 0 / 0.35);
  --shadow-2: 0 4px 14px rgb(0 0 0 / 0.35), 0 1px 3px rgb(0 0 0 / 0.3);
  --shadow-3: 0 12px 40px rgb(0 0 0 / 0.45), 0 2px 8px rgb(0 0 0 / 0.3);
  --shadow-4: 0 28px 90px rgb(0 0 0 / 0.55), 0 6px 20px rgb(0 0 0 / 0.35);
  --inset-hi: inset 0 1px 0 rgb(255 255 255 / 0.045);

  /* Motion. */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --t-fast: 90ms;
  --t-base: 160ms;
  --t-slow: 260ms;
  --t-slower: 420ms;

  /* Python Parts (a website, not a dense app): its own type sizes and layout over Studio's scale. */
  --accent: var(--mint);
  --accent-strong: var(--mint-strong);
  --accent-ink: #07251b;
  --accent-soft: rgb(143 220 192 / 0.12);
  --accent-softer: rgb(143 220 192 / 0.07);
  --accent-glow: rgb(143 220 192 / 0.35);
  --link: var(--mint);
  --page: var(--bg-1);
  --surface: var(--bg-2);
  --surface-2: var(--bg-3);
  --field: var(--bg-1);
  --steve-tone: var(--mint);
  --cadquery-tone: var(--iris);
  --build123d-tone: var(--azure);
  --openscad-tone: var(--amber);
  --fs-body: 14px;
  --fs-small: 13px;
  --fs-tiny: 12px;
  --fs-h3: 16px;
  --fs-h2: 20px;
  --fs-h1: 28px;
  --fs-hero: clamp(34px, 5.2vw, 56px);
  --wrap: 1240px;
  --gutter: 24px;
  --topbar-h: 60px;
}

:root[data-theme='light'] {
  color-scheme: light;
  --bg-0: #e9ecee;
  --bg-1: #f4f6f7;
  --bg-2: #fbfcfc;
  --bg-3: #eef1f3;
  --bg-4: #e4e8eb;
  --bg-5: #d9dee2;
  --bg-overlay: rgb(250 251 252 / 0.9);
  --scrim: rgb(30 36 40 / 0.32);
  --line-1: rgb(12 22 28 / 0.07);
  --line-2: rgb(12 22 28 / 0.1);
  --line-3: rgb(12 22 28 / 0.15);
  --line-4: rgb(12 22 28 / 0.24);
  --text-1: #141a1e;
  --text-2: #465157;
  --text-3: #6f7b82;
  --text-4: #a2acb2;
  --mint: #1f9a73;
  --mint-strong: #14805e;
  --amber: #b87318;
  --iris: #6a55e8;
  --ws-ink: #ffffff;
  --ws-soft: rgb(31 154 115 / 0.12);
  --ws-softer: rgb(31 154 115 / 0.06);
  --ws-glow: rgb(31 154 115 / 0.3);
  --sel: #1682e0;
  --sel-soft: rgb(22 130 224 / 0.12);
  --sel-line: rgb(22 130 224 / 0.55);
  --success: #1f9d58;
  --warning: #b87318;
  --danger: #d8443a;
  --danger-soft: rgb(216 68 58 / 0.1);
  --warning-soft: rgb(184 115 24 / 0.1);
  --vp-top: #f6f8f9;
  --vp-bottom: #c9d1d6;
  --code-bg: #fbfcfc;
  --code-gutter: #f3f5f6;
  --code-line: rgb(12 22 28 / 0.035);
  --tok-kw: #7a3fd0;
  --tok-str: #3d7d1d;
  --tok-num: #b85418;
  --tok-fn: #1f5fbf;
  --tok-cm: #8a969c;
  --tok-bi: #0b7c8f;
  --tok-dec: #9a6b00;
  --tok-prop: #26313a;
  --tok-op: #5b666c;
  --shadow-1: 0 1px 2px rgb(15 25 30 / 0.08);
  --shadow-2: 0 4px 14px rgb(15 25 30 / 0.1), 0 1px 3px rgb(15 25 30 / 0.08);
  --shadow-3: 0 12px 40px rgb(15 25 30 / 0.14), 0 2px 8px rgb(15 25 30 / 0.08);
  --shadow-4: 0 28px 90px rgb(15 25 30 / 0.2), 0 6px 20px rgb(15 25 30 / 0.1);
  --inset-hi: inset 0 1px 0 rgb(255 255 255 / 0.7);

  --accent: #14805e;
  --accent-strong: #0f6b4e;
  --accent-ink: #ffffff;
  --accent-soft: rgb(31 154 115 / 0.12);
  --accent-softer: rgb(31 154 115 / 0.06);
  --accent-glow: rgb(31 154 115 / 0.28);
  --link: #12785a;
  --page: #f4f6f7;
  --surface: #ffffff;
  --surface-2: var(--bg-3);
  --field: #ffffff;
  --text-3: #66727a;
  --steve-tone: #12785a;
  --cadquery-tone: #5a46d6;
  --build123d-tone: #1365b0;
  --openscad-tone: #925a10;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
  color-scheme: light;
  --bg-0: #e9ecee;
  --bg-1: #f4f6f7;
  --bg-2: #fbfcfc;
  --bg-3: #eef1f3;
  --bg-4: #e4e8eb;
  --bg-5: #d9dee2;
  --bg-overlay: rgb(250 251 252 / 0.9);
  --scrim: rgb(30 36 40 / 0.32);
  --line-1: rgb(12 22 28 / 0.07);
  --line-2: rgb(12 22 28 / 0.1);
  --line-3: rgb(12 22 28 / 0.15);
  --line-4: rgb(12 22 28 / 0.24);
  --text-1: #141a1e;
  --text-2: #465157;
  --text-3: #6f7b82;
  --text-4: #a2acb2;
  --mint: #1f9a73;
  --mint-strong: #14805e;
  --amber: #b87318;
  --iris: #6a55e8;
  --ws-ink: #ffffff;
  --ws-soft: rgb(31 154 115 / 0.12);
  --ws-softer: rgb(31 154 115 / 0.06);
  --ws-glow: rgb(31 154 115 / 0.3);
  --sel: #1682e0;
  --sel-soft: rgb(22 130 224 / 0.12);
  --sel-line: rgb(22 130 224 / 0.55);
  --success: #1f9d58;
  --warning: #b87318;
  --danger: #d8443a;
  --danger-soft: rgb(216 68 58 / 0.1);
  --warning-soft: rgb(184 115 24 / 0.1);
  --vp-top: #f6f8f9;
  --vp-bottom: #c9d1d6;
  --code-bg: #fbfcfc;
  --code-gutter: #f3f5f6;
  --code-line: rgb(12 22 28 / 0.035);
  --tok-kw: #7a3fd0;
  --tok-str: #3d7d1d;
  --tok-num: #b85418;
  --tok-fn: #1f5fbf;
  --tok-cm: #8a969c;
  --tok-bi: #0b7c8f;
  --tok-dec: #9a6b00;
  --tok-prop: #26313a;
  --tok-op: #5b666c;
  --shadow-1: 0 1px 2px rgb(15 25 30 / 0.08);
  --shadow-2: 0 4px 14px rgb(15 25 30 / 0.1), 0 1px 3px rgb(15 25 30 / 0.08);
  --shadow-3: 0 12px 40px rgb(15 25 30 / 0.14), 0 2px 8px rgb(15 25 30 / 0.08);
  --shadow-4: 0 28px 90px rgb(15 25 30 / 0.2), 0 6px 20px rgb(15 25 30 / 0.1);
  --inset-hi: inset 0 1px 0 rgb(255 255 255 / 0.7);

  --accent: #14805e;
  --accent-strong: #0f6b4e;
  --accent-ink: #ffffff;
  --accent-soft: rgb(31 154 115 / 0.12);
  --accent-softer: rgb(31 154 115 / 0.06);
  --accent-glow: rgb(31 154 115 / 0.28);
  --link: #12785a;
  --page: #f4f6f7;
  --surface: #ffffff;
  --surface-2: var(--bg-3);
  --field: #ffffff;
  --text-3: #66727a;
  --steve-tone: #12785a;
  --cadquery-tone: #5a46d6;
  --build123d-tone: #1365b0;
  --openscad-tone: #925a10;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --t-fast: 0ms;
    --t-base: 0ms;
    --t-slow: 0ms;
    --t-slower: 0ms;
  }
}