/* editor-theme — the code-editor color skins (data-editor-theme on :root, editor-theme.js) and the tip chip */

/* JetBrains Mono, self-hosted (SIL OFL): the site's code font */

@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/jetbrains-mono/JetBrainsMono[wght].woff2") format("woff2");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/jetbrains-mono/JetBrainsMono-Italic[wght].woff2") format("woff2");
  font-weight: 100 800;
  font-style: italic;
  font-display: swap;
}

/* the shared tip chip ("Copied", [data-tip] hovers); fixed so the nav's overflow-x can't clip it */

.b-editor-tip {
  position: fixed;
  /* above the nav (10) and its settings dropdown (20) */
  z-index: 30;
  translate: -50% -0.25rem;
  padding: 0.25rem 0.5rem;
  border: 1px solid var(--border-primary);
  border-radius: 0.375rem;
  background-color: var(--bg-primary);
  color: var(--text-secondary);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgb(var(--shadow-rgb) / 0.08);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease, translate 0.4s ease;
}
.b-editor-tip[data-show] {
  opacity: 1;
  translate: -50% 0;
  transition: opacity 0.15s ease, translate 0.15s ease;
}
/* above a button: grows upwards from its top edge */
.b-editor-tip[data-pos="above"] {
  translate: -50% calc(-100% + 0.25rem);
}
.b-editor-tip[data-pos="above"][data-show] {
  translate: -50% -100%;
}
/* shared skin plumbing: 200/50 tints and surfaces derive from the skin's own 700s and ground */
:root[data-editor-theme] {
  --utility-brand-50: color-mix(in srgb, var(--utility-brand-700) 8%, var(--bg-primary));
  --utility-brand-200: color-mix(in srgb, var(--utility-brand-700) 30%, var(--bg-primary));
  --utility-gray-blue-50: color-mix(in srgb, var(--utility-gray-blue-700) 8%, var(--bg-primary));
  --utility-gray-blue-200: color-mix(in srgb, var(--utility-gray-blue-700) 30%, var(--bg-primary));
  --border-primary: color-mix(in srgb, var(--text-primary) 15%, var(--bg-primary));
  --border-secondary: color-mix(in srgb, var(--text-primary) 8%, var(--bg-primary));
  --shadow-rgb: 0 0 0;
}

/* text selection comes from the skin */
:root[data-editor-theme] ::selection {
  background-color: var(--editor-selection);
}

