/* ==========================================================================
   gitea-theme-tsuki-dark
   Tsuki Dark Theme for Gitea (Ink-at-night monochromatic system with vermillion)
   ========================================================================== */

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

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

  /* ---------- Font families (Tsuki Design System) ---------- */
  --fonts-proportional: 'IBM Plex Sans', -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  --fonts-monospace: 'IBM Plex Mono', ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, monospace !important;

  /* ---------- Colors: Vermillion Accent (shu) ---------- */
  --color-primary: #C75744; /* --shu-400 */
  --color-primary-contrast: #15120E; /* --sumi-0 */
  --color-primary-dark-1: #9B3C30; /* --shu-500 */
  --color-primary-dark-2: #7A2D24; /* --shu-600 */
  --color-primary-dark-3: #5C2018; /* --shu-700 */
  --color-primary-dark-4: #3F1610; /* --shu-800 */
  --color-primary-dark-5: #2A0F0A;
  --color-primary-dark-6: #150705;
  --color-primary-dark-7: #0A0302;
  --color-primary-light-1: #EDA999; /* --shu-200 */
  --color-primary-light-2: #F5CFC6; /* --shu-100 */
  --color-primary-light-3: #FBEDE9; /* --shu-50 */
  --color-primary-light-4: #FFFDFD;
  --color-primary-light-5: #FFFDFD;
  --color-primary-light-6: #FFFDFD;
  --color-primary-light-7: #FFFDFD;
  --color-primary-alpha-10: rgba(199, 87, 68, 0.10);
  --color-primary-alpha-20: rgba(199, 87, 68, 0.20);
  --color-primary-alpha-30: rgba(199, 87, 68, 0.30);
  --color-primary-alpha-40: rgba(199, 87, 68, 0.40);
  --color-primary-alpha-50: rgba(199, 87, 68, 0.50);
  --color-primary-alpha-60: rgba(199, 87, 68, 0.60);
  --color-primary-alpha-70: rgba(199, 87, 68, 0.70);
  --color-primary-alpha-80: rgba(199, 87, 68, 0.80);
  --color-primary-alpha-90: rgba(199, 87, 68, 0.90);
  --color-primary-hover: var(--color-primary-light-1);
  --color-primary-active: var(--color-primary-dark-1);

  /* ---------- Colors: Neutral Secondary (sumi) ----------
     Gitea Dark theme variables are logically inverted: 
     - dark-X variables go LIGHTER (approaching white)
     - light-X variables go DARKER (approaching black)
     ==================================================== */
  --color-secondary: #3D382D; /* --sumi-300 (base secondary) */
  --color-secondary-dark-1: #3D382D; /* --sumi-300 */
  --color-secondary-dark-2: #585140; /* --sumi-400 */
  --color-secondary-dark-3: #585140;
  --color-secondary-dark-4: #7E7660; /* --sumi-500 */
  --color-secondary-dark-5: #A39A82; /* --sumi-600 */
  --color-secondary-dark-6: #A39A82;
  --color-secondary-dark-7: #C0B7A0; /* --sumi-700 */
  --color-secondary-dark-8: #C0B7A0;
  --color-secondary-dark-9: #D8D0BB; /* --sumi-800 */
  --color-secondary-dark-10: #D8D0BB;
  --color-secondary-dark-11: #E8E1CD; /* --sumi-900 */
  --color-secondary-dark-12: #E8E1CD;
  --color-secondary-dark-13: #F2EBD9; /* --sumi-950 */
  
  --color-secondary-light-1: #2C2820; /* --sumi-200 */
  --color-secondary-light-2: #221E18; /* --sumi-100 */
  --color-secondary-light-3: #1C1813; /* --sumi-50 */
  --color-secondary-light-4: #15120E; /* --sumi-0 */
  
  --color-secondary-alpha-10: rgba(61, 56, 45, 0.10);
  --color-secondary-alpha-20: rgba(61, 56, 45, 0.20);
  --color-secondary-alpha-30: rgba(61, 56, 45, 0.30);
  --color-secondary-alpha-40: rgba(61, 56, 45, 0.40);
  --color-secondary-alpha-50: rgba(61, 56, 45, 0.50);
  --color-secondary-alpha-60: rgba(61, 56, 45, 0.60);
  --color-secondary-alpha-70: rgba(61, 56, 45, 0.70);
  --color-secondary-alpha-80: rgba(61, 56, 45, 0.80);
  --color-secondary-alpha-90: rgba(61, 56, 45, 0.90);
  --color-secondary-button: var(--color-secondary-light-1);
  --color-secondary-hover: var(--color-secondary-dark-1);
  --color-secondary-active: var(--color-secondary-dark-2);

  /* ---------- Colors: Surfaces & Framework ---------- */
  --color-body: #15120E; /* --sumi-0 */
  --color-box-body: #221E18; /* --sumi-100 */
  --color-box-header: #1C1813; /* --sumi-50 */
  --color-card: #221E18; /* --sumi-100 */
  --color-menu: #221E18; /* --sumi-100 */
  --color-navbar: #15120E; /* --sumi-0 */
  --color-footer: #15120E; /* --sumi-0 */
  --color-timeline: #2C2820; /* --sumi-200 */

  /* ---------- Colors: Interactive & States ---------- */
  --color-hover: #1C1813; /* --sumi-50 */
  --color-active: #2C2820; /* --sumi-200 */

  /* ---------- Colors: Text Ramps ----------
     Standard Gitea progression from most prominent to most muted:
     - text-dark: absolute brightest highlight (kami-0 / pure cream)
     - text: highly readable standard text (sumi-950)
     - text-muted: clear secondary text/tab labels (sumi-900)
     - text-light: readable subtle text (sumi-800)
     - text-light-1/2/3: progressively softer warm ink tones
     =================================================== */
  --color-text: #F2EBD9; /* --sumi-950 (base body text) */
  --color-text-dark: #FAF8F4; /* --kami-0 (headings / bolder text) */
  --color-text-muted: #E8E1CD; /* --sumi-900 (secondary text / tab labels) */
  --color-text-light: #D8D0BB; /* --sumi-800 (subtle text / captions) */
  --color-text-light-1: #C0B7A0; /* --sumi-700 */
  --color-text-light-2: #A39A82; /* --sumi-600 */
  --color-text-light-3: #7E7660; /* --sumi-500 */

  /* ---------- Colors: Borders ---------- */
  --color-border: #2C2820; /* --sumi-200 */
  --color-border-hover: #3D382D; /* --sumi-300 */
  --color-border-active: #585140; /* --sumi-400 */

  /* ---------- Colors: Tooltips ---------- */
  --color-tooltip-bg: #2C2820; /* --sumi-200 */
  --color-tooltip-fg: #F2EBD9; /* --sumi-950 */

  /* ---------- Colors: Console (Actions / Terminal) ---------- */
  --color-console-fg: #D8D0BB; /* --sumi-800 */
  --color-console-fg-subtle: #A39A82; /* --sumi-600 */
  --color-console-bg: #1C1813; /* --sumi-50 */
  --color-console-border: #2C2820; /* --sumi-200 */
  --color-console-hover-bg: #2C2820; /* --sumi-200 */
  --color-console-active-bg: #3D382D; /* --sumi-300 */
  --color-console-menu-bg: #221E18; /* --sumi-100 */
  --color-console-menu-border: #2C2820; /* --sumi-200 */
  --color-console-link: #C75744; /* --shu-400 */

  /* ---------- Colors: Markup Code ---------- */
  --color-markup-code-inline: #1C1813; /* --sumi-50 */
  --color-markup-code-block: #1C1813; /* --sumi-50 */

  /* ---------- Colors: Semantic States ---------- */
  /* success: matcha */
  --color-green: #A8C575;
  --color-green-light: #C4DC94;
  --color-green-dark: #8CA95B;
  --color-green-alpha-10: rgba(168, 197, 117, 0.10);
  --color-green-alpha-20: rgba(168, 197, 117, 0.20);
  
  /* error/danger: aka-sumi */
  --color-red: #E07368;
  --color-red-light: #EDA999;
  --color-red-dark: #C75744;
  --color-red-alpha-10: rgba(224, 115, 104, 0.10);
  --color-red-alpha-20: rgba(224, 115, 104, 0.20);

  /* warning: kincha */
  --color-yellow: #E0B86A;
  --color-yellow-light: #F5D28C;
  --color-yellow-dark: #C79E4E;
  --color-yellow-alpha-10: rgba(224, 184, 106, 0.10);

  /* info: ai */
  --color-blue: #7A9AC0;
  --color-blue-light: #9BB8DE;
  --color-blue-dark: #5C7DA3;
  --color-blue-alpha-10: rgba(122, 154, 192, 0.10);
  
  /* generic named overrides */
  --color-orange: #E0B86A;
  --color-teal: #7A9AC0;
  --color-violet: #A790C4;
  --color-purple: #A790C4;
  --color-pink: #E07368;
  --color-brown: #7E7660;
  --color-black: #15120E; /* --sumi-0 */
  --color-editor-selection: var(--color-primary-alpha-40);
}

