/* hnet-dark: a Forgejo 15 theme matching hnet.sh.
 *
 * Built on forgejo-dark: everything below is an override on top of it. Colours and fonts only: shapes
 * stay exactly as Forgejo draws them. Custom properties first; the few selector overrides at the end
 * are only for what no variable reaches.
 *
 * Install: custom/public/assets/css/theme-hnet-dark.css, then in app.ini
 *   [ui]
 *   THEMES = hnet-dark, forgejo-auto, forgejo-light, forgejo-dark
 *   DEFAULT_THEME = hnet-dark
 *
 * Custom themes are unsupported by Forgejo: after a major update, diff the new theme-forgejo-dark.css
 * against the old one and check the variables overridden here still exist.
 *
 * Palette (from hnet.sh):
 *   #000000 page          #151515 raised surfaces    #cccccc text      #eeeeee headings
 *   #777777 frames        #5e5e5e lines (3:1 on #000) #28a1c5 accent    #df8a13 inline code, warnings
 * Syntax colours come from hnet-syntax.json (VS Code theme used by Zola on hnet.sh). */

@import "./theme-forgejo-dark.css";

:root {
    /* ---------------------------------------------------------------------------------------------
     * Typography: the site's two stacks. Forgejo builds --fonts-regular from --fonts-proportional.
     * Emoji fallback is kept on the monospace stack, like Forgejo's own. */
    --fonts-proportional: system-ui, -apple-system, "Segoe UI", "Noto Sans", "DejaVu Sans", sans-serif;
    --fonts-monospace: ui-monospace, "DejaVu Sans Mono", "Liberation Mono", Menlo, Consolas, monospace, var(--fonts-emoji);

    /* ---------------------------------------------------------------------------------------------
     * Neutral steel scale (unchanged from the previous hnet-dark): same luminance as Forgejo's
     * blue-greys, without the tint. Still referenced by the secondary-* family and a few icons. */
    --steel-900: #151515;
    --steel-850: #191919;
    --steel-800: #1d1d1d;
    --steel-750: #252525;
    --steel-700: #2c2c2c;
    --steel-650: #353535;
    --steel-600: #424242;
    --steel-550: #505050;
    --steel-500: #5e5e5e;
    --steel-450: #6c6c6c;
    --steel-400: #7b7b7b;
    --steel-350: #8a8a8a;
    --steel-300: #9a9a9a;
    --steel-250: #ababab;
    --steel-200: #bcbcbc;
    --steel-150: #cdcdcd;
    --steel-100: #dedede;
    --color-secondary-alpha-10: #35353519;
    --color-secondary-alpha-20: #35353533;
    --color-secondary-alpha-30: #3535354b;
    --color-secondary-alpha-40: #35353566;
    --color-secondary-alpha-50: #35353580;
    --color-secondary-alpha-60: #35353599;
    --color-secondary-alpha-70: #353535b3;
    --color-secondary-alpha-80: #353535cc;
    --color-secondary-alpha-90: #353535e1;

    /* ---------------------------------------------------------------------------------------------
     * Accent: the site's link blue #28a1c5. One hue (OKLCH 223deg), lightness stepped to fixed
     * luminance targets. In Forgejo's dark themes "dark-N" means lighter and "light-N" darker.
     * Text on primary is black (7.0:1); light-1/light-2 (hover/active) keep black text >= 4.5:1;
     * light-3 and darker carry white text >= 5:1. Alphas are of the base colour. */
    --color-primary: #28a1c5;
    --color-primary-contrast: #000000;
    --color-primary-dark-1: #38abd0;
    --color-primary-dark-2: #43b4d9;
    --color-primary-dark-3: #50c0e4;
    --color-primary-dark-4: #5eccf2;
    --color-primary-dark-5: #6cd9ff;
    --color-primary-dark-6: #9ee5ff;
    --color-primary-dark-7: #c4eeff;
    --color-primary-light-1: #0a92b6;
    --color-primary-light-2: #0285a5;
    --color-primary-light-3: #097795;
    --color-primary-light-4: #036782;
    --color-primary-light-5: #03576e;
    --color-primary-light-6: #014658;
    --color-primary-light-7: #023644;
    --color-primary-alpha-10: #28a1c519;
    --color-primary-alpha-20: #28a1c533;
    --color-primary-alpha-30: #28a1c54b;
    --color-primary-alpha-40: #28a1c566;
    --color-primary-alpha-50: #28a1c580;
    --color-primary-alpha-60: #28a1c599;
    --color-primary-alpha-70: #28a1c5b3;
    --color-primary-alpha-80: #28a1c5cc;
    --color-primary-alpha-90: #28a1c5e1;

    /* ---------------------------------------------------------------------------------------------
     * Surfaces: black page, #151515 for anything raised (box headers, menus, code), flat hover steps. */
    --color-body: #000000;
    --color-box-header: #151515;
    --color-box-body: #000000;
    --color-box-body-highlight: #1a1a1a;
    --color-footer: #000000;
    --color-header-wrapper: #000000;
    --color-header-wrapper-transparent: #00000000;
    --color-nav-bg: #000000;
    --color-nav-hover-bg: #1f1f1f;
    --color-secondary-nav-bg: #000000;
    --color-secondary-bg: #151515;
    --color-menu: #151515;
    --color-card: #000000;
    --fancy-card-bg: #151515;
    --fancy-card-border: #5e5e5e;
    --color-hover: #262626;
    --color-active: #303030;
    --color-button: #151515;
    --color-expand-button: #262626;
    --color-project-board-bg: #151515;
    --color-reaction-bg: #151515;
    --color-tooltip-bg: #151515;
    --color-tooltip-text: #eeeeee;

    /* Lines: one grey for every structural line (boxes, tables, dividers, timeline), 3.2:1 on black,
     * the solid-line equivalent of the site's #777 dashes. Inputs get #777 for a clear 3:1+ boundary
     * on both #000 and #151515. */
    --color-secondary: #5e5e5e;
    --color-light-border: #5e5e5e;
    --color-timeline: #5e5e5e;
    --color-input-border: #777777;
    --color-input-border-hover: #9a9a9a;
    --color-input-text: #cccccc;
    --color-input-background: #000000;
    --color-input-toggle-background: #151515;

    /* No shadows: transparent wherever Forgejo uses its shadow colour. Fomantic's own hard-coded
     * shadows are black at low alpha, which is invisible on these black surfaces. */
    --color-shadow: #00000000;

    /* ---------------------------------------------------------------------------------------------
     * Text: the site's greys. -light-3 is the dim "secondary" grey, lifted from #777 to #8f8f8f so it
     * keeps 4.5:1 on #151515 headers and #262626 hover rows (the site only puts #777 on black). */
    --color-text: #cccccc;
    --color-text-dark: #eeeeee;
    --color-text-focus: #eeeeee;
    --color-text-light: #b8b8b8;
    --color-text-light-1: #b8b8b8;
    --color-text-light-2: #9a9a9a;
    --color-text-light-3: #8f8f8f;
    --color-selection-bg: #222c38;
    --color-selection-fg: #eeeeee;
    --color-highlight-bg: #152a31;
    --color-highlight-fg: #eeeeee;

    /* Labels (Forgejo's grey ones; user-chosen label colours are inline styles and stay untouched). */
    --color-label-text: #eeeeee;
    --color-label-bg: #262626;
    --color-label-hover-bg: #303030;
    --color-label-active-bg: #3a3a3a;
    --color-label-bg-alt: #303030;

    /* ---------------------------------------------------------------------------------------------
     * Rendered markdown and code. */
    --color-markup-code-block: #151515;
    --color-markup-code-inline: #151515;
    --color-markup-table-row: #00000000;
    --color-code-bg: #151515;
    --color-editor-line-highlight: #212121;

    /* ---------------------------------------------------------------------------------------------
     * Named colours: buttons, state labels (open/closed/merged), icons. Each base sits at luminance
     * 0.18, so white text on it is >= 4.5:1 and the colour itself is >= 4.5:1 on black. -light is
     * for text and icons on dark surfaces (>= 6:1 on #151515); -dark-1/-dark-2 are hover/active.
     * Hues lean on the site and syntax palette; green is pushed towards teal so open (green) and
     * closed (red) differ for red-green colour blindness too, on top of their different icons. */
    --color-red: #c0544f;
    --color-orange: #b0620a;
    --color-yellow: #917209;
    --color-olive: #727b08;
    --color-green: #02866b;
    --color-teal: #028384;
    --color-blue: #037db7;
    --color-violet: #7968c5;
    --color-purple: #9f5cae;
    --color-pink: #b8537f;
    --color-brown: #936e55;
    --color-grey: #767676;
    --color-black: #151515;
    --color-red-light: #e97871;
    --color-orange-light: #da8534;
    --color-yellow-light: #bd9400;
    --color-olive-light: #95a126;
    --color-green-light: #0dad8c;
    --color-teal-light: #0aabab;
    --color-blue-light: #2ea2e5;
    --color-violet-light: #9d8ced;
    --color-purple-light: #c580d4;
    --color-pink-light: #e177a4;
    --color-brown-light: #b99278;
    --color-grey-light: #9a9a9a;
    --color-black-light: #262626;
    --color-red-dark-1: #b04542;
    --color-orange-dark-1: #9c570a;
    --color-yellow-dark-1: #826500;
    --color-olive-dark-1: #666e00;
    --color-green-dark-1: #04775e;
    --color-teal-dark-1: #037575;
    --color-blue-dark-1: #046fa3;
    --color-violet-dark-1: #6d5bb7;
    --color-purple-dark-1: #904f9f;
    --color-pink-dark-1: #a94572;
    --color-brown-dark-1: #856048;
    --color-black-dark-1: #0e0e0e;
    --color-red-dark-2: #a33a37;
    --color-orange-dark-2: #8d4d03;
    --color-yellow-dark-2: #735a02;
    --color-olive-dark-2: #5b6303;
    --color-green-dark-2: #076a54;
    --color-teal-dark-2: #076869;
    --color-blue-dark-2: #076391;
    --color-violet-dark-2: #624fa9;
    --color-purple-dark-2: #844393;
    --color-pink-dark-2: #9c3967;
    --color-brown-dark-2: #79553d;
    --color-black-dark-2: #151515;
    --color-gold: #e5c46f;

    /* Badges: -light text on a faint tint of itself. */
    --color-red-badge: #e97871;
    --color-red-badge-bg: #e9787122;
    --color-red-badge-hover-bg: #e9787144;
    --color-green-badge: #0dad8c;
    --color-green-badge-bg: #0dad8c22;
    --color-green-badge-hover-bg: #0dad8c44;
    --color-yellow-badge: #bd9400;
    --color-yellow-badge-bg: #bd940022;
    --color-yellow-badge-hover-bg: #bd940044;
    --color-orange-badge: #da8534;
    --color-orange-badge-bg: #da853422;
    --color-orange-badge-hover-bg: #da853444;

    /* Thin colours: diff stats (+12 -3) and similar small text, same as syntax inserted/deleted. */
    --color-thin-green: #62bcb2;
    --color-thin-red: #e3736c;
    --color-thin-purple: #c580d4;
    --color-thin-orange: #df8a13;
    --color-thin-red-highlight: #f09a94;
    --color-danger-bg: #341b1a;

    /* ---------------------------------------------------------------------------------------------
     * Messages: tinted black background, border in the meaning colour, light tinted text.
     * Info and warning borders are the site's own notice colours, #28a1c5 and #df8a13. */
    --color-error-border: #e3736c;
    --color-error-bg: #341b1a;
    --color-error-bg-active: #552d2a;
    --color-error-bg-hover: #552d2a;
    --color-error-text: #fcc0bb;
    --color-success-border: #1fa788;
    --color-success-bg: #08271f;
    --color-success-text: #9ddcc7;
    --color-warning-border: #df8a13;
    --color-warning-bg: #301e0c;
    --color-warning-text: #f0c7a0;
    --color-info-border: #28a1c5;
    --color-info-bg: #06252f;
    --color-info-text: #9ad7ee;

    /* ---------------------------------------------------------------------------------------------
     * Diffs: dark tints that leave the syntax colours readable (every token >= 4.5:1 on row and word
     * backgrounds, comments >= 3:1). Added is blue-green, removed rust: they differ along the
     * blue-yellow axis, which red-green colour blindness keeps; the +/- marker column adds a cue. */
    --color-diff-added-row-bg: #062427;
    --color-diff-removed-row-bg: #2f1b15;
    --color-diff-moved-row-bg: #261e0a;
    --color-diff-added-word-bg: #013136;
    --color-diff-removed-word-bg: #482016;
    --color-diff-added-row-border: #0e4d53;
    --color-diff-removed-row-border: #67392d;
    --color-diff-moved-row-border: #554411;
    --color-diff-inactive: #1a1a1a;

    /* ---------------------------------------------------------------------------------------------
     * Actions log console: Konsole. Background is Konsole's #0e0e0e; normal ANSI colours are the
     * Konsole Normal hues lifted to >= 4.5:1, bright ones are Konsole Intense. */
    --color-console-fg: #cccccc;
    --color-console-fg-subtle: #8f8f8f;
    --color-console-bg: #0e0e0e;
    --color-console-border: #5e5e5e;
    --color-console-hover-bg: #1f1f1f;
    --color-console-active-bg: #303030;
    --color-console-menu-bg: #151515;
    --color-console-menu-border: #5e5e5e;
    --color-ansi-black: #808080;
    --color-ansi-red: #ee3b2d;
    --color-ansi-green: #4e9a05;
    --color-ansi-yellow: #c4a000;
    --color-ansi-blue: #5082c4;
    --color-ansi-magenta: #98739f;
    --color-ansi-cyan: #05989a;
    --color-ansi-bright-black: #9a9a9a;
    --color-ansi-bright-red: #ef6a5f;
    --color-ansi-bright-green: #8ae234;
    --color-ansi-bright-yellow: #fce94e;
    --color-ansi-bright-blue: #719ecf;
    --color-ansi-bright-magenta: #ad7ea7;
    --color-ansi-bright-cyan: #34e2e2;

    /* Online indicators. */
    --color-indicator-active: #28a1c5;
    --color-indicator-active-20: #28a1c533;
    --color-indicator-idle: #0dad8c;
    --color-indicator-idle-20: #0dad8c1a;
}

