/* Makiola — brand red accent theme for Gitea 1.25
 * Light base (built-in light vars) with brand red (#FF4242) accents.
 * "Colors only": overrides just the primary colour ramp; the rest of the
 * UI inherits Gitea's default light palette. Derived shades use color-mix
 * so the whole ramp follows from one brand colour.
 */
gitea-theme-meta-info {
  --theme-display-name: "Makiola";
}

:root {
  /* brand */
  --color-primary: #ff4242;
  --color-primary-contrast: #ffffff;

  /* darker shades (hover / active / pressed) */
  --color-primary-dark-1: color-mix(in srgb, #ff4242, #000 8%);
  --color-primary-dark-2: color-mix(in srgb, #ff4242, #000 16%);
  --color-primary-dark-3: color-mix(in srgb, #ff4242, #000 24%);
  --color-primary-dark-4: color-mix(in srgb, #ff4242, #000 32%);
  --color-primary-dark-5: color-mix(in srgb, #ff4242, #000 40%);
  --color-primary-dark-6: color-mix(in srgb, #ff4242, #000 48%);
  --color-primary-dark-7: color-mix(in srgb, #ff4242, #000 56%);

  /* lighter shades (backgrounds / subtle fills) */
  --color-primary-light-1: color-mix(in srgb, #ff4242, #fff 12%);
  --color-primary-light-2: color-mix(in srgb, #ff4242, #fff 24%);
  --color-primary-light-3: color-mix(in srgb, #ff4242, #fff 36%);
  --color-primary-light-4: color-mix(in srgb, #ff4242, #fff 48%);
  --color-primary-light-5: color-mix(in srgb, #ff4242, #fff 60%);
  --color-primary-light-6: color-mix(in srgb, #ff4242, #fff 72%);
  --color-primary-light-7: color-mix(in srgb, #ff4242, #fff 84%);

  /* translucent variants (focus rings / selection / hovers) */
  --color-primary-alpha-10: color-mix(in srgb, #ff4242 10%, transparent);
  --color-primary-alpha-20: color-mix(in srgb, #ff4242 20%, transparent);
  --color-primary-alpha-30: color-mix(in srgb, #ff4242 30%, transparent);
  --color-primary-alpha-40: color-mix(in srgb, #ff4242 40%, transparent);
  --color-primary-alpha-50: color-mix(in srgb, #ff4242 50%, transparent);
  --color-primary-alpha-60: color-mix(in srgb, #ff4242 60%, transparent);
  --color-primary-alpha-70: color-mix(in srgb, #ff4242 70%, transparent);
  --color-primary-alpha-80: color-mix(in srgb, #ff4242 80%, transparent);
  --color-primary-alpha-90: color-mix(in srgb, #ff4242 90%, transparent);

  /* accent (links, secondary highlights) tracks the brand too */
  --color-accent: #ff4242;

  /* navbar / header in brand red (white text for contrast) */
  --color-nav-bg: #ff4242;
  --color-nav-text: #ffffff;
  --color-nav-hover-bg: color-mix(in srgb, #ff4242, #000 12%);

  /* typography — brand-first stacks, graceful fallback to system fonts
   * (true self-hosted web fonts need a binary asset; see README) */
  --fonts-proportional: Inter, -apple-system, "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, var(--fonts-emoji);
  --fonts-monospace: "JetBrains Mono", "Cascadia Code", "Fira Code", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", monospace, var(--fonts-emoji);
}

/* The red cup logo disappears against the red app bar — render the navbar
 * logo as a clean white silhouette. Only the navbar copy is affected;
 * the favicon and other placements keep the red cup. */
#navbar-logo img {
  filter: brightness(0) invert(1);
}