/* Make page and panels feel like real dark paper */
body {
  background: var(--color-body);
}

/* Custom scrollbars matching warm dark ink system */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: var(--color-body);
}
::-webkit-scrollbar-thumb {
  background: var(--color-secondary);
  border: 2px solid var(--color-body);
  border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--color-secondary-light-1);
}

/* ==========================================================================
   Tippy.js Tooltip Styling (Ensures solid background, typography, and contrast)
   ========================================================================== */
.tippy-box {
  background-color: var(--color-tooltip-bg) !important;
  color: var(--color-tooltip-fg) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: 4px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6) !important;
  font-family: var(--fonts-proportional) !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
  font-weight: 500 !important;
  padding: 2px 4px !important;
}

.tippy-content {
  color: var(--color-tooltip-fg) !important;
}

.tippy-arrow {
  color: var(--color-tooltip-bg) !important;
}

/* ==========================================================================
   Contribution Heatmap (Activity Graph) Color Grading Override
   Ensures deep-to-bright contrast progression matching the Sumi/Shu palette.
   ========================================================================== */
/* Level 0 (No activity): very subtle dark grey-brown */
svg rect[fill="var(--color-secondary-alpha-60)"],
svg rect[style*="var(--color-secondary-alpha-60)"] {
  fill: #1C1813 !important; /* --sumi-50 */
}