/* =================================================================================================
 * Selector overrides. Each one exists because no custom property reaches it; see the notes file.
 * ================================================================================================= */

/* S1. Monospace in the chrome: top bar, all horizontal/vertical menus and tabs, buttons, labels,
 * breadcrumbs and file path, box headers, headings (including README headings). */
#navbar,
.ui.menu,
.ui.button,
.ui.label,
.ui.breadcrumb,
.repo-path,
.ui.header,
h1, h2, h3, h4, h5, h6 {
    font-family: var(--fonts-monospace);
}

/* S4. Rendered markdown like hnet.sh: bright monospace headings (font from S1), inline code in the
 * site's orange, tables in monospace with a #151515 header row. */
.markup h1, .markup h2, .markup h3, .markup h4, .markup h5, .markup h6 {
    color: var(--color-text-dark);
}
.markup :not(pre) > code {
    color: #df8a13;
}
.markup table {
    font-family: var(--fonts-monospace);
}
.markup table th {
    background-color: var(--color-box-header);
    color: var(--color-text-dark);
}

/* S5. Syntax highlighting (Chroma classes have no custom properties). Mapped to hnet-syntax.json:
 *   gold #e5c46f     commands, functions, builtins (bold); keywords, tags, preprocessor
 *   blue #7399d0     variables, attributes, classes, types
 *   teal #62bcb2     strings, inserted
 *   lilac #d9b0de    numbers, constants, escapes, diff ranges
 *   grey #9a9a9a     operators, punctuation, string delimiters
 *   slate #6b8499    comments (italic)
 *   red #e3736c      deleted, errors (underlined) */
