/*
 * nordlichter.cloud · Forgejo theme "nordlichter-auto"
 *
 * Forgejo's own auto theme (light/dark follows the device) with the
 * nordlichter.cloud brand colour and fonts on top. Layout, surfaces and all
 * other colours stay Forgejo's. Served as /assets/css/theme-nordlichter-auto.css
 * from $GITEA_CUSTOM/public (ConfigMap forgejo-brand-assets, see README.md).
 * Checked against Forgejo v15.0.9 web_src/css/themes/theme-forgejo-{light,dark}.css
 * and web_src/css/base.css (--fonts-override, heading rules).
 */
@import url("./theme-forgejo-auto.css");

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../fonts/nordlichter/BricolageGrotesque-Variable-latin.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("../fonts/nordlichter/HankenGrotesk-Variable-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Light: brand #0b6e5a, brand-hover #095a4a, on-brand #ffffff.
   Same scale structure as theme-forgejo-light (dark-N = darker, light-N = lighter). */
:root {
  --fonts-override: "Hanken Grotesk", -apple-system, "Segoe UI", system-ui, "Noto Sans", Roboto, "Helvetica Neue", Arial;
  --nl-fonts-display: "Bricolage Grotesque", "Hanken Grotesk", system-ui, sans-serif;

  --color-primary: #0b6e5a;
  --color-primary-contrast: #ffffff;
  --color-primary-dark-1: #0b6e5a;
  --color-primary-dark-2: #095a4a;
  --color-primary-dark-3: #084d3f;
  --color-primary-dark-4: #074438;
  --color-primary-dark-5: #063b31;
  --color-primary-dark-6: #053329;
  --color-primary-dark-7: #042a22;
  --color-primary-light-1: #1f8870;
  --color-primary-light-2: #34a387;
  --color-primary-light-3: #4fc6a5;
  --color-primary-light-4: #74d3b8;
  --color-primary-light-5: #b3e7d8;
  --color-primary-light-6: #dcf4ed;
  --color-primary-light-7: #eefaf6;
  --color-primary-alpha-10: #0b6e5a19;
  --color-primary-alpha-20: #0b6e5a33;
  --color-primary-alpha-30: #0b6e5a4b;
  --color-primary-alpha-40: #0b6e5a66;
  --color-primary-alpha-50: #0b6e5a80;
  --color-primary-alpha-60: #0b6e5a99;
  --color-primary-alpha-70: #0b6e5ab3;
  --color-primary-alpha-80: #0b6e5acc;
  --color-primary-alpha-90: #0b6e5ae1;
  --color-primary-hover: var(--color-primary-dark-2);
  --color-primary-active: var(--color-primary-dark-4);
}

/* Dark: brand #4fc6a5, brand-hover #74d3b8, on-brand #04201a.
   Same scale structure as theme-forgejo-dark (dark-N = more contrast = lighter). */
@media (prefers-color-scheme: dark) {
  :root {
    --color-primary: #4fc6a5;
    --color-primary-contrast: #04201a;
    --color-primary-dark-1: #74d3b8;
    --color-primary-dark-2: #74d3b8;
    --color-primary-dark-3: #9ee0cd;
    --color-primary-dark-4: #9ee0cd;
    --color-primary-dark-5: #c0ebdf;
    --color-primary-dark-6: #c0ebdf;
    --color-primary-dark-7: #e3f6f1;
    --color-primary-light-1: #3eb092;
    --color-primary-light-2: #2d9a80;
    --color-primary-light-3: #0b6e5a;
    --color-primary-light-4: #095a4a;
    --color-primary-light-5: #095a4a;
    --color-primary-light-6: #074438;
    --color-primary-light-7: #074438;
    --color-primary-alpha-10: #4fc6a519;
    --color-primary-alpha-20: #4fc6a533;
    --color-primary-alpha-30: #4fc6a54b;
    --color-primary-alpha-40: #4fc6a566;
    --color-primary-alpha-50: #4fc6a580;
    --color-primary-alpha-60: #4fc6a599;
    --color-primary-alpha-70: #4fc6a5b3;
    --color-primary-alpha-80: #4fc6a5cc;
    --color-primary-alpha-90: #4fc6a5e1;
    /* brand-hover is lighter than brand in dark mode */
    --color-primary-hover: var(--color-primary-dark-1);
    --color-primary-active: var(--color-primary-dark-3);
  }
}

/* Headings of the Forgejo interface in Bricolage Grotesque. Rendered
   Markdown (.markup: READMEs, wikis, issues) keeps the text font. */
:is(h1, h2, h3, h4, h5, h6, .ui.header):not(.markup *) {
  font-family: var(--nl-fonts-display);
}

/* Home page hero (signed-out start page): at Forgejo's 3.5em the name
   "nordlichter.cloud Git" breaks inside "nordlichter.cloud" on phones. */
@media (max-width: 479.98px) {
  .home .hero h1 {
    font-size: 2.5em;
  }
}