/* Celyrian Wonder v2 for Forgejo: a theme named "celyrian".
 *
 * Forgejo's own dark theme underneath, with its grey ramp (--steel-*) and its
 * primary shades mapped onto the Celyrian palette, so every colour Forgejo
 * derives from them follows. Tokens come from celyrian-tokens.css beside this
 * file (the same generated file celyrian.com ships). Dark, opaque, rose only
 * for errors, text on an accent is charcoal, the sprinkle pattern on the page
 * background only. Fonts are self-hosted in /assets/fonts/.
 *
 * Deployed to forgejo/data/custom/public/assets/css/ on the NAS; the theme is
 * enabled by FORGEJO__ui__THEMES / DEFAULT_THEME in the stack's compose file.
 */
@import url("./theme-forgejo-dark.css");
@import url("./celyrian-tokens.css");

gitea-theme-meta-info {
  --theme-display-name: "Celyrian";
  --theme-color-scheme: "dark";
}

@font-face { font-family: "Fredoka"; src: url("/assets/fonts/fredoka-var.woff2") format("woff2"); font-weight: 300 700; font-display: swap; }
@font-face { font-family: "Zen Kaku Gothic New"; src: url("/assets/fonts/zen-regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Zen Kaku Gothic New"; src: url("/assets/fonts/zen-medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Zen Kaku Gothic New"; src: url("/assets/fonts/zen-bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("/assets/fonts/jbm-regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }

:root {
  --is-dark-theme: true;
  --fonts-proportional: var(--f-ui);
  --fonts-monospace: var(--f-mono);

  --steel-900: var(--paper);
  --steel-850: color-mix(in srgb, var(--paper) 50%, var(--field));
  --steel-800: var(--field);
  --steel-750: var(--plaque);
  --steel-700: var(--tile);
  --steel-650: var(--tile-hi);
  --steel-600: var(--rule);
  --steel-550: color-mix(in srgb, var(--rule) 60%, var(--edge));
  --steel-500: color-mix(in srgb, var(--rule) 25%, var(--edge));
  --steel-450: var(--edge);
  --steel-400: color-mix(in srgb, var(--edge) 60%, var(--ink-2));
  --steel-350: color-mix(in srgb, var(--edge) 30%, var(--ink-2));
  --steel-300: var(--ink-2);
  --steel-250: color-mix(in srgb, var(--ink-2) 50%, var(--plaque-ink-2));
  --steel-200: var(--plaque-ink-2);
  --steel-150: color-mix(in srgb, var(--plaque-ink-2) 50%, var(--ink));
  --steel-100: var(--ink);

  --color-primary: var(--a1);
  --color-primary-contrast: var(--on-accent);
  --color-primary-dark-1: color-mix(in srgb, var(--a1) 80%, var(--ink));
  --color-primary-dark-2: color-mix(in srgb, var(--a1) 70%, var(--ink));
  --color-primary-dark-3: color-mix(in srgb, var(--a1) 55%, var(--ink));
  --color-primary-dark-4: color-mix(in srgb, var(--a1) 45%, var(--ink));
  --color-primary-dark-5: color-mix(in srgb, var(--a1) 30%, var(--ink));
  --color-primary-dark-6: color-mix(in srgb, var(--a1) 20%, var(--ink));
  --color-primary-dark-7: color-mix(in srgb, var(--a1) 10%, var(--ink));
  --color-primary-light-1: var(--a2);
  --color-primary-light-2: var(--a3);
  --color-primary-light-3: color-mix(in srgb, var(--a3) 75%, var(--field));
  --color-primary-light-4: color-mix(in srgb, var(--a3) 55%, var(--field));
  --color-primary-light-5: color-mix(in srgb, var(--a3) 40%, var(--field));
  --color-primary-light-6: color-mix(in srgb, var(--a3) 28%, var(--field));
  --color-primary-light-7: color-mix(in srgb, var(--a3) 18%, var(--field));
  --color-primary-alpha-10: color-mix(in srgb, var(--a1) 10%, transparent);
  --color-primary-alpha-20: color-mix(in srgb, var(--a1) 20%, transparent);
  --color-primary-alpha-30: color-mix(in srgb, var(--a1) 30%, transparent);
  --color-primary-alpha-40: color-mix(in srgb, var(--a1) 40%, transparent);
  --color-primary-alpha-50: color-mix(in srgb, var(--a1) 50%, transparent);
  --color-primary-alpha-60: color-mix(in srgb, var(--a1) 60%, transparent);
  --color-primary-alpha-70: color-mix(in srgb, var(--a1) 70%, transparent);
  --color-primary-alpha-80: color-mix(in srgb, var(--a1) 80%, transparent);
  --color-primary-alpha-90: color-mix(in srgb, var(--a1) 90%, transparent);

  /* the frame (bar, footer) is field; the page under it paper with the
     sprinkle; boxes are plaque with a tile header */
  --color-nav-bg: var(--field);
  --color-header-wrapper: var(--field);
  --color-footer: var(--field);
  --color-body: var(--paper);
  --color-box-body: var(--plaque);
  --color-box-header: var(--tile);
  --color-card: var(--plaque);
  --color-menu: var(--tile);
  --color-console-bg: var(--paper);
  --color-shadow: rgb(0 0 0 / 0.55);
  --color-tooltip-bg: var(--drop);
  --color-overlay-backdrop: rgb(18 15 22 / 0.8);
  --color-accent: var(--a2);
  --color-small-accent: color-mix(in srgb, var(--a1) 30%, var(--field));
  --color-highlight-bg: color-mix(in srgb, var(--a1) 20%, transparent);
  --color-reaction-bg: color-mix(in srgb, var(--ink) 7%, transparent);

  /* states: rose is an error and nothing else; mint is ok; apricot warns */
  --color-red: var(--a4);
  --color-orange: var(--a2);
  --color-yellow: var(--note-lemon);
  --color-green: var(--a5);
  --color-blue: var(--blue);
  --color-error-bg: color-mix(in srgb, var(--plaque) 78%, var(--a4));
  --color-error-text: var(--ink);
  --color-success-bg: color-mix(in srgb, var(--plaque) 80%, var(--a5));
  --color-success-text: var(--a5);
  --color-warning-bg: color-mix(in srgb, var(--plaque) 80%, var(--a2));
  --color-warning-text: var(--a2);
  --color-info-bg: color-mix(in srgb, var(--plaque) 80%, var(--blue));
}

body {
  background: var(--paper) var(--pat-sprinkle) fixed;
}
/* the page wrapper would paint over the pattern */
.full.height, .page-content { background: transparent; }

/* headings in the display face */
h1, h2, .ui.header, .repo-header .repo-title { font-family: var(--f-display); font-weight: 600; }

/* the top bar joins the page without a line, like the frame on celyrian.com */
#navbar { border-bottom: 0; box-shadow: 0 2px 18px rgb(0 0 0 / 0.35); }

/* buttons: a hard drop, lift on hover, sink on press (small things carry the
   drop); primary is peach with charcoal text */
.ui.button { box-shadow: 0 2px 0 var(--drop); transition: transform var(--t) var(--pop), box-shadow var(--t) var(--out); }
.ui.button:hover { transform: translateY(-1px); box-shadow: 0 3px 0 var(--drop); }
.ui.button:active { transform: translateY(1px); box-shadow: var(--drop-press); }
.ui.buttons .ui.button, .ui.action.input .ui.button, .ui.labeled.button .ui.button { box-shadow: none; transform: none; }

/* big surfaces: one colour, one soft shadow, no edge line */
.ui.segment, .ui.attached.segment, .repository .ui.segment { border-color: transparent; }
.ui.cards > .card, .ui.card { border-color: transparent; box-shadow: var(--soft-shadow); }