/*
 * Motif - a theme for Forgejo
 * ===========================
 *
 * OSF/Motif, as it looked on a Sun or an HP workstation around 1989: a warm
 * grey face, slate blue chrome, and amber carried over from pitbbs.net so
 * the terminal and the workstation read as the same world.
 *
 * This file changes colour only. Forgejo builds all 240 of its semantic
 * --color-* variables out of two ramps, --zinc-* and --steel-*, so
 * repainting the ramps repaints almost everything, and the handful of
 * overrides below cover the values that are hardcoded rather than derived.
 *
 * Nothing here touches component selectors, which is deliberate: variable
 * overrides survive Forgejo upgrades, whereas structural CSS is what the
 * customisation docs warn will break without notice. Bevels and borders -
 * the part that makes it *look* like Motif rather than merely Motif-coloured
 * - are a separate, more fragile job for later.
 *
 * Installed to custom/public/assets/css/theme-motif.css and listed in
 * [ui] THEMES. See scripts/install-forgejo.sh.
 */

:root {
    --is-dark-theme: false;

    /*
     * Surfaces. 150 is the Motif face colour: the value buttons and the page
     * background sit at, with panels raised lighter above it.
     */
    --zinc-50:  #f5f3f0;
    --zinc-100: #e9e6e1;
    --zinc-150: #d6d3ce;
    --zinc-200: #cac6c0;
    --zinc-250: #beb9b2;
    --zinc-300: #b2ada5;
    --zinc-350: #a09a91;
    --zinc-400: #8e887e;
    --zinc-450: #7d766c;
    --zinc-500: #6c655b;
    --zinc-550: #5f584f;
    --zinc-600: #524c43;
    --zinc-650: #47413a;
    --zinc-700: #3c3730;
    --zinc-750: #322e28;
    --zinc-800: #292520;
    --zinc-850: #201d19;
    --zinc-900: #191612;

    /* Window chrome: the slate blue of a Motif title bar. */
    --steel-100: #dde2ea;
    --steel-150: #cbd2dd;
    --steel-200: #b8c1d0;
    --steel-250: #a5b0c3;
    --steel-300: #929db3;
    --steel-350: #808ba2;
    --steel-400: #6f7a90;
    --steel-450: #61697d;
    --steel-500: #545b6b;
    --steel-550: #494f5c;
    --steel-600: #3e434e;
    --steel-650: #343841;
    --steel-700: #2b2f36;
    --steel-750: #23262c;
    --steel-800: #1c1e23;
    --steel-850: #16181c;
    --steel-900: #111316;

    /* Hardcoded white in the stock theme; the face colour here. */
    --color-body: #d6d3ce;
    --color-input-background: #f5f3f0;
    --color-input-toggle-background: #f5f3f0;

    /*
     * Amber. #ffb000 is the pitbbs.net phosphor, but it is far too light to
     * carry link text on a grey face - it manages 1.6:1. So the terminal
     * amber lives at light-4 where it is only ever a background, and the
     * primary itself is darkened until it clears WCAG AA against both the
     * face (5.09:1) and a raised panel (6.86:1).
     */
    --color-primary: #7e4600;
    --color-primary-contrast: #ffffff;
    --color-primary-dark-1: #734000;
    --color-primary-dark-2: #683a00;
    --color-primary-dark-3: #5d3300;
    --color-primary-dark-4: #4f2c00;
    --color-primary-light-1: #965400;
    --color-primary-light-2: #b06300;
    --color-primary-light-3: #cf7400;
    --color-primary-light-4: #ffb000;
    --color-primary-light-5: #ffcc66;
    --color-primary-light-6: #ffe6b3;

    /* Anything sitting on the bright amber must be black, never white. */
    --color-label-text: #191612;

    --color-shadow: #00000040;

    /*
     * Chrome. Forgejo has no nav-text variable - navigation text just uses
     * --color-text - so these stay light enough for dark text to sit on.
     * A steel-700 title bar would look right and be unreadable.
     */
    --color-nav-bg: var(--steel-200);
    --color-nav-hover-bg: var(--steel-300);
    --color-secondary-nav-bg: var(--steel-150);
    --color-box-header: var(--steel-150);
    --color-menu: var(--steel-150);
    --color-header-wrapper: var(--steel-100);

    /* Helvetica was the Motif label font. Nimbus Sans is its Linux clone. */
    --fonts-proportional: "Nimbus Sans", Helvetica, "Helvetica Neue", Arial, sans-serif;

    /* Bevel edges: light catches the top-left, shadow falls bottom-right. */
    --motif-light: #ffffff;
    --motif-shade: #8e887e;
    --motif-dark:  #5f584f;
}