/* Level 1: Deep, dark vermillion */
svg rect[fill="var(--color-primary-light-4)"],
svg rect[style*="var(--color-primary-light-4)"] {
  fill: #3F1610 !important; /* --shu-800 */
}

/* Level 2: Medium-dark vermillion */
svg rect[fill="var(--color-primary-light-2)"],
svg rect[style*="var(--color-primary-light-2)"] {
  fill: #7A2D24 !important; /* --shu-600 */
}

/* Level 3: Solid vermillion (shu primary) */
svg rect[fill="var(--color-primary)"],
svg rect[style*="var(--color-primary)"] {
  fill: #9B3C30 !important; /* --shu-500 */
}

/* Level 4: Bright vermillion */
svg rect[fill="var(--color-primary-dark-2)"],
svg rect[style*="var(--color-primary-dark-2)"] {
  fill: #C75744 !important; /* --shu-400 */
}

/* Level 5: High-contrast vermillion highlight */
svg rect[fill="var(--color-primary-dark-4)"],
svg rect[style*="var(--color-primary-dark-4)"] {
  fill: #F5CFC6 !important; /* --shu-100 */
}

/* ==========================================================================
   Chroma Syntax Highlighting overrides (Matches Tsuki Shiki Theme)
   ========================================================================== */
.chroma {
  background-color: var(--color-markup-code-block) !important;
  color: var(--color-text) !important;
}

