/* Ting — The Agentic Commune. Forgejo 16.0.3 theme extension. */
@import url("./theme-forgejo-dark.css");

@font-face {
    font-family: "OpenDyslexic";
    src: url("../fonts/OpenDyslexic-Regular.woff2") format("woff2");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: "OpenDyslexic";
    src: url("../fonts/OpenDyslexic-Bold.woff2") format("woff2");
    font-style: normal;
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: "OpenDyslexic";
    src: url("../fonts/OpenDyslexic-Italic.woff2") format("woff2");
    font-style: italic;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: "OpenDyslexic";
    src: url("../fonts/OpenDyslexic-BoldItalic.woff2") format("woff2");
    font-style: italic;
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: "Lilex";
    src: url("../fonts/Lilex-Regular.woff2") format("woff2");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: "Ting Code";
    src: url("../fonts/Lilex-Regular.woff2") format("woff2");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: "Ting Code";
    src: url("../fonts/VictorMono-Italic.woff2") format("woff2");
    font-style: italic;
    font-weight: 400;
    font-display: swap;
}

:root[data-theme="ting"] {
    --ting-accent: #00feff;
    --ting-ink: #151b1c;
    --ting-chalk: #eeece3;
    --ting-surface: #1d2525;
    --ting-surface-raised: #252e2d;
    --ting-border: #3b4844;
    --ting-muted: #acb4ae;

    --fonts-proportional: "OpenDyslexic", Arial, sans-serif;
    --fonts-monospace:
        "Ting Code", "Lilex", ui-monospace, monospace, var(--fonts-emoji);
    --border-radius: 2px;
    --border-radius-medium: 3px;
    --border-radius-large: 6px;
    --is-dark-theme: true;

    /* Forgejo's steel scale also feeds neutral borders, badges and panels. */
    --steel-900: #101617;
    --steel-850: #121819;
    --steel-800: var(--ting-ink);
    --steel-750: var(--ting-surface);
    --steel-700: var(--ting-surface-raised);
    --steel-650: #2d3935;
    --steel-600: #36443e;
    --steel-550: #46574e;
    --steel-500: #58695f;
    --steel-450: #6b7a6f;
    --steel-400: #7c8980;
    --steel-350: #8e9990;
    --steel-300: #9da69e;
    --steel-250: #acb4ae;
    --steel-200: #bdc4bc;
    --steel-150: #d3d7ce;
    --steel-100: var(--ting-chalk);

    /* Raw beam colour stays exact; chalk keeps every UI accent readable. */
    --color-primary: color-mix(
        in srgb,
        var(--ting-accent) 40%,
        var(--ting-chalk) 60%
    );
    --color-primary-contrast: #111718;
    --color-primary-dark-1: color-mix(
        in srgb,
        var(--color-primary) 90%,
        var(--ting-chalk)
    );
    --color-primary-dark-2: color-mix(
        in srgb,
        var(--color-primary) 80%,
        var(--ting-chalk)
    );
    --color-primary-dark-3: color-mix(
        in srgb,
        var(--color-primary) 70%,
        var(--ting-chalk)
    );
    --color-primary-dark-4: color-mix(
        in srgb,
        var(--color-primary) 60%,
        var(--ting-chalk)
    );
    --color-primary-dark-5: color-mix(
        in srgb,
        var(--color-primary) 45%,
        var(--ting-chalk)
    );
    --color-primary-dark-6: color-mix(
        in srgb,
        var(--color-primary) 30%,
        var(--ting-chalk)
    );
    --color-primary-dark-7: color-mix(
        in srgb,
        var(--color-primary) 15%,
        var(--ting-chalk)
    );
    --color-primary-light-1: color-mix(
        in srgb,
        var(--color-primary) 93%,
        var(--ting-ink)
    );
    --color-primary-light-2: color-mix(
        in srgb,
        var(--color-primary) 83%,
        var(--ting-ink)
    );
    --color-primary-light-3: color-mix(
        in srgb,
        var(--color-primary) 67%,
        var(--ting-ink)
    );
    --color-primary-light-4: color-mix(
        in srgb,
        var(--color-primary) 52%,
        var(--ting-ink)
    );
    --color-primary-light-5: color-mix(
        in srgb,
        var(--color-primary) 39%,
        var(--ting-ink)
    );
    --color-primary-light-6: color-mix(
        in srgb,
        var(--color-primary) 25%,
        var(--ting-ink)
    );
    --color-primary-light-7: color-mix(
        in srgb,
        var(--color-primary) 13%,
        var(--ting-ink)
    );
    --color-primary-alpha-10: color-mix(
        in srgb,
        var(--color-primary) 10%,
        transparent
    );
    --color-primary-alpha-20: color-mix(
        in srgb,
        var(--color-primary) 20%,
        transparent
    );
    --color-primary-alpha-30: color-mix(
        in srgb,
        var(--color-primary) 30%,
        transparent
    );
    --color-primary-alpha-40: color-mix(
        in srgb,
        var(--color-primary) 40%,
        transparent
    );
    --color-primary-alpha-50: color-mix(
        in srgb,
        var(--color-primary) 50%,
        transparent
    );
    --color-primary-alpha-60: color-mix(
        in srgb,
        var(--color-primary) 60%,
        transparent
    );
    --color-primary-alpha-70: color-mix(
        in srgb,
        var(--color-primary) 70%,
        transparent
    );
    --color-primary-alpha-80: color-mix(
        in srgb,
        var(--color-primary) 80%,
        transparent
    );
    --color-primary-alpha-90: color-mix(
        in srgb,
        var(--color-primary) 90%,
        transparent
    );
    --color-primary-hover: color-mix(
        in srgb,
        var(--color-primary) 88%,
        var(--ting-chalk)
    );
    --color-primary-active: var(--color-primary-light-1);

    --color-secondary: var(--ting-border);
    --color-secondary-dark-1: var(--steel-550);
    --color-secondary-dark-2: var(--steel-500);
    --color-secondary-dark-3: var(--steel-450);
    --color-secondary-dark-4: var(--steel-400);
    --color-secondary-dark-5: var(--steel-350);
    --color-secondary-dark-6: var(--steel-300);
    --color-secondary-dark-7: var(--steel-250);
    --color-secondary-dark-8: var(--steel-200);
    --color-secondary-dark-9: var(--steel-150);
    --color-secondary-dark-10: var(--steel-100);
    --color-secondary-dark-11: var(--steel-100);
    --color-secondary-dark-12: var(--steel-100);
    --color-secondary-dark-13: var(--steel-100);
    --color-secondary-light-1: var(--steel-650);
    --color-secondary-light-2: var(--steel-700);
    --color-secondary-light-3: var(--steel-750);
    --color-secondary-light-4: var(--steel-800);
    --color-secondary-alpha-10: #3b48441a;
    --color-secondary-alpha-20: #3b484433;
    --color-secondary-alpha-30: #3b48444d;
    --color-secondary-alpha-40: #3b484466;
    --color-secondary-alpha-50: #3b484480;
    --color-secondary-alpha-60: #3b484499;
    --color-secondary-alpha-70: #3b4844b3;
    --color-secondary-alpha-80: #3b4844cc;
    --color-secondary-alpha-90: #3b4844e6;
    --color-secondary-hover: var(--steel-650);
    --color-secondary-active: var(--steel-600);

    --color-body: var(--ting-ink);
    --color-box-header: var(--ting-surface-raised);
    --color-box-body: var(--ting-surface);
    --color-box-body-highlight: #293530;
    --color-text-dark: #fefdfa;
    --color-text: var(--ting-chalk);
    --color-text-light: #d3d7ce;
    --color-text-light-1: #c5ccc2;
    --color-text-light-2: #b9c0b7;
    --color-text-light-3: var(--ting-muted);
    --color-footer: var(--steel-900);
    --color-timeline: var(--ting-border);
    --color-input-text: var(--ting-chalk);
    --color-input-background: var(--steel-850);
    --color-input-toggle-background: #596b60;
    --color-input-border: #65776a;
    --color-input-border-hover: #9baa9e;
    --color-header-wrapper: var(--steel-850);
    --color-header-wrapper-transparent: #12181900;
    --color-light: #eeece307;
    --color-light-border: #68776d;
    --color-hover: #303e37;
    --color-active: #34443b;
    --color-menu: var(--ting-surface);
    --color-card: var(--ting-surface);
    --fancy-card-bg: var(--ting-surface-raised);
    --fancy-card-border: var(--ting-border);
    --color-markup-table-row: #eeece305;
    --color-markup-code-block: var(--steel-850);
    --color-markup-code-inline: #252e2a;
    --color-button: #303d36;
    --color-code-bg: var(--steel-850);
    --color-shadow: #00000050;
    --color-secondary-bg: var(--ting-surface-raised);
    --color-text-focus: #fefdfa;
    --color-expand-button: #344139;
    --color-placeholder-text: var(--ting-muted);
    --color-editor-line-highlight: #252f2b;
    --color-project-board-bg: var(--steel-850);
    --color-project-board-dark-label: var(--ting-muted);
    --color-caret: var(--ting-chalk);
    --color-reaction-bg: #eeece30b;
    --color-reaction-active-bg: var(--color-primary-alpha-10);
    --color-reaction-hover-bg: var(--color-primary-alpha-20);
    --color-tooltip-text: var(--ting-chalk);
    --color-tooltip-bg: #101617f5;
    --color-nav-bg: var(--steel-900);
    --color-nav-hover-bg: #29372f;
    --color-secondary-nav-bg: var(--ting-ink);
    --color-label-text: var(--ting-chalk);
    --color-label-bg: #303d36;
    --color-label-hover-bg: #3b4b40;
    --color-label-active-bg: #43574a;
    --color-label-bg-alt: #3b4b40;
    --color-accent: var(--color-primary);
    --color-small-accent: var(--color-primary-light-4);
    --color-highlight-fg: var(--color-primary);
    --color-highlight-bg: var(--color-primary-alpha-10);
    --color-overlay-backdrop: #090e0edb;
    --color-selection-bg: var(--color-primary);
    --color-selection-fg: var(--color-primary-contrast);

    --color-console-fg: var(--ting-chalk);
    --color-console-fg-subtle: var(--ting-muted);
    --color-console-bg: #101617;
    --color-console-border: var(--ting-border);
    --color-console-hover-bg: #eeece30d;
    --color-console-active-bg: #29372f;
    --color-console-menu-bg: var(--ting-surface);
    --color-console-menu-border: #65776a;

    /* Semantic status, ANSI, diff and syntax colours come from Forgejo Dark. */
    accent-color: var(--color-primary);
    color-scheme: dark;
}