/*
 * ===========================================================================
 * STRUCTURE
 * ===========================================================================
 *
 * Everything above is variables and rides on Forgejo's own theming contract.
 * Everything below overrides component selectors, which is the part the
 * customisation docs warn can break on any upgrade. If the UI looks wrong
 * after updating Forgejo, delete this section first and see if that fixes it.
 *
 * Motif's whole visual language is the bevel: every widget is a box either
 * raised out of the face or sunk into it, drawn with a light edge on the
 * top-left and a shadow on the bottom-right. Two pixels, hard edges, no
 * gradients and no soft shadows - none of which existed in 1989.
 */

/* Motif widgets were strictly rectangular. */
*, *::before, *::after {
    border-radius: 0 !important;
}

/*
 * Avatars excepted. The SHAPE extension arrived in X11R4 the same year, and
 * oclock was a perfect circle, so a round portrait is period-correct even if
 * no Motif widget ever was.
 */
.ui.avatar,
.ui.avatar img,
img.avatar,
.avatar > img {
    border-radius: 50% !important;
}

/* Nor did anything have a soft drop shadow. */
.ui.segment, .ui.card, .ui.menu, .ui.button, .btn,
.ui.input > input, .ui.dropdown, details.dropdown > summary {
    box-shadow: none !important;
}

/*
 * Raised: buttons, panels, cards, table headers.
 *
 * Forgejo uses three button idioms, not one. Fomantic's .ui.button, a plain
 * .btn on newer components, and native <details class="dropdown"> for the
 * navbar menus - the last two carry no "ui" class, so a .ui.button selector
 * silently leaves them flat.
 */
.ui.button,
.btn,
details.dropdown > summary,
.ui.segment,
.ui.card,
.ui.menu,
.ui.dropdown,
.repository .header-wrapper,
table.ui.table > thead > tr > th {
    border: 2px solid;
    border-color: var(--motif-light) var(--motif-shade)
                  var(--motif-shade) var(--motif-light);
}

/* Give the native dropdowns room for their new edges. */
details.dropdown > summary {
    padding: 0.35em 0.6em;
    background: var(--zinc-150);
    cursor: pointer;
    list-style: none;
}

details.dropdown > summary::-webkit-details-marker {
    display: none;
}

/* Pressed: the light and the shadow swap, so the widget looks pushed in. */
.ui.button:active,
.ui.button.active,
.btn:active,
details.dropdown[open] > summary {
    border-color: var(--motif-shade) var(--motif-light)
                  var(--motif-light) var(--motif-shade);
    padding-top: calc(0.75em + 1px);
    padding-bottom: calc(0.75em - 1px);
}

/* Sunken: anything you type into is a hole in the face. */
input, textarea, select,
.ui.input > input,
.ui.form input,
.ui.form textarea {
    border: 2px solid;
    border-color: var(--motif-shade) var(--motif-light)
                  var(--motif-light) var(--motif-shade);
    background: var(--color-input-background);
}

/* Motif drew focus as a hard rectangle, never a glow. */
:focus-visible,
input:focus, textarea:focus, select:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: 0;
}

/* Chunky, square scrollbars with a raised thumb. */
::-webkit-scrollbar {
    width: 16px;
    height: 16px;
}

::-webkit-scrollbar-track {
    background: var(--zinc-250);
}

::-webkit-scrollbar-thumb {
    background: var(--zinc-150);
    border: 2px solid;
    border-color: var(--motif-light) var(--motif-shade)
                  var(--motif-shade) var(--motif-light);
}