/* Comments & Preprocessor */
.chroma .c, .chroma .ch, .chroma .cm, .chroma .c1, .chroma .cs, .chroma .cp, .chroma .cpf {
  color: #585140 !important; /* sumi-400 */
  font-style: italic !important;
}

/* Keywords & Declaration modifiers */
.chroma .k, .chroma .kc, .chroma .kd, .chroma .kn, .chroma .kp, .chroma .kr, .chroma .kt {
  color: #C75744 !important; /* shu-400 (reserved single accent) */
}

/* Operators, punctuation, and delimiters */
.chroma .o, .chroma .ow, .chroma .p {
  color: #7E7660 !important; /* sumi-500 */
}

/* Strings */
.chroma .s, .chroma .sa, .chroma .sb, .chroma .sc, .chroma .dl, .chroma .sd, .chroma .sh, .chroma .si, .chroma .sx, .chroma .sr, .chroma .s1, .chroma .s2 {
  color: #A39A82 !important; /* sumi-600 */
}

/* Escapes */
.chroma .se {
  color: #C0B7A0 !important; /* sumi-700 */
}

/* Constants & Numbers */
.chroma .m, .chroma .mb, .chroma .mf, .chroma .mh, .chroma .mi, .chroma .il, .chroma .mo, .chroma .no {
  color: #E0B86A !important; /* warning-fg / warm gold */
}

/* HTML Tags / Markup Tags */
.chroma .nt {
  color: #9B3C30 !important; /* shu-500 */
}

/* Attributes */
.chroma .na {
  color: #9F9682 !important; /* kami-400 */
}

/* Variables & object keys */
.chroma .nv, .chroma .vc, .chroma .vg, .chroma .vi, .chroma .vm {
  color: #D8D0BB !important; /* sumi-800 */
}

/* Variables parameters / Decorators */
.chroma .nd {
  color: #C0B7A0 !important;
}

/* Functions */
.chroma .nf, .chroma .fm {
  color: #E8E1CD !important; /* sumi-900 */
}

/* Types & Classes */
.chroma .nc, .chroma .nn, .chroma .ne {
  color: #7A9AC0 !important; /* info-fg / ai */
}

/* Line numbers styling */
.chroma-line, .ln, .lines-num {
  color: #585140 !important; /* sumi-400 */
}

/* ==========================================================================
   Visual Fixes: Forms and UI Tweaks
   ========================================================================== */
/* Ensure helper text (.help) below input fields is highly readable */
.form .help,
.ui.form .help {
  color: var(--color-text-muted) !important;
}

/* ==========================================================================
   Tactile Button & Input border system (Solves floating plain text buttons)
   ========================================================================== */
/* Standard, Basic, Icon and Dropdown buttons */
.ui.button,
.ui.basic.button,
.ui.dropdown,
.ui.selection.dropdown {
  background-color: #1C1813 !important; /* --sumi-50 (raised soft background) */
  color: var(--color-text) !important;
  border: 1px solid #3D382D !important; /* --sumi-300 (tactile border) */
  border-radius: 4px !important;
  box-shadow: none !important;
  transition: all 0.2s ease !important;
}

/* Hover state for buttons and dropdowns */
.ui.button:hover,
.ui.basic.button:hover,
.ui.dropdown:hover,
.ui.selection.dropdown:hover {
  background-color: #2C2820 !important; /* --sumi-200 */
  border-color: #585140 !important; /* --sumi-400 */
  color: var(--color-text-dark) !important;
}