:root[data-theme="ting"] .markup,
:root[data-theme="ting"] .ui.form textarea {
    font-size: 16px;
    line-height: 1.5;
}

:root[data-theme="ting"],
:root[data-theme="ting"] body {
    font-size: 16px;
}

:root[data-theme="ting"] body {
    line-height: 1.5;
}

:root[data-theme="ting"] .markup :is(p, li, dd, dt, blockquote) {
    line-height: 1.5;
}

:root[data-theme="ting"] #navbar {
    border-bottom: 1px solid var(--ting-border);
}

:root[data-theme="ting"] #navbar-logo img {
    content: url("../img/ting-logo.svg");
}

:root[data-theme="ting"] #navbar .item.active {
    box-shadow: inset 0 -2px var(--color-primary);
}

:root[data-theme="ting"] .ui.secondary.vertical.menu {
    border-radius: var(--border-radius) !important;
}

/* Both Forgejo's new buttons and Fomantic's legacy primary buttons. */
:root[data-theme="ting"] .button.primary:not(.basic),
:root[data-theme="ting"] .ui.primary.buttons .button:not(.basic) {
    color: var(--color-primary-contrast) !important;
    background-color: var(--color-primary) !important;
}

:root[data-theme="ting"] .button.primary:not(.basic):is(:hover, :focus-visible),
:root[data-theme="ting"]
    .ui.primary.buttons
    .button:not(.basic):is(:hover, :focus-visible) {
    background-color: var(--color-primary-hover) !important;
}

:root[data-theme="ting"] .button.primary:not(.basic):active,
:root[data-theme="ting"] .ui.primary.buttons .button:not(.basic):active {
    background-color: var(--color-primary-active) !important;
}

/* The inherited theme darkens these backgrounds without changing the text. */
:root[data-theme="ting"] .ui.primary.label:not(.basic),
:root[data-theme="ting"] .ui.primary.labels .label:not(.basic) {
    color: var(--color-primary-contrast) !important;
    background-color: var(--color-primary) !important;
}

:root[data-theme="ting"] .ui.red.label.notification_count {
    color: var(--color-white) !important;
    background-color: var(--color-red) !important;
}

:root[data-theme="ting"]
    :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 3px;
}

@media (prefers-contrast: more) {
    :root[data-theme="ting"] {
        --ting-border: #748679;
        --color-input-border: #9baa9e;
        --color-text-light-3: #d3d7ce;
    }
}

@media (forced-colors: active) {
    :root[data-theme="ting"]
        :is(
            a,
            button,
            input,
            select,
            textarea,
            summary,
            [tabindex]
        ):focus-visible {
        outline-color: Highlight;
    }
}