/* the skin's action color becomes the accent */
:root[data-editor-theme] {
  --accent: var(--editor-accent);
}
/* "Like One Dark": Atom One Light + One Dark (MIT) */
:root[data-editor-theme="one-dark"] {
  --bg-primary: light-dark(#FAFAFA, #282C34);
  --text-primary: light-dark(#383A42, #ABB2BF);
  --text-secondary: light-dark(
    color-mix(in srgb, #383A42 70%, #A0A1A7),
    color-mix(in srgb, #ABB2BF 80%, #5C6370));
  --text-tertiary: light-dark(
    color-mix(in srgb, #383A42 55%, #A0A1A7),
    color-mix(in srgb, #ABB2BF 55%, #5C6370));
  --fg-quaternary: light-dark(#A0A1A7, #5C6370);
  --editor-accent: light-dark(#3A6CDA, #61AFEF);
  --editor-selection: light-dark(#E5E5E6, #3E4451);
  --utility-brand-700: light-dark(#A626A4, #CF8CE2);      /* purple +15% */
  --utility-purple-700: light-dark(#A626A4, #CF8CE2);
  --utility-indigo-700: light-dark(#3461C4, #61AFEF);     /* blue -19% */
  --utility-blue-light-700: light-dark(#016C9A, #56B6C2); /* cyan -18% */
  --utility-gray-blue-700: light-dark(#A0A1A7, #5C6370);
  --utility-pink-700: light-dark(#C61242, #E78B92);
  --utility-orange-700: light-dark(#8A5F01, #D19A66);
  --utility-green-700: light-dark(#397238, #98C379);      /* green -29% */
  --utility-yellow-700: light-dark(#895E01, #E5C07B);     /* yellow -29% */
  --utility-red-700: light-dark(#B04238, #D7948E);
}

/* "Like GitHub": GitHub Primer (MIT) */
:root[data-editor-theme="github"] {
  --bg-primary: light-dark(#FFFFFF, #0D1117);
  --text-primary: light-dark(#1F2328, #E6EDF3);
  --text-secondary: light-dark(#656D76, #C9D1D9);
  --text-tertiary: light-dark(#6E7781, #8B949E);
  --fg-quaternary: light-dark(#8C959F, #6E7681);
  --editor-accent: light-dark(#1E853C, #238636);          /* btn primary */
  --editor-selection: light-dark(#DDF4FF, #0C2D6B);
  --utility-brand-700: light-dark(#7C4CD4, #A371F7);      /* done -5% */
  --utility-purple-700: light-dark(#7C4CD4, #A371F7);
  --utility-indigo-700: light-dark(#0965D1, #58A6FF);     /* accent */
  --utility-blue-light-700: light-dark(#0550AE, #79C0FF);
  --utility-gray-blue-700: light-dark(#656D76, #8B949E);
  --utility-pink-700: light-dark(#B43681, #DB61A2);       /* sponsors -6% */
  --utility-orange-700: light-dark(#B14700, #DB6D28);     /* severe -6% */
  --utility-green-700: light-dark(#197934, #3FB950);      /* success -5% */
  --utility-yellow-700: light-dark(#8F6000, #D29922);     /* attention -7% */
  --utility-red-700: light-dark(#C9212D, #F85149);        /* danger -3% */
}

/* "Like Gerry": Material Lighter + Palenight based */
:root[data-editor-theme="gerry"] {
  --bg-primary: light-dark(#FAFAFA, #28303F);
  --text-primary: light-dark(#53747B, #A5B1CE);
  --text-secondary: light-dark(
    /* deepened anchor for AA on tinted fills */
    color-mix(in srgb, #425D63 75%, #8FA8AF),
    color-mix(in srgb, #A5B1CE 75%, #667496));
  --text-tertiary: light-dark(
    color-mix(in srgb, #53747B 50%, #8FA8AF),
    color-mix(in srgb, #A5B1CE 50%, #667496));
  --fg-quaternary: light-dark(#8FA8AF, #667496);
  --editor-accent: light-dark(#476A8C, #82BBFF);
  --editor-selection: light-dark(#E7E7E8, #394359);
  --utility-brand-700: light-dark(#5841EA, #C199ED);
  --utility-purple-700: light-dark(#5841EA, #C199ED);
  --utility-indigo-700: light-dark(#476A8C, #82BBFF);
  --utility-blue-light-700: light-dark(#21726D, #89EDFF);
  --utility-gray-blue-700: light-dark(#5C6C6F, #667496);
  --utility-pink-700: light-dark(#C02737, #F5899D);
  --utility-orange-700: light-dark(#AB382D, #FB8578);
  --utility-green-700: light-dark(#5F6F34, #D0EA8B);
  --utility-yellow-700: light-dark(#8F4E1B, #FFB76B);
  --utility-red-700: light-dark(#C02737, #F5899D);
}

/* "Like Monokai": Monokai Pro based */
:root[data-editor-theme="monokai"] {
  --bg-primary: light-dark(#FAF7F5, #2E2A2E);
  --text-primary: light-dark(#2E2A2E, #FCFCFA);
  --text-secondary: light-dark(
    color-mix(in srgb, #2E2A2E 70%, #6F6C70),
    color-mix(in srgb, #FCFCFA 80%, #727072));
  --text-tertiary: light-dark(#6F6C70, #939293);
  --fg-quaternary: light-dark(#93918F, #727072);
  --editor-accent: light-dark(#B42D3E, #FA6674);
  --editor-selection: light-dark(#F0E9E5, #403E41);
  --utility-brand-700: light-dark(#7452B5, #B9A0EF);
  --utility-purple-700: light-dark(#7452B5, #B9A0EF);
  --utility-indigo-700: light-dark(#1A5E76, #7BCAE5);
  --utility-blue-light-700: light-dark(#3A6E29, #9BD979);
  --utility-gray-blue-700: light-dark(#676468, #939293);
  --utility-pink-700: light-dark(#B42D3E, #FB7B88);
  --utility-orange-700: light-dark(#905920, #F8AF6B);
  --utility-green-700: light-dark(#3A6E29, #9BD979);
  /* light half deepened for AA on tinted fills */
  --utility-yellow-700: light-dark(#6F620C, #FAEB6B);
  --utility-red-700: light-dark(#B42D3E, #FB7B88);
}