/*!
 * Mares Simplified Design System - Forgejo theme
 * https://design.mares.cz/simplified-design-system
 *
 * Theme id: mares   ->  loaded as data-theme="mares"
 *
 * Palette is the Tailwind neutral/orange/red scales, which is what the design
 * system is built on: every value it names (orange-500 #f97316, orange-600
 * #ea580c, orange-50 #fff7ed, red-500 #ef4444, red-50 #fef2f2, neutral-900
 * #171717, neutral-800 #262626, neutral-700 #404040, neutral-300 #d4d4d4,
 * neutral-100 #f5f5f5, neutral-600 #525252, neutral-400 #a3a3a3) matches it
 * exactly. Intermediate steps below are the remaining stops of those same
 * scales, so nothing here is invented off-system.
 *
 * Forgejo loads exactly ONE theme stylesheet, so this file must define the
 * complete variable surface - not just the deltas.
 */

/* ---------------------------------------------------------------------------
 * 1. Fonts - self-hosted (the instance runs OFFLINE_MODE = true, and a
 *    self-hosted forge should not phone home to a font CDN on every page view).
 *    All three families are SIL OFL 1.1. latin-ext is required for Czech.
 * ------------------------------------------------------------------------ */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("../fonts/inter-latin-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: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("../fonts/inter-latin.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-display: swap;
  font-weight: 100 700;
  src: url("../fonts/ibm-plex-sans-latin-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: "IBM Plex Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 100 700;
  src: url("../fonts/ibm-plex-sans-latin.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: "JetBrains Mono";
  font-style: normal;
  font-display: swap;
  font-weight: 100 800;
  src: url("../fonts/jetbrains-mono-latin-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-display: swap;
  font-weight: 100 800;
  src: url("../fonts/jetbrains-mono-latin.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;
}

/* ---------------------------------------------------------------------------
 * 2. Tokens
 * ------------------------------------------------------------------------ */

:root {
  /* --- design system scales ------------------------------------------- */
  --mares-neutral-50:  #fafafa;
  --mares-neutral-100: #f5f5f5;  /* DS: primary text on dark            */
  --mares-neutral-200: #e5e5e5;
  --mares-neutral-300: #d4d4d4;  /* DS: secondary text                  */
  --mares-neutral-400: #a3a3a3;  /* DS: input focus border              */
  --mares-neutral-450: #8c8c8c;  /* interpolated: readable comment grey */
  --mares-neutral-500: #737373;
  --mares-neutral-600: #525252;  /* DS: input border                    */
  --mares-neutral-700: #404040;  /* DS: borders, dividers               */
  --mares-neutral-800: #262626;  /* DS: elevated surfaces, inputs       */
  --mares-neutral-900: #171717;  /* DS: page background, dark surfaces  */
  --mares-neutral-950: #0a0a0a;

  --mares-orange-50:  #fff7ed;   /* DS: secondary buttons, light accent */
  --mares-orange-300: #fdba74;   /* DS: keywords, HTML tags             */
  --mares-orange-400: #fb923c;
  --mares-orange-500: #f97316;   /* DS: PRIMARY - buttons, CTAs, icons  */
  --mares-orange-600: #ea580c;   /* DS: primary button hover            */
  --mares-orange-700: #c2410c;
  --mares-orange-800: #9a3412;
  --mares-orange-900: #7c2d12;
  --mares-orange-950: #431407;

  --mares-red-50:  #fef2f2;      /* DS: danger callout                  */
  --mares-red-300: #fca5a5;
  --mares-red-400: #f87171;
  --mares-red-500: #ef4444;      /* DS: DANGER - errors, destructive    */
  --mares-red-600: #dc2626;
  --mares-red-700: #b91c1c;
  --mares-red-900: #7f1d1d;
  --mares-red-950: #450a0a;

  /* DS code syntax colours */
  --mares-blue-300:    #93c5fd;  /* functions, methods                  */
  --mares-emerald-300: #6ee7b7;  /* strings, text values                */
  --mares-amber-300:   #fcd34d;  /* numbers, constants                  */
  --mares-purple-300:  #d8b4fe;  /* classes, types                      */

  /* supporting stops for the same hues (status states, labels, ANSI) */
  --mares-emerald-500: #10b981;
  --mares-emerald-700: #047857;
  --mares-emerald-950: #022c22;
  --mares-amber-500:   #f59e0b;
  --mares-amber-700:   #b45309;
  --mares-amber-950:   #451a03;
  --mares-blue-500:    #3b82f6;
  --mares-blue-700:    #1d4ed8;
  --mares-blue-950:    #172554;
  --mares-purple-500:  #a855f7;
  --mares-cyan-400:    #22d3ee;
  --mares-cyan-600:    #0891b2;

  /* --- Forgejo neutral ramp, remapped onto the DS neutrals -----------
   * Forgejo's "steel" ramp runs light (100) -> dark (900). Rebinding it
   * here means every built-in rule that references it inherits the DS
   * neutrals for free.                                                  */
  --steel-100: #f5f5f5;
  --steel-150: #e5e5e5;
  --steel-200: #d4d4d4;
  --steel-250: #c4c4c4;
  --steel-300: #a3a3a3;
  --steel-350: #8c8c8c;
  --steel-400: #737373;
  --steel-450: #616161;
  --steel-500: #525252;
  --steel-550: #4a4a4a;
  --steel-600: #404040;
  --steel-650: #333333;
  --steel-700: #262626;
  --steel-750: #1f1f1f;
  --steel-800: #171717;
  --steel-850: #101010;
  --steel-900: #0a0a0a;

  --is-dark-theme: true;

  /* --- typography ------------------------------------------------------ */
  --fonts-display: "IBM Plex Sans", "Inter", -apple-system, "Segoe UI", system-ui, "Noto Sans", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fonts-proportional: "Inter", -apple-system, "Segoe UI", system-ui, "Noto Sans", "Noto Sans Hebrew", Roboto, "Helvetica Neue", Arial;
  --fonts-monospace: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace, var(--fonts-emoji);
  --fonts-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Twemoji Mozilla";

  /* --- geometry: the DS is a 0px-radius system ------------------------- */
  --border-radius: 0;
  --border-radius-medium: 0;
  --border-radius-large: 0;
  /* --border-radius-full is deliberately left circular: it is what makes
     avatars, spinners and toggle switches round. Squaring it makes those
     controls read as broken rather than as "sharp". Set it to 0 if you want
     the system taken absolutely literally. */
  --border-radius-full: 99999px;

  /* --- surfaces -------------------------------------------------------- */
  --color-body: var(--mares-neutral-900);
  --color-nav-bg: var(--mares-neutral-950);
  --color-nav-hover-bg: var(--mares-neutral-800);
  --color-footer: var(--mares-neutral-950);
  --color-header-wrapper: var(--mares-neutral-950);
  --color-header-wrapper-transparent: #0a0a0a00;
  --color-secondary-nav-bg: var(--color-body);

  --color-box-body: #1f1f1f;
  --color-box-body-highlight: #333333;
  --color-box-header: var(--mares-neutral-800);
  --color-card: var(--mares-neutral-800);
  --color-menu: var(--mares-neutral-800);
  --color-button: var(--mares-neutral-800);
  --color-hover: #333333;
  --color-active: var(--mares-neutral-700);
  --color-expand-button: var(--mares-neutral-700);
  --color-editor-line-highlight: var(--mares-neutral-800);
  --color-timeline: var(--mares-neutral-700);
  --fancy-card-bg: var(--mares-neutral-800);
  --fancy-card-border: var(--mares-neutral-700);
  --color-project-board-bg: var(--mares-neutral-800);
  --color-project-board-dark-label: var(--color-text-light-3);
  --color-diff-inactive: var(--mares-neutral-800);

  /* --- text ------------------------------------------------------------ */
  --color-text: var(--mares-neutral-100);
  --color-text-light: var(--mares-neutral-300);
  --color-text-light-1: var(--mares-neutral-300);
  --color-text-light-2: var(--mares-neutral-400);
  --color-text-light-3: var(--mares-neutral-500);
  --color-text-dark: #ffffff;
  --color-text-focus: #ffffff;
  /* neutral-500 lands at 3.19:1 on the neutral-800 input background; neutral-400 gives 6.00:1 */
  --color-placeholder-text: var(--mares-neutral-400);
  --color-caret: var(--color-text);
  --color-selection-bg: var(--mares-orange-500);
  --color-selection-fg: var(--mares-neutral-900);

  /* --- primary (DS orange) --------------------------------------------- */
  --color-primary: var(--mares-orange-500);
  --color-primary-contrast: var(--mares-neutral-900);
  --color-primary-hover: var(--mares-orange-600);
  --color-primary-active: var(--mares-orange-600);
  --color-primary-light-1: var(--mares-orange-600);
  --color-primary-light-2: var(--mares-orange-700);
  --color-primary-light-3: var(--mares-orange-800);
  --color-primary-light-4: var(--mares-orange-800);
  --color-primary-light-5: var(--mares-orange-900);
  --color-primary-light-6: var(--mares-orange-900);
  --color-primary-light-7: var(--mares-orange-950);
  --color-primary-dark-1: var(--mares-orange-400);
  --color-primary-dark-2: var(--mares-orange-300);
  --color-primary-dark-3: #fed7aa;
  --color-primary-dark-4: #fed7aa;
  --color-primary-dark-5: #ffedd5;
  --color-primary-dark-6: #ffedd5;
  --color-primary-dark-7: var(--mares-orange-50);
  --color-primary-alpha-10: #f973161a;
  --color-primary-alpha-20: #f9731633;
  --color-primary-alpha-30: #f973164d;
  --color-primary-alpha-40: #f9731666;
  --color-primary-alpha-50: #f9731680;
  --color-primary-alpha-60: #f9731699;
  --color-primary-alpha-70: #f97316b3;
  --color-primary-alpha-80: #f97316cc;
  --color-primary-alpha-90: #f97316e6;
  --color-accent: var(--color-primary);
  --color-small-accent: var(--mares-orange-900);
  --color-highlight-fg: var(--mares-orange-300);
  --color-highlight-bg: var(--color-primary-alpha-20);

  /* --- secondary (neutral) --------------------------------------------- */
  --color-secondary: var(--mares-neutral-700);
  --color-secondary-bg: var(--mares-neutral-800);
  --color-secondary-hover: var(--color-secondary-light-1);
  --color-secondary-active: var(--color-secondary-light-2);
  --color-secondary-light-1: #333333;
  --color-secondary-light-2: var(--mares-neutral-800);
  --color-secondary-light-3: #1f1f1f;
  --color-secondary-light-4: var(--mares-neutral-900);
  --color-secondary-dark-1: #4a4a4a;
  --color-secondary-dark-2: var(--mares-neutral-600);
  --color-secondary-dark-3: #616161;
  --color-secondary-dark-4: var(--mares-neutral-500);
  --color-secondary-dark-5: #8c8c8c;
  --color-secondary-dark-6: var(--mares-neutral-400);
  --color-secondary-dark-7: #c4c4c4;
  --color-secondary-dark-8: var(--mares-neutral-300);
  --color-secondary-dark-9: var(--mares-neutral-200);
  --color-secondary-dark-10: var(--mares-neutral-100);
  --color-secondary-dark-11: var(--mares-neutral-100);
  --color-secondary-dark-12: var(--mares-neutral-100);
  --color-secondary-dark-13: var(--mares-neutral-100);
  --color-secondary-alpha-10: #4040401a;
  --color-secondary-alpha-20: #40404033;
  --color-secondary-alpha-30: #4040404d;
  --color-secondary-alpha-40: #40404066;
  --color-secondary-alpha-50: #40404080;
  --color-secondary-alpha-60: #40404099;
  --color-secondary-alpha-70: #404040b3;
  --color-secondary-alpha-80: #404040cc;
  --color-secondary-alpha-90: #404040e6;

  /* --- forms (DS: bg neutral-800, border neutral-600, focus neutral-400) */
  --color-input-background: var(--mares-neutral-800);
  --color-input-border: var(--mares-neutral-600);
  --color-input-border-hover: var(--mares-neutral-400);
  --color-input-text: var(--mares-neutral-100);
  --color-input-toggle-background: var(--mares-neutral-700);

  /* --- status ---------------------------------------------------------- */
  --color-error-bg: var(--mares-red-950);
  --color-error-bg-active: var(--mares-red-900);
  --color-error-bg-hover: var(--mares-red-900);
  --color-error-border: var(--mares-red-700);
  --color-error-text: var(--mares-red-50);
  --color-success-bg: var(--mares-emerald-950);
  --color-success-border: var(--mares-emerald-700);
  --color-success-text: var(--mares-emerald-300);
  --color-warning-bg: var(--mares-amber-950);
  --color-warning-border: var(--mares-amber-700);
  --color-warning-text: var(--mares-amber-300);
  --color-info-bg: var(--mares-blue-950);
  --color-info-border: var(--mares-blue-700);
  --color-info-text: var(--mares-blue-300);

  --bg-lightness: .26;
  --bg-chroma: .05;
  --regular-chroma: .19;
  --thin-lightness: .68;
  --thin-lightness-highlight: .75;
  --color-danger-bg: oklch(var(--bg-lightness) var(--bg-chroma) 27deg);
  --color-thin-red: oklch(var(--thin-lightness) var(--regular-chroma) 27deg);
  --color-thin-red-highlight: oklch(var(--thin-lightness-highlight) var(--regular-chroma) 27deg);
  --color-thin-orange: oklch(var(--thin-lightness) var(--regular-chroma) 41deg);
  --color-thin-green: oklch(var(--thin-lightness) var(--regular-chroma) 145deg);
  --color-thin-purple: oklch(var(--thin-lightness) var(--regular-chroma) 298deg);

  /* --- named colours (labels, charts, badges) -------------------------- */
  --color-red: var(--mares-red-500);
  --color-red-light: var(--mares-red-400);
  --color-red-dark-1: var(--mares-red-600);
  --color-red-dark-2: var(--mares-red-700);
  --color-orange: var(--mares-orange-500);
  --color-orange-light: var(--mares-orange-400);
  --color-orange-dark-1: var(--mares-orange-600);
  --color-orange-dark-2: var(--mares-orange-700);
  --color-yellow: var(--mares-amber-500);
  --color-yellow-light: #fbbf24;
  --color-yellow-dark-1: var(--mares-amber-700);
  --color-yellow-dark-2: #92400e;
  --color-olive: #84cc16;
  --color-olive-light: #a3e635;
  --color-olive-dark-1: #65a30d;
  --color-olive-dark-2: #4d7c0f;
  --color-green: var(--mares-emerald-500);
  --color-green-light: #34d399;
  --color-green-dark-1: var(--mares-emerald-700);
  --color-green-dark-2: #065f46;
  --color-teal: #14b8a6;
  --color-teal-light: #2dd4bf;
  --color-teal-dark-1: #0d9488;
  --color-teal-dark-2: #0f766e;
  --color-blue: var(--mares-blue-500);
  --color-blue-light: #60a5fa;
  --color-blue-dark-1: var(--mares-blue-700);
  --color-blue-dark-2: #1e40af;
  --color-violet: #8b5cf6;
  --color-violet-light: #a78bfa;
  --color-violet-dark-1: #7c3aed;
  --color-violet-dark-2: #6d28d9;
  --color-purple: var(--mares-purple-500);
  --color-purple-light: #c084fc;
  --color-purple-dark-1: #9333ea;
  --color-purple-dark-2: #7e22ce;
  --color-pink: #ec4899;
  --color-pink-light: #f472b6;
  --color-pink-dark-1: #db2777;
  --color-pink-dark-2: #be185d;
  --color-brown: #a3856b;
  --color-brown-light: #b89b83;
  --color-brown-dark-1: #8a6f57;
  --color-brown-dark-2: #6f5844;
  --color-gold: #b1983b;
  --color-black: var(--mares-neutral-950);
  --color-black-light: var(--mares-neutral-900);
  --color-black-dark-1: #000000;
  --color-black-dark-2: var(--mares-neutral-950);
  --color-white: #ffffff;
  --color-pure-black: #000000;
  --color-grey: var(--mares-neutral-500);
  --color-grey-light: var(--mares-neutral-300);

  /* --- badges ---------------------------------------------------------- */
  --color-red-badge: var(--mares-red-500);
  --color-red-badge-bg: #ef444422;
  --color-red-badge-hover-bg: #ef444444;
  --color-green-badge: var(--mares-emerald-500);
  --color-green-badge-bg: #10b98122;
  --color-green-badge-hover-bg: #10b98144;
  --color-yellow-badge: var(--mares-amber-500);
  --color-yellow-badge-bg: #f59e0b22;
  --color-yellow-badge-hover-bg: #f59e0b44;
  --color-orange-badge: var(--mares-orange-500);
  --color-orange-badge-bg: #f9731622;
  --color-orange-badge-hover-bg: #f9731644;

  /* --- labels ---------------------------------------------------------- */
  --color-label-text: var(--mares-neutral-100);
  --color-label-bg: var(--mares-neutral-700);
  --color-label-bg-alt: var(--mares-neutral-600);
  --color-label-hover-bg: var(--mares-neutral-600);
  --color-label-active-bg: var(--mares-neutral-500);

  /* --- status indicators ------------------------------------------------ */
  --color-indicator-active: var(--mares-blue-500);
  --color-indicator-active-20: #3b82f633;
  --color-indicator-idle: var(--mares-emerald-500);
  --color-indicator-idle-20: #10b9811a;
  --color-indicator-offline: var(--mares-neutral-500);
  --color-indicator-offline-20: #7373731a;

  /* --- reactions -------------------------------------------------------- */
  --color-reaction-bg: #ffffff12;
  --color-reaction-hover-bg: var(--color-primary-alpha-40);
  --color-reaction-active-bg: var(--color-primary-alpha-30);

  /* --- code surfaces ---------------------------------------------------- */
  --color-code-bg: var(--mares-neutral-950);
  --color-markup-code-block: var(--mares-neutral-950);
  --color-markup-code-inline: var(--mares-neutral-800);
  --color-markup-table-row: #ffffff06;

  /* --- diff ------------------------------------------------------------- */
  --color-diff-added-row-bg: #10281c;
  --color-diff-added-row-border: #1c6b45;
  --color-diff-added-word-bg: #1c6b45;
  --color-diff-removed-row-bg: #2e1414;
  --color-diff-removed-row-border: #8b2020;
  --color-diff-removed-word-bg: #8b2020;
  --color-diff-moved-row-bg: #2e2410;
  --color-diff-moved-row-border: #8a6a1d;

  /* --- console / CI logs ------------------------------------------------ */
  --color-console-bg: var(--mares-neutral-950);
  --color-console-fg: var(--mares-neutral-100);
  --color-console-fg-subtle: var(--mares-neutral-400);
  --color-console-border: var(--mares-neutral-700);
  --color-console-hover-bg: #ffffff16;
  --color-console-active-bg: #333333;
  --color-console-menu-bg: var(--mares-neutral-800);
  --color-console-menu-border: var(--mares-neutral-600);

  --color-ansi-black: var(--mares-neutral-900);
  --color-ansi-red: var(--mares-red-500);
  --color-ansi-green: var(--mares-emerald-500);
  --color-ansi-yellow: var(--mares-amber-500);
  --color-ansi-blue: var(--mares-blue-500);
  --color-ansi-magenta: var(--mares-purple-500);
  --color-ansi-cyan: var(--mares-cyan-600);
  --color-ansi-white: var(--color-console-fg-subtle);
  --color-ansi-bright-black: var(--mares-neutral-600);
  --color-ansi-bright-red: var(--mares-red-400);
  --color-ansi-bright-green: var(--mares-emerald-300);
  --color-ansi-bright-yellow: var(--mares-amber-300);
  --color-ansi-bright-blue: var(--mares-blue-300);
  --color-ansi-bright-magenta: var(--mares-purple-300);
  --color-ansi-bright-cyan: var(--mares-cyan-400);
  --color-ansi-bright-white: var(--color-console-fg);

  /* --- misc ------------------------------------------------------------- */
  --color-shadow: #00000080;
  --color-overlay-backdrop: #0a0a0ac0;
  --color-light: #00000028;
  --color-light-border: #ffffff1f;
  --color-light-mimic-enabled: rgba(0, 0, 0, calc(40 / 255 * 222 / 255 / var(--opacity-disabled)));
  --color-tooltip-bg: #000000f0;
  --color-tooltip-text: var(--mares-neutral-100);
  --checkerboard-color-1: var(--mares-neutral-700);
  --checkerboard-color-2: var(--mares-neutral-800);
  --dropdown-box-shadow: 0 6px 18px var(--color-shadow);
}

/* ---------------------------------------------------------------------------
 * 3. Typography rules
 *
 * The DS type scale (H1 48px / H2 36px / H3 28px ...) is a document scale. It
 * is applied to rendered markup - READMEs, issue bodies, wiki pages - where
 * headings really are document headings. It is deliberately NOT forced onto
 * Forgejo's UI chrome, where h1-h3 are panel titles and a 48px h1 would wreck
 * the layout. UI chrome gets the DS *fonts*, at Forgejo's own sizes.
 * ------------------------------------------------------------------------ */

h1, h2, h3,
.ui.header,
.repo-title,
.markup h1, .markup h2, .markup h3 {
  font-family: var(--fonts-display);
}

h4, h5, h6,
.markup h4, .markup h5, .markup h6 {
  font-family: var(--fonts-proportional);
}

/* DS: buttons are set in JetBrains Mono */
.ui.button,
.ui.buttons .button,
button.ui.button,
.ui.labeled.button > .button {
  font-family: var(--fonts-monospace);
  font-weight: 500;
  letter-spacing: -0.01em;
}

/* DS document scale, scoped to rendered content */
.markup h1 { font-size: 3rem;     font-weight: 700; line-height: 1.1; }
.markup h2 { font-size: 2.25rem;  font-weight: 600; line-height: 1.2; }
.markup h3 { font-size: 1.75rem;  font-weight: 600; line-height: 1.3; }
.markup h4 { font-size: 1.25rem;  font-weight: 500; line-height: 1.4; }
.markup h5 { font-size: 1.125rem; font-weight: 600; line-height: 1.5; }
.markup h6 { font-size: 1rem;     font-weight: 600; line-height: 1.5; }
.markup p  { line-height: 1.6; }

/* DS responsive steps: tablet 90%, mobile 80% (floor 24px) for H1-H3 */
@media (max-width: 1024px) {
  .markup h1 { font-size: 2.7rem; }
  .markup h2 { font-size: 2.025rem; }
  .markup h3 { font-size: 1.575rem; }
}
@media (max-width: 767px) {
  .markup h1 { font-size: max(2.4rem, 24px); }
  .markup h2 { font-size: max(1.8rem, 24px); }
  .markup h3 { font-size: max(1.5rem, 24px); }
}

/* DS prose measure */
.markup { --prose-measure: 65ch; }

/* ---------------------------------------------------------------------------
 * 4. Syntax highlighting (chroma) - DS code palette
 *      blue-300    functions, methods
 *      emerald-300 strings, text values
 *      orange-300  keywords, HTML tags
 *      amber-300   numbers, constants
 *      purple-300  classes, types
 * ------------------------------------------------------------------------ */

.chroma { color: var(--mares-neutral-100); background-color: transparent; }

/* comments */
/* neutral-500 is only 4.18:1 on the near-black code surface; neutral-450 gives 5.89:1
   while staying clearly subordinate to the neutral-100 body text. */
.chroma .c, .chroma .c1, .chroma .ch, .chroma .cm, .chroma .cs,
.chroma .cp, .chroma .cpf { color: var(--mares-neutral-450); font-style: italic; }

/* keywords + HTML tags */
.chroma .k, .chroma .kd, .chroma .kn, .chroma .kp, .chroma .kr,
.chroma .nt, .chroma .ow { color: var(--mares-orange-300); }

/* numbers + constants */
.chroma .m, .chroma .mb, .chroma .mf, .chroma .mh, .chroma .mi,
.chroma .mo, .chroma .il, .chroma .no, .chroma .kc { color: var(--mares-amber-300); }

/* strings */
.chroma .s, .chroma .s1, .chroma .s2, .chroma .sa, .chroma .sb,
.chroma .sc, .chroma .sd, .chroma .sh, .chroma .si, .chroma .sx,
.chroma .dl { color: var(--mares-emerald-300); }
.chroma .se, .chroma .sr, .chroma .ss { color: #34d399; }

/* classes + types */
.chroma .nc, .chroma .kt, .chroma .nn, .chroma .ne,
.chroma .nd { color: var(--mares-purple-300); }

/* functions + methods */
.chroma .nf, .chroma .bp, .chroma .nb { color: var(--mares-blue-300); }

/* plain names, punctuation, operators */
.chroma .n, .chroma .nx, .chroma .nl, .chroma .ni, .chroma .py { color: var(--mares-neutral-100); }
.chroma .na { color: var(--mares-blue-300); }
.chroma .nv, .chroma .vc, .chroma .vg, .chroma .vi { color: var(--mares-neutral-200); }
.chroma .o, .chroma .p { color: var(--mares-neutral-300); }
.chroma .w { color: transparent; }

/* generic / diff output */
.chroma .gd { color: var(--mares-neutral-100); background-color: #2e1414; }
.chroma .gi { color: var(--mares-neutral-100); background-color: #10281c; }
.chroma .ge { font-style: italic; }
.chroma .gs { font-weight: 600; }
.chroma .gh { color: var(--mares-orange-500); font-weight: 600; }
.chroma .gu { color: var(--mares-purple-300); font-weight: 600; }
.chroma .gp { color: var(--mares-neutral-400); }
.chroma .go { color: var(--mares-neutral-300); }
.chroma .gr, .chroma .gt { color: var(--mares-red-400); }

/* ---------------------------------------------------------------------------
 * 5. Sharp-system trim
 * ------------------------------------------------------------------------ */

/* The DS leans on borders rather than rounding to separate surfaces. */
.ui.segment,
.ui.attached.segment,
.ui.card,
.ui.menu,
.repository .ui.segment {
  border-color: var(--mares-neutral-700);
}

/* Primary buttons: DS orange with dark text, orange-600 on hover. */
.ui.primary.button,
.ui.primary.buttons .button {
  background: var(--mares-orange-500);
  color: var(--mares-neutral-900);
}
.ui.primary.button:hover,
.ui.primary.buttons .button:hover {
  background: var(--mares-orange-600);
  color: var(--mares-neutral-900);
}