/*
 * Forgejo theme "learnit" — warm paper palette, single light theme.
 * Tokens come from docs/style-guide.html. Built on top of the stock Forgejo light theme;
 * variable names verified against Forgejo 16.0.5.
 */
@import url("./theme-forgejo-light.css");

@font-face {
  font-family: "Cantarell";
  src: url("./learnit-fonts/Cantarell-VF.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

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

@font-face {
  font-family: "JetBrains Mono";
  src: url("./learnit-fonts/JetBrainsMono-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "JetBrains Mono";
  src: url("./learnit-fonts/JetBrainsMono-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

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

:root {
  color-scheme: light;

  /* ---- style guide tokens ---- */
  --learnit-canvas: #fbf3e6;
  --learnit-surface: #f3eadb;
  --learnit-surface-alt: #f0e4d2;
  --learnit-border: #e3d7c4;
  --learnit-text: #1f2328;
  --learnit-text-secondary: #6a625a;
  --learnit-accent: #1e4e8c;
  --learnit-info: #0b4f79;
  --learnit-special: #6f42c1;
  --learnit-danger: #b42318;
  --learnit-warning: #9a4d00;
  --learnit-progress: #7a5c00;
  --learnit-complete: #1f6f43;
  --learnit-window-title: #3b434d;
  --learnit-hl-yellow: #ffe8a3;
  --learnit-hl-peach: #ffd1a6;

  /* ---- fonts ---- */
  --fonts-proportional: "Cantarell", "Noto Sans", system-ui, sans-serif;
  --fonts-monospace: "JetBrains Mono", "Fira Code", ui-monospace, monospace, var(--fonts-emoji);
  --fonts-regular: var(--fonts-proportional), var(--fonts-emoji);

  /* ---- radii ---- */
  --border-radius: 8px;
  --border-radius-medium: 8px;

  /* ---- primary (accent) ---- */
  --color-primary: var(--learnit-accent);
  --color-primary-contrast: #ffffff;
  --color-primary-dark-1: color-mix(in srgb, var(--color-primary) 88%, black);
  --color-primary-dark-2: color-mix(in srgb, var(--color-primary) 76%, black);
  --color-primary-dark-3: color-mix(in srgb, var(--color-primary) 64%, black);
  --color-primary-dark-4: color-mix(in srgb, var(--color-primary) 52%, black);
  --color-primary-dark-5: color-mix(in srgb, var(--color-primary) 40%, black);
  --color-primary-dark-6: color-mix(in srgb, var(--color-primary) 30%, black);
  --color-primary-dark-7: color-mix(in srgb, var(--color-primary) 20%, black);
  --color-primary-light-1: color-mix(in srgb, var(--color-primary) 85%, var(--learnit-canvas));
  --color-primary-light-2: color-mix(in srgb, var(--color-primary) 70%, var(--learnit-canvas));
  --color-primary-light-3: color-mix(in srgb, var(--color-primary) 55%, var(--learnit-canvas));
  --color-primary-light-4: color-mix(in srgb, var(--color-primary) 40%, var(--learnit-canvas));
  --color-primary-light-5: color-mix(in srgb, var(--color-primary) 25%, var(--learnit-canvas));
  --color-primary-light-6: color-mix(in srgb, var(--color-primary) 14%, var(--learnit-canvas));
  --color-primary-light-7: color-mix(in srgb, var(--color-primary) 7%, var(--learnit-canvas));
  --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: var(--color-primary-dark-2);
  --color-primary-active: var(--color-primary-dark-4);

  /* ---- secondary (neutral paper steps) ---- */
  --color-secondary: var(--learnit-border);
  --color-secondary-dark-1: color-mix(in srgb, var(--learnit-border) 94%, black);
  --color-secondary-dark-2: color-mix(in srgb, var(--learnit-border) 88%, black);
  --color-secondary-dark-3: color-mix(in srgb, var(--learnit-border) 82%, black);
  --color-secondary-dark-4: color-mix(in srgb, var(--learnit-border) 72%, black);
  --color-secondary-dark-5: color-mix(in srgb, var(--learnit-border) 62%, black);
  --color-secondary-dark-6: color-mix(in srgb, var(--learnit-border) 52%, black);
  --color-secondary-dark-7: color-mix(in srgb, var(--learnit-border) 44%, black);
  --color-secondary-dark-8: color-mix(in srgb, var(--learnit-border) 36%, black);
  --color-secondary-dark-9: color-mix(in srgb, var(--learnit-border) 30%, black);
  --color-secondary-dark-10: color-mix(in srgb, var(--learnit-border) 24%, black);
  --color-secondary-dark-11: color-mix(in srgb, var(--learnit-border) 20%, black);
  --color-secondary-dark-12: color-mix(in srgb, var(--learnit-border) 16%, black);
  --color-secondary-dark-13: color-mix(in srgb, var(--learnit-border) 12%, black);
  --color-secondary-light-1: color-mix(in srgb, var(--learnit-border) 70%, var(--learnit-canvas));
  --color-secondary-light-2: color-mix(in srgb, var(--learnit-border) 45%, var(--learnit-canvas));
  --color-secondary-light-3: color-mix(in srgb, var(--learnit-border) 25%, var(--learnit-canvas));
  --color-secondary-light-4: var(--learnit-canvas);
  --color-secondary-alpha-10: color-mix(in srgb, var(--learnit-border) 10%, transparent);
  --color-secondary-alpha-20: color-mix(in srgb, var(--learnit-border) 20%, transparent);
  --color-secondary-alpha-30: color-mix(in srgb, var(--learnit-border) 30%, transparent);
  --color-secondary-alpha-40: color-mix(in srgb, var(--learnit-border) 40%, transparent);
  --color-secondary-alpha-50: color-mix(in srgb, var(--learnit-border) 50%, transparent);
  --color-secondary-alpha-60: color-mix(in srgb, var(--learnit-border) 60%, transparent);
  --color-secondary-alpha-70: color-mix(in srgb, var(--learnit-border) 70%, transparent);
  --color-secondary-alpha-80: color-mix(in srgb, var(--learnit-border) 80%, transparent);
  --color-secondary-alpha-90: color-mix(in srgb, var(--learnit-border) 90%, transparent);
  --color-secondary-hover: var(--color-secondary-dark-2);
  --color-secondary-active: var(--color-secondary-dark-4);

  /* ---- named hues -> style guide roles ---- */
  --color-red: var(--learnit-danger);
  --color-orange: var(--learnit-warning);
  --color-yellow: var(--learnit-progress);
  --color-green: var(--learnit-complete);
  --color-blue: var(--learnit-info);
  --color-teal: var(--learnit-info);
  --color-violet: var(--learnit-special);
  --color-purple: var(--learnit-special);
  --color-red-light: color-mix(in srgb, var(--color-red) 85%, white);
  --color-orange-light: color-mix(in srgb, var(--color-orange) 85%, white);
  --color-yellow-light: color-mix(in srgb, var(--color-yellow) 85%, white);
  --color-green-light: color-mix(in srgb, var(--color-green) 85%, white);
  --color-blue-light: color-mix(in srgb, var(--color-blue) 85%, white);
  --color-teal-light: color-mix(in srgb, var(--color-teal) 85%, white);
  --color-violet-light: color-mix(in srgb, var(--color-violet) 85%, white);
  --color-purple-light: color-mix(in srgb, var(--color-purple) 85%, white);
  --color-red-dark-1: color-mix(in srgb, var(--color-red) 90%, black);
  --color-orange-dark-1: color-mix(in srgb, var(--color-orange) 90%, black);
  --color-yellow-dark-1: color-mix(in srgb, var(--color-yellow) 90%, black);
  --color-green-dark-1: color-mix(in srgb, var(--color-green) 90%, black);
  --color-blue-dark-1: color-mix(in srgb, var(--color-blue) 90%, black);
  --color-teal-dark-1: color-mix(in srgb, var(--color-teal) 90%, black);
  --color-violet-dark-1: color-mix(in srgb, var(--color-violet) 90%, black);
  --color-purple-dark-1: color-mix(in srgb, var(--color-purple) 90%, black);
  --color-red-dark-2: color-mix(in srgb, var(--color-red) 80%, black);
  --color-orange-dark-2: color-mix(in srgb, var(--color-orange) 80%, black);
  --color-yellow-dark-2: color-mix(in srgb, var(--color-yellow) 80%, black);
  --color-green-dark-2: color-mix(in srgb, var(--color-green) 80%, black);
  --color-blue-dark-2: color-mix(in srgb, var(--color-blue) 80%, black);
  --color-teal-dark-2: color-mix(in srgb, var(--color-teal) 80%, black);
  --color-violet-dark-2: color-mix(in srgb, var(--color-violet) 80%, black);
  --color-purple-dark-2: color-mix(in srgb, var(--color-purple) 80%, black);

  --color-red-badge: var(--learnit-danger);
  --color-red-badge-bg: color-mix(in srgb, var(--learnit-danger) 14%, transparent);
  --color-red-badge-hover-bg: color-mix(in srgb, var(--learnit-danger) 27%, transparent);
  --color-green-badge: var(--learnit-complete);
  --color-green-badge-bg: color-mix(in srgb, var(--learnit-complete) 14%, transparent);
  --color-green-badge-hover-bg: color-mix(in srgb, var(--learnit-complete) 27%, transparent);
  --color-yellow-badge: var(--learnit-progress);
  --color-yellow-badge-bg: color-mix(in srgb, var(--learnit-progress) 14%, transparent);
  --color-yellow-badge-hover-bg: color-mix(in srgb, var(--learnit-progress) 27%, transparent);
  --color-orange-badge: var(--learnit-warning);
  --color-orange-badge-bg: color-mix(in srgb, var(--learnit-warning) 14%, transparent);
  --color-orange-badge-hover-bg: color-mix(in srgb, var(--learnit-warning) 27%, transparent);

  /* ---- flash messages / status boxes ---- */
  --color-error-border: color-mix(in srgb, var(--learnit-danger) 35%, var(--learnit-canvas));
  --color-error-bg: #f6dbd7;
  --color-error-bg-active: color-mix(in srgb, var(--learnit-danger) 30%, var(--learnit-canvas));
  --color-error-bg-hover: color-mix(in srgb, var(--learnit-danger) 20%, var(--learnit-canvas));
  --color-error-text: var(--learnit-danger);
  --color-success-border: color-mix(in srgb, var(--learnit-complete) 35%, var(--learnit-canvas));
  --color-success-bg: #e1efe6;
  --color-success-text: var(--learnit-complete);
  --color-warning-border: color-mix(in srgb, var(--learnit-warning) 35%, var(--learnit-canvas));
  --color-warning-bg: var(--learnit-hl-peach);
  --color-warning-text: var(--learnit-warning);
  --color-info-border: color-mix(in srgb, var(--learnit-info) 35%, var(--learnit-canvas));
  --color-info-bg: color-mix(in srgb, var(--learnit-info) 10%, var(--learnit-canvas));
  --color-info-text: var(--learnit-info);

  /* ---- surfaces ---- */
  --color-body: var(--learnit-canvas);
  --color-box-header: var(--learnit-surface);
  --color-box-body: var(--learnit-canvas);
  --color-box-body-highlight: var(--learnit-surface-alt);
  --color-header-wrapper: var(--learnit-surface);
  --color-footer: var(--learnit-surface);
  --color-nav-bg: var(--learnit-surface);
  --color-nav-hover-bg: var(--learnit-surface-alt);
  --color-secondary-nav-bg: var(--learnit-canvas);
  --color-menu: var(--learnit-surface);
  --color-card: var(--learnit-surface);
  --fancy-card-bg: var(--learnit-surface);
  --fancy-card-border: var(--learnit-border);
  --color-secondary-bg: var(--learnit-surface);
  --color-button: var(--learnit-surface-alt);
  --color-code-bg: var(--learnit-canvas);
  --color-expand-button: var(--learnit-surface-alt);
  --color-editor-line-highlight: var(--learnit-surface);
  --color-timeline: var(--learnit-border);
  --color-hover: color-mix(in srgb, var(--learnit-surface-alt) 70%, transparent);
  --color-active: var(--learnit-surface-alt);
  --color-markup-code-block: var(--learnit-surface-alt);
  --color-markup-code-inline: var(--learnit-surface-alt);
  --color-markup-table-row: color-mix(in srgb, var(--learnit-surface) 50%, transparent);
  --color-project-board-bg: var(--learnit-surface);
  --color-diff-inactive: var(--learnit-surface);
  --color-light: color-mix(in srgb, var(--learnit-canvas) 80%, transparent);
  --color-light-border: color-mix(in srgb, var(--learnit-text) 12%, transparent);

  /* ---- inputs ---- */
  --color-input-text: var(--learnit-text);
  --color-input-background: var(--learnit-canvas);
  --color-input-toggle-background: var(--learnit-surface-alt);
  --color-input-border: var(--learnit-border);
  --color-input-border-hover: color-mix(in srgb, var(--learnit-border) 70%, black);

  /* ---- text ---- */
  --color-text-dark: var(--learnit-text);
  --color-text: var(--learnit-text);
  --color-text-light: var(--learnit-text-secondary);
  --color-text-light-1: var(--learnit-text-secondary);
  --color-text-light-2: var(--learnit-text-secondary);
  --color-text-light-3: var(--learnit-text-secondary);
  --color-text-focus: var(--learnit-text);
  --color-placeholder-text: color-mix(in srgb, var(--learnit-text-secondary) 80%, var(--learnit-canvas));
  --color-caret: var(--learnit-text);

  /* ---- labels, highlights, selection ---- */
  --color-label-text: var(--learnit-text);
  --color-label-bg: color-mix(in srgb, var(--learnit-border) 70%, transparent);
  --color-label-hover-bg: var(--learnit-border);
  --color-label-active-bg: color-mix(in srgb, var(--learnit-border) 80%, black);
  --color-label-bg-alt: var(--learnit-border);
  --color-accent: var(--color-primary-light-1);
  --color-small-accent: var(--color-primary-light-5);
  --color-highlight-fg: var(--learnit-hl-yellow);
  --color-highlight-bg: var(--learnit-hl-yellow);
  --color-selection-bg: var(--learnit-hl-peach);
  --color-selection-fg: var(--learnit-text);
  --color-reaction-bg: color-mix(in srgb, var(--learnit-text) 5%, transparent);

  /* ---- diff ---- */
  --color-diff-removed-word-bg: #f1b5ac;
  --color-diff-added-word-bg: #a8d5b9;
  --color-diff-removed-row-bg: #f6dbd7;
  --color-diff-moved-row-bg: var(--learnit-hl-yellow);
  --color-diff-added-row-bg: #e1efe6;
  --color-diff-removed-row-border: #f1b5ac;
  --color-diff-moved-row-border: #e6c85c;
  --color-diff-added-row-border: #a8d5b9;

  --color-shadow: color-mix(in srgb, var(--learnit-text) 35%, transparent);
  --color-overlay-backdrop: color-mix(in srgb, var(--learnit-text) 60%, transparent);
  --color-tooltip-bg: color-mix(in srgb, var(--learnit-text) 94%, transparent);
  --color-tooltip-text: var(--learnit-canvas);
  --color-gold: var(--learnit-progress);
  --color-white: #ffffff;
  --checkerboard-color-1: var(--learnit-canvas);
  --checkerboard-color-2: var(--learnit-surface-alt);

  accent-color: var(--learnit-accent);
}

/* ---- safe selector tweaks (variables do not reach these) ---- */

/* Flat soft shadow on boxes, in the guide's card style */
.ui.segment,
.ui.attached.segment,
.ui.card,
.ui.cards > .card {
  box-shadow: 0 1px 2px rgba(31, 35, 40, 0.06);
}

/* Highlighter marker */
mark,
.ui.yellow.label.pending-label {
  background: var(--learnit-hl-yellow);
  color: var(--learnit-text);
  border-radius: 3px;
}

/* Window-style title strip on boxes' top headers */
.ui.top.attached.header,
.repository .ui.top.attached.header {
  background: var(--learnit-window-title);
  color: var(--learnit-canvas);
  border-color: var(--learnit-window-title);
}
/* Everything inside the dark strip must read light-on-dark */
.ui.top.attached.header,
.ui.top.attached.header .text,
.ui.top.attached.header .text.grey,
.ui.top.attached.header .text.black,
.ui.top.attached.header .muted-links,
.ui.top.attached.header a,
.ui.top.attached.header a.muted,
.ui.top.attached.header a.default-link,
.ui.top.attached.header .author,
.ui.top.attached.header .btn-octicon,
.ui.top.attached.header .context-menu,
.ui.top.attached.header .add-reaction,
.ui.top.attached.header .ui.dropdown {
  color: var(--learnit-canvas) !important;
}
.ui.top.attached.header a:hover,
.ui.top.attached.header .btn-octicon:hover,
.ui.top.attached.header .context-menu:hover,
.ui.top.attached.header .add-reaction:hover {
  color: var(--learnit-hl-yellow) !important;
}
.ui.top.attached.header .btn-octicon.btn-octicon-danger:hover {
  color: var(--learnit-hl-peach) !important;
}
.ui.top.attached.header svg {
  fill: currentColor;
}

/* Basic buttons on the strip: transparent with a light outline, like the guide's inverted buttons */
.ui.top.attached.header .ui.basic.button,
.ui.top.attached.header .ui.basic.buttons .button {
  background: transparent !important;
  color: var(--learnit-canvas) !important;
  box-shadow: 0 0 0 1px rgba(251, 243, 230, 0.28) inset !important;
}
.ui.top.attached.header .ui.basic.button:hover,
.ui.top.attached.header .ui.basic.buttons .button:hover {
  background: rgba(251, 243, 230, 0.12) !important;
}
.ui.top.attached.header .ui.basic.button.active,
.ui.top.attached.header .ui.basic.buttons .button.active {
  background: var(--learnit-canvas) !important;
  color: var(--learnit-window-title) !important;
}

/* Labels (e.g. "Owner") on the strip */
.ui.top.attached.header .ui.label {
  background: rgba(251, 243, 230, 0.16);
  color: var(--learnit-canvas) !important;
}