.chroma .k, .chroma .kd, .chroma .kn, .chroma .kp, .chroma .kr, .chroma .kt,
.chroma .ow, .chroma .nt, .chroma .nd, .chroma .cp {
    color: #e5c46f;
    font-weight: normal;
}
.chroma .nb, .chroma .nf, .chroma .fm, .chroma .gh {
    color: #e5c46f;
    font-weight: bold;
}
.chroma .na, .chroma .nc, .chroma .ne, .chroma .nl, .chroma .nv, .chroma .bp, .chroma .py,
.chroma .vc, .chroma .vg, .chroma .vi, .chroma .vm, .chroma .si {
    color: #7399d0;
}
.chroma .s, .chroma .s1, .chroma .s2, .chroma .sa, .chroma .sb, .chroma .sc, .chroma .sd,
.chroma .sh, .chroma .sr, .chroma .sx, .chroma .cpf {
    color: #62bcb2;
}
.chroma .m, .chroma .mb, .chroma .mf, .chroma .mh, .chroma .mi, .chroma .il, .chroma .mo,
.chroma .kc, .chroma .no, .chroma .ni, .chroma .se, .chroma .ss, .chroma .gu {
    color: #d9b0de;
}
.chroma .o, .chroma .p, .chroma .dl, .chroma .gp, .chroma .go {
    color: #9a9a9a;
}
.chroma .n, .chroma .nn, .chroma .nx {
    color: #cccccc;
}
.chroma .c, .chroma .c1, .chroma .ch, .chroma .cm, .chroma .cs {
    color: #6b8499;
    font-style: italic;
}
.chroma .w {
    color: #555555;
}
.chroma .gi {
    color: #62bcb2;
    background-color: var(--color-diff-added-row-bg);
}
.chroma .gd {
    color: #e3736c;
    background-color: var(--color-diff-removed-row-bg);
}
.chroma .gr, .chroma .gt, .chroma .err {
    color: #e3736c;
    text-decoration: underline;
}
.chroma .ge {
    color: inherit;
    font-style: italic;
}
.chroma .gs {
    color: #eeeeee;
    font-weight: bold;
}