/* Active / Focus state (vermillion shu highlight glow) */
.ui.button:active,
.ui.button:focus,
.ui.basic.button:active,
.ui.basic.button:focus,
.ui.dropdown:active,
.ui.dropdown:focus,
.ui.selection.dropdown:active,
.ui.selection.dropdown:focus {
  border-color: #C75744 !important; /* --shu-400 */
  box-shadow: 0 0 0 2px rgba(199, 87, 68, 0.2) !important;
}

/* Primary buttons (Vermillion shu fill) */
.ui.primary.button,
.ui.primary.button.basic:hover {
  background-color: #C75744 !important; /* --shu-400 */
  color: #15120E !important; /* --sumi-0 */
  border-color: #C75744 !important;
}
.ui.primary.button:hover {
  background-color: #EDA999 !important; /* --shu-200 */
  color: #15120E !important;
  border-color: #EDA999 !important;
}

/* Search input field & Textareas */
.ui.input>input,
.ui.form input:not([type]),
.ui.form select,
.ui.form textarea {
  background-color: #15120E !important; /* --sumi-0 */
  color: var(--color-text) !important;
  border: 1px solid #3D382D !important; /* --sumi-300 */
  border-radius: 4px !important;
  transition: all 0.2s ease !important;
}

.ui.input>input:focus,
.ui.form input:not([type]):focus,
.ui.form select:focus,
.ui.form textarea:focus {
  border-color: #C75744 !important; /* --shu-400 */
  background-color: #1C1813 !important; /* --sumi-50 */
  box-shadow: 0 0 0 2px rgba(199, 87, 68, 0.2) !important;
}

/* Blend the border inside input action button groups (e.g. search bar) */
.ui.input.action .button,
.ui.action.input .button {
  border-left: none !important;
}

/* ==========================================================================
   Tactile Checkbox & Radio styling (Coloring with vermillion accent)
   ========================================================================== */
/* Fomantic-UI Checkbox Custom Overrides */
.ui.checkbox label::before,
.ui.checkbox .box::before {
  background-color: #15120E !important; /* --sumi-0 */
  border: 1px solid #3D382D !important; /* --sumi-300 */
  border-radius: 4px !important;
  transition: all 0.2s ease !important;
}

/* Checkbox Hover state */
.ui.checkbox:hover label::before,
.ui.checkbox:hover .box::before {
  border-color: #585140 !important; /* --sumi-400 */
}

/* Checked Checkbox (Vermillion Background) */
.ui.checkbox input:checked ~ label::before,
.ui.checkbox input:checked ~ .box::before {
  background-color: #C75744 !important; /* --shu-400 */
  border-color: #C75744 !important;
}

/* Checked Checkmark Icon (Pure white/sumi-950) */
.ui.checkbox input:checked ~ label::after,
.ui.checkbox input:checked ~ .box::after {
  color: #F2EBD9 !important; /* --sumi-950 */
}

/* Indeterminate (Archived/Private Minus sign state) */
.ui.checkbox input:determinate ~ label::before,
.ui.checkbox input:determinate ~ .box::before,
.ui.checkbox input:indeterminate ~ label::before,
.ui.checkbox input:indeterminate ~ .box::before {
  background-color: #C75744 !important;
  border-color: #C75744 !important;
}

.ui.checkbox input:determinate ~ label::after,
.ui.checkbox input:determinate ~ .box::after,
.ui.checkbox input:indeterminate ~ label::after,
.ui.checkbox input:indeterminate ~ .box::after {
  color: #F2EBD9 !important;
}

/* Native Browser controls Tinting */
input[type="checkbox"],
input[type="radio"] {
  accent-color: #C75744 !important;
}

/* ==========================================================================
   Navigation and Header Legibility Fixes
   ========================================================================== */
/* Repository header navigation tabs - unfocused tab items */
.ui.menu .item:not(.active),
.ui.tabs.container .item:not(.active) {
  color: var(--color-text-muted) !important;
}
.ui.menu .item:not(.active):hover,
.ui.tabs.container .item:not(.active):hover {
  color: var(--color-text-dark) !important;
}

/* Description & Metadata on sidebar */
.repository .sidebar .repo-description,
.repository .sidebar .repo-description p,
.repository .sidebar .repo-description span,
.repository .sidebar .repo-description a {
  color: var(--color-text-muted) !important;
}

/* Muted language list and topic texts */
.repository .sidebar .language-color + span,
.repository .sidebar .language-list span {
  color: var(--color-text-muted) !important;
}

/* Metadata captions below repository titles (mirror sources, sync times, etc.) */
.repository.overview .desc,
.repository .desc,
.repository .desc span,
.repository .desc a {
  color: var(--color-text-muted) !important;
}

/* ==========================================================================
   Text Selection Highlight Override
   Ensures exceptional contrast and legibility matching the Tsuki theme
   ========================================================================== */
::selection {
  background-color: #C75744 !important; /* --shu-400 (Vivid Vermillion) */
  color: #15120E !important; /* --sumi-0 (Dark Ink) */
}
::-moz-selection {
  background-color: #C75744 !important; /* --shu-400 */
  color: #15120E !important; /* --sumi-0 */
}

/* ==========================================================================
   Cohesive and High-Contrast Status Badges & Labels
   Resolves low-contrast white-on-light-background text bugs for issue/PR states
   ========================================================================== */
/* General Fomantic UI labels overrides */
.ui.green.label,
.ui.green.labels .label,
.ui.green.badge {
  background-color: #A8C575 !important; /* Matcha green */
  color: #15120E !important; /* sumi-0 dark ink */
}
.ui.green.label svg,
.ui.green.label .svg,
.ui.green.label i,
.ui.green.label .octicon {
  color: #15120E !important;
  fill: #15120E !important;
}

.ui.red.label,
.ui.red.labels .label,
.ui.red.badge {
  background-color: #E07368 !important; /* aka-sumi red */
  color: #15120E !important; /* sumi-0 dark ink */
}
.ui.red.label svg,
.ui.red.label .svg,
.ui.red.label i,
.ui.red.label .octicon {
  color: #15120E !important;
  fill: #15120E !important;
}

.ui.purple.label,
.ui.purple.labels .label,
.ui.purple.badge {
  background-color: #A790C4 !important; /* elegant lavender-plum */
  color: #15120E !important; /* sumi-0 dark ink */
}
.ui.purple.label svg,
.ui.purple.label .svg,
.ui.purple.label i,
.ui.purple.label .octicon {
  color: #15120E !important;
  fill: #15120E !important;
}

.ui.yellow.label,
.ui.yellow.labels .label,
.ui.yellow.badge {
  background-color: #E0B86A !important; /* kincha gold */
  color: #15120E !important; /* sumi-0 dark ink */
}
.ui.yellow.label svg,
.ui.yellow.label .svg,
.ui.yellow.label i,
.ui.yellow.label .octicon {
  color: #15120E !important;
  fill: #15120E !important;
}

/* Bulletproof targeted overrides for Gitea's Issue/PR State Badges */
.issue-state-label.ui.green.label,
.issue-state-label.ui.green.label * {
  background-color: #A8C575 !important;
  color: #15120E !important;
  fill: #15120E !important;
}
.issue-state-label.ui.red.label,
.issue-state-label.ui.red.label * {
  background-color: #E07368 !important;
  color: #15120E !important;
  fill: #15120E !important;
}
.issue-state-label.ui.purple.label,
.issue-state-label.ui.purple.label * {
  background-color: #A790C4 !important;
  color: #15120E !important;
  fill: #15120E !important;
}
.issue-state-label.ui.yellow.label,
.issue-state-label.ui.yellow.label * {
  background-color: #E0B86A !important;
  color: #15120E !important;
  fill: #15120E !important;
}