/* ============================================================
   YOLLA THEME v2 — "Studio"

   A premium Gitea experience for git.dev.yolla.ai
   Plus Jakarta Sans · JetBrains Mono
   Indigo gradient accent · Glass morphism · Warm neutrals

   Architecture: Gitea CSS variable overrides (80% of the theme)
   + targeted selectors for typography, glass, and animations.
   ============================================================ */


/* ----------------------------------------------------------
   1. LIGHT MODE — Gitea Variable Overrides
   ---------------------------------------------------------- */

:root {
  /* ── Primary: Indigo ── */
  --color-primary: #4F46E5;
  --color-primary-dark-1: #4338CA;
  --color-primary-light-1: #818CF8;
  --color-primary-light-2: #A5B4FC;
  --color-primary-light-3: #C7D2FE;
  --color-primary-light-4: #E0E7FF;
  --color-primary-light-5: #EEF2FF;
  --color-primary-light-6: #F5F7FF;
  --color-primary-alpha-10: rgba(79, 70, 229, 0.10);
  --color-primary-alpha-20: rgba(79, 70, 229, 0.20);
  --color-primary-alpha-40: rgba(79, 70, 229, 0.40);
  --color-primary-alpha-60: rgba(79, 70, 229, 0.60);
  --color-primary-alpha-80: rgba(79, 70, 229, 0.80);

  /* ── Semantic ── */
  --color-secondary: #D4D4CF;
  --color-secondary-dark-1: #C7C7C2;
  --color-secondary-light-1: #E5E5E0;
  --color-secondary-light-2: #EDEDEA;
  --color-secondary-light-3: #F5F5F2;
  --color-secondary-light-4: #FAFAF8;
  --color-secondary-button: var(--color-secondary-dark-1);
  --color-secondary-hover: var(--color-secondary-dark-1);
  --color-secondary-active: var(--color-secondary-dark-2);

  /* ── Full secondary dark scale (warm stone) ── */
  --color-secondary-dark-2: #BABAB5;
  --color-secondary-dark-3: #A3A39E;
  --color-secondary-dark-4: #8F8F8A;
  --color-secondary-dark-5: #7A7A75;
  --color-secondary-dark-6: #666661;
  --color-secondary-dark-7: #52524D;
  --color-secondary-dark-8: #3D3D39;
  --color-secondary-dark-9: #292925;
  --color-secondary-dark-10: #1E1E1A;
  --color-secondary-dark-11: #141410;
  --color-secondary-dark-12: #0A0A06;
  --color-secondary-dark-13: #000000;

  /* ── Secondary alpha scale ── */
  --color-secondary-alpha-10: #D4D4CF19;
  --color-secondary-alpha-20: #D4D4CF33;
  --color-secondary-alpha-30: #D4D4CF4b;
  --color-secondary-alpha-40: #D4D4CF66;
  --color-secondary-alpha-50: #D4D4CF80;
  --color-secondary-alpha-60: #D4D4CF99;
  --color-secondary-alpha-70: #D4D4CFb3;
  --color-secondary-alpha-80: #D4D4CFcc;
  --color-secondary-alpha-90: #D4D4CFe1;

  --color-red: #EF4444;
  --color-green: #10B981;
  --color-yellow: #F59E0B;
  --color-blue: #3B82F6;

  /* ── Surfaces: warm stone ── */
  --color-body: #FAFAF9;
  --color-box-body: #FFFFFF;
  --color-box-header: #F5F5F0;
  --color-box-body-highlight: #EEF2FF;
  --color-header: #FFFFFF;
  --color-hover: rgba(0, 0, 23, 0.03);
  --color-light: rgba(0, 0, 23, 0.02);
  --color-light-border: rgba(0, 0, 23, 0.11);
  --color-card: #F8F8F6;
  --color-button: #F5F5F0;
  --color-border: #E5E5E0;
  --color-shadow: rgba(0, 0, 0, 0.05);
  --color-secondary-bg: #F2F2EE;
  --color-secondary-nav-bg: #FAFAF9;
  --color-nav-bg: #F5F5F0;
  --color-code-bg: #FAFAF9;
  --color-menu: #F8F8F6;
  --color-footer: var(--color-nav-bg);
  --color-timeline: #D4D4CF;
  --color-hover-opaque: #F5F5F0;
  --color-active: rgba(0, 0, 23, 0.08);
  --color-project-column-bg: var(--color-secondary-light-4);
  --color-markup-table-row: rgba(0, 48, 96, 0.04);
  --color-markup-code-block: rgba(0, 48, 96, 0.06);
  --color-markup-code-inline: rgba(0, 48, 96, 0.07);
  --color-input-toggle-background: #D4D4CF;
  --color-accent: var(--color-primary-light-1);
  --color-small-accent: var(--color-primary-light-6);
  --color-overlay-backdrop: rgba(8, 8, 8, 0.75);
  --color-shadow-opaque: #C7C7C2;

  /* ── Text: warm ink ── */
  --color-text-dark: #09090B;
  --color-text: #18181B;
  --color-text-light: #52525B;
  --color-text-light-1: #3F3F46;
  --color-text-light-2: #71717A;
  --color-text-light-3: #A1A1AA;
  --color-placeholder-text: var(--color-text-light-3);
  --color-label-text: #18181B;
  --color-nav-text: var(--color-text);
  --color-nav-hover-bg: var(--color-secondary-light-1);
  --color-primary-contrast: #FFFFFF;

  /* ── Inputs ── */
  --color-input-text: #18181B;
  --color-input-background: #FFFFFF;
  --color-input-border: #D4D4CF;
  --color-input-border-hover: var(--color-secondary-dark-1);

  /* ── Label backgrounds ── */
  --color-label-bg: #A1A1AA4b;
  --color-label-hover-bg: #A1A1AAa0;
  --color-label-active-bg: #A1A1AAff;

  /* ── Console ── */
  --color-console-fg: #09090B;
  --color-console-fg-subtle: #52525B;
  --color-console-bg: #FFFFFF;
  --color-console-border: #D4D4CF;
  --color-console-hover-bg: #F5F5F0;
  --color-console-active-bg: #D4D4CF;
  --color-console-menu-bg: #F8F8F6;
  --color-console-menu-border: #D4D4CF;

  /* ── Yolla Design Tokens ── */
  /* ── Primary scale (extended) ── */
  --color-primary-dark-2: #3730A3;
  --color-primary-dark-3: #312E81;
  --color-primary-dark-4: #2E1065;
  --color-primary-dark-5: #1E1B4B;
  --color-primary-dark-6: #0F0D2E;
  --color-primary-dark-7: #050417;
  --color-primary-light-7: #FAFBFF;
  --color-primary-alpha-30: rgba(79, 70, 229, 0.30);
  --color-primary-alpha-50: rgba(79, 70, 229, 0.50);
  --color-primary-alpha-70: rgba(79, 70, 229, 0.70);
  --color-primary-alpha-90: rgba(79, 70, 229, 0.90);
  --color-primary-hover: var(--color-primary-dark-1);
  --color-primary-active: var(--color-primary-dark-2);

  /* ── Named colors (Fomantic UI) ── */
  --color-orange: #F97316;
  --color-olive: #84CC16;
  --color-teal: #14B8A6;
  --color-violet: #8B5CF6;
  --color-purple: #A855F7;
  --color-pink: #EC4899;
  --color-brown: #92400E;
  --color-black: #18181B;
  --color-red-light: #F87171;
  --color-orange-light: #FB923C;
  --color-yellow-light: #FBBF24;
  --color-olive-light: #A3E635;
  --color-green-light: #34D399;
  --color-teal-light: #2DD4BF;
  --color-blue-light: #60A5FA;
  --color-violet-light: #A78BFA;
  --color-purple-light: #C084FC;
  --color-pink-light: #F472B6;
  --color-brown-light: #B45309;
  --color-black-light: #3F3F46;
  --color-red-dark-1: #DC2626;
  --color-orange-dark-1: #EA580C;
  --color-yellow-dark-1: #D97706;
  --color-olive-dark-1: #65A30D;
  --color-green-dark-1: #059669;
  --color-teal-dark-1: #0D9488;
  --color-blue-dark-1: #2563EB;
  --color-violet-dark-1: #7C3AED;
  --color-purple-dark-1: #9333EA;
  --color-pink-dark-1: #DB2777;
  --color-brown-dark-1: #78350F;
  --color-black-dark-1: #27272A;
  --color-red-dark-2: #B91C1C;
  --color-orange-dark-2: #C2410C;
  --color-yellow-dark-2: #B45309;
  --color-olive-dark-2: #4D7C0F;
  --color-green-dark-2: #047857;
  --color-teal-dark-2: #0F766E;
  --color-blue-dark-2: #1D4ED8;
  --color-violet-dark-2: #6D28D9;
  --color-purple-dark-2: #7E22CE;
  --color-pink-dark-2: #BE185D;
  --color-brown-dark-2: #451A03;
  --color-black-dark-2: #09090B;

  /* ── ANSI colors (CI/CD console) ── */
  --color-ansi-black: #18181B;
  --color-ansi-red: #EF4444;
  --color-ansi-green: #10B981;
  --color-ansi-yellow: #F59E0B;
  --color-ansi-blue: #3B82F6;
  --color-ansi-magenta: #EC4899;
  --color-ansi-cyan: #14B8A6;
  --color-ansi-white: var(--color-console-fg-subtle);
  --color-ansi-bright-black: #52525B;
  --color-ansi-bright-red: #F87171;
  --color-ansi-bright-green: #34D399;
  --color-ansi-bright-yellow: #FBBF24;
  --color-ansi-bright-blue: #60A5FA;
  --color-ansi-bright-magenta: #F472B6;
  --color-ansi-bright-cyan: #2DD4BF;
  --color-ansi-bright-white: var(--color-console-fg);

  /* ── Diff colors ── */
  --color-diff-added-linenum-bg: #DCFCE7;
  --color-diff-added-row-bg: #F0FDF4;
  --color-diff-added-row-border: #BBF7D0;
  --color-diff-added-word-bg: #BBF7D0;
  --color-diff-moved-row-bg: #FEF9C3;
  --color-diff-moved-row-border: #FDE047;
  --color-diff-removed-linenum-bg: #FEE2E2;
  --color-diff-removed-row-bg: #FEF2F2;
  --color-diff-removed-row-border: #FECACA;
  --color-diff-removed-word-bg: #FECACA;
  --color-diff-inactive: #F5F5F0;

  /* ── Status / semantic backgrounds ── */
  --color-error-border: #FECACA;
  --color-error-bg: #FEF2F2;
  --color-error-bg-active: #FEE2E2;
  --color-error-bg-hover: #FEE2E2;
  --color-error-text: #991B1B;
  --color-success-border: #A7F3D0;
  --color-success-bg: #F0FDF4;
  --color-success-text: #065F46;
  --color-warning-border: #FDE68A;
  --color-warning-bg: #FFFBEB;
  --color-warning-text: #78350F;
  --color-info-border: #BFDBFE;
  --color-info-bg: #EFF6FF;
  --color-info-text: #1E40AF;

  /* ── Badge colors ── */
  --color-red-badge: #EF4444;
  --color-red-badge-bg: #EF44441a;
  --color-red-badge-hover-bg: #EF44444d;
  --color-green-badge: #10B981;
  --color-green-badge-bg: #10B9811a;
  --color-green-badge-hover-bg: #10B9814d;
  --color-yellow-badge: #F59E0B;
  --color-yellow-badge-bg: #F59E0B1a;
  --color-yellow-badge-hover-bg: #F59E0B4d;
  --color-orange-badge: #F97316;
  --color-orange-badge-bg: #F973161a;
  --color-orange-badge-hover-bg: #F973164d;

  /* ── Tooltip, reactions, highlights ── */
  --color-tooltip-bg: #18181Bf0;
  --color-tooltip-text: #FAFAF8;
  --color-reaction-bg: rgba(0, 0, 23, 0.04);
  --color-reaction-hover-bg: var(--color-primary-light-5);
  --color-reaction-active-bg: var(--color-primary-light-6);
  --color-highlight-fg: #A16207;
  --color-highlight-bg: #FEF9C3;

  /* ── Miscellaneous ── */
  --color-grey: #71717A;
  --color-grey-light: #A1A1AA;
  --color-gold: #A16207;
  --color-white: #FFFFFF;
  --color-git: #F05133;
  --color-expand-button: var(--color-primary-light-4);
  --color-editor-line-highlight: var(--color-primary-light-6);
  --color-project-board-bg: var(--color-secondary-light-4);
  --color-caret: var(--color-text-dark);
  --is-dark-theme: false;
  accent-color: var(--color-accent);
  color-scheme: light;

  --yolla-font: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --yolla-mono: "JetBrains Mono", ui-monospace, "Cascadia Code", monospace;
  --yolla-r: 8px;
  --yolla-r-lg: 12px;
  --yolla-r-full: 9999px;
  --yolla-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --yolla-gradient: linear-gradient(135deg, #4F46E5, #7C3AED);
  --yolla-glow: 0 0 20px rgba(79, 70, 229, 0.15);
  --yolla-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.02);
  --yolla-shadow-lg: 0 10px 40px rgba(0,0,0,0.08), 0 2px 8px rgba(0,0,0,0.04);
}


/* ----------------------------------------------------------
   2. DARK MODE — Gitea Variable Overrides
   ---------------------------------------------------------- */

[data-theme="dark"] {
  --color-primary: #818CF8;
  --color-primary-dark-1: #6366F1;
  --color-primary-light-1: #A5B4FC;
  --color-primary-light-2: #6366F1;
  --color-primary-light-3: #4338CA;
  --color-primary-light-4: #3730A3;
  --color-primary-light-5: #312E81;
  --color-primary-light-6: #1E1B4B;
  --color-primary-alpha-10: rgba(129, 140, 248, 0.12);
  --color-primary-alpha-20: rgba(129, 140, 248, 0.20);
  --color-primary-alpha-40: rgba(129, 140, 248, 0.40);
  --color-primary-alpha-60: rgba(129, 140, 248, 0.60);
  --color-primary-alpha-80: rgba(129, 140, 248, 0.80);

  --color-secondary: #3F3F46;
  --color-secondary-dark-1: #52525B;
  --color-secondary-light-1: #27272A;
  --color-secondary-light-2: #1E1E22;
  --color-secondary-light-3: #18181B;
  --color-secondary-light-4: #0F0F12;
  --color-secondary-button: var(--color-secondary-dark-1);
  --color-secondary-hover: var(--color-secondary-light-1);
  --color-secondary-active: var(--color-secondary-light-2);

  /* ── Dark: full secondary dark scale ── */
  --color-secondary-dark-2: #71717A;
  --color-secondary-dark-3: #8A8A94;
  --color-secondary-dark-4: #A1A1AA;
  --color-secondary-dark-5: #B4B4BC;
  --color-secondary-dark-6: #C7C7CF;
  --color-secondary-dark-7: #D4D4DC;
  --color-secondary-dark-8: #E0E0E8;
  --color-secondary-dark-9: #EBEBF0;
  --color-secondary-dark-10: #F0F0F5;
  --color-secondary-dark-11: #F5F5FA;
  --color-secondary-dark-12: #FAFAFE;
  --color-secondary-dark-13: #FFFFFF;

  /* ── Dark: secondary alpha scale ── */
  --color-secondary-alpha-10: #3F3F4619;
  --color-secondary-alpha-20: #3F3F4633;
  --color-secondary-alpha-30: #3F3F464b;
  --color-secondary-alpha-40: #3F3F4666;
  --color-secondary-alpha-50: #3F3F4680;
  --color-secondary-alpha-60: #3F3F4699;
  --color-secondary-alpha-70: #3F3F46b3;
  --color-secondary-alpha-80: #3F3F46cc;
  --color-secondary-alpha-90: #3F3F46e1;

  --color-red: #F87171;
  --color-green: #34D399;
  --color-yellow: #FBBF24;
  --color-blue: #60A5FA;

  --color-body: #09090B;
  --color-box-body: #18181B;
  --color-box-header: #27272A;
  --color-box-body-highlight: #1E1B4B;
  --color-header: #18181B;
  --color-hover: rgba(255, 255, 255, 0.04);
  --color-light: rgba(255, 255, 255, 0.03);
  --color-light-border: rgba(255, 255, 255, 0.08);
  --color-card: #1E1E22;
  --color-button: #27272A;
  --color-border: #27272A;
  --color-shadow: rgba(0, 0, 0, 0.5);
  --color-secondary-bg: #1A1A1E;
  --color-secondary-nav-bg: #18181B;
  --color-nav-bg: #18181B;
  --color-code-bg: #18181B;
  --color-menu: #1E1E22;
  --color-footer: var(--color-nav-bg);
  --color-timeline: #3F3F46;
  --color-hover-opaque: #27272A;
  --color-active: rgba(255, 255, 255, 0.06);
  --color-project-column-bg: var(--color-secondary-light-4);
  --color-markup-table-row: rgba(200, 220, 255, 0.04);
  --color-markup-code-block: rgba(200, 220, 255, 0.06);
  --color-markup-code-inline: rgba(200, 220, 255, 0.07);
  --color-input-toggle-background: #3F3F46;
  --color-accent: var(--color-primary-light-1);
  --color-small-accent: var(--color-primary-light-6);
  --color-overlay-backdrop: rgba(0, 0, 0, 0.80);
  --color-shadow-opaque: #09090B;

  /* ── Dark: label backgrounds ── */
  --color-label-bg: #52525B4b;
  --color-label-hover-bg: #52525Ba0;
  --color-label-active-bg: #52525Bff;

  /* ── Dark: console ── */
  --color-console-fg: #FAFAFA;
  --color-console-fg-subtle: #A1A1AA;
  --color-console-bg: #09090B;
  --color-console-border: #27272A;
  --color-console-hover-bg: #27272A;
  --color-console-active-bg: #3F3F46;
  --color-console-menu-bg: #1E1E22;
  --color-console-menu-border: #27272A;

  --color-text-dark: #FFFFFF;
  /* ── Primary scale (extended) ── */
  --color-primary-dark-2: #4F46E5;
  --color-primary-dark-3: #4338CA;
  --color-primary-dark-4: #3730A3;
  --color-primary-dark-5: #312E81;
  --color-primary-dark-6: #1E1B4B;
  --color-primary-dark-7: #0F0D2E;
  --color-primary-light-7: #1E1B4B;
  --color-primary-alpha-30: rgba(129, 140, 248, 0.30);
  --color-primary-alpha-50: rgba(129, 140, 248, 0.50);
  --color-primary-alpha-70: rgba(129, 140, 248, 0.70);
  --color-primary-alpha-90: rgba(129, 140, 248, 0.90);
  --color-primary-hover: var(--color-primary-light-1);
  --color-primary-active: var(--color-primary-light-2);

  /* ── Named colors (Fomantic UI) ── */
  --color-orange: #EA580C;
  --color-olive: #65A30D;
  --color-teal: #0D9488;
  --color-violet: #A78BFA;
  --color-purple: #C084FC;
  --color-pink: #F472B6;
  --color-brown: #B45309;
  --color-black: #09090B;
  --color-red-light: #F87171;
  --color-orange-light: #FB923C;
  --color-yellow-light: #FBBF24;
  --color-olive-light: #A3E635;
  --color-green-light: #6EE7B7;
  --color-teal-light: #5EEAD4;
  --color-blue-light: #93C5FD;
  --color-violet-light: #C4B5FD;
  --color-purple-light: #D8B4FE;
  --color-pink-light: #F9A8D4;
  --color-brown-light: #D97706;
  --color-black-light: #3F3F46;
  --color-red-dark-1: #B91C1C;
  --color-orange-dark-1: #C2410C;
  --color-yellow-dark-1: #B45309;
  --color-olive-dark-1: #4D7C0F;
  --color-green-dark-1: #047857;
  --color-teal-dark-1: #0F766E;
  --color-blue-dark-1: #1D4ED8;
  --color-violet-dark-1: #7C3AED;
  --color-purple-dark-1: #7E22CE;
  --color-pink-dark-1: #BE185D;
  --color-brown-dark-1: #78350F;
  --color-black-dark-1: #27272A;
  --color-red-dark-2: #991B1B;
  --color-orange-dark-2: #9A3412;
  --color-yellow-dark-2: #92400E;
  --color-olive-dark-2: #365314;
  --color-green-dark-2: #064E3B;
  --color-teal-dark-2: #115E59;
  --color-blue-dark-2: #1E3A8A;
  --color-violet-dark-2: #5B21B6;
  --color-purple-dark-2: #6B21A8;
  --color-pink-dark-2: #9D174D;
  --color-brown-dark-2: #451A03;
  --color-black-dark-2: #000000;

  /* ── ANSI colors (CI/CD console) ── */
  --color-ansi-black: #18181B;
  --color-ansi-red: #F87171;
  --color-ansi-green: #34D399;
  --color-ansi-yellow: #FBBF24;
  --color-ansi-blue: #60A5FA;
  --color-ansi-magenta: #F472B6;
  --color-ansi-cyan: #2DD4BF;
  --color-ansi-white: var(--color-console-fg-subtle);
  --color-ansi-bright-black: #52525B;
  --color-ansi-bright-red: #FCA5A5;
  --color-ansi-bright-green: #6EE7B7;
  --color-ansi-bright-yellow: #FDE68A;
  --color-ansi-bright-blue: #93C5FD;
  --color-ansi-bright-magenta: #F9A8D4;
  --color-ansi-bright-cyan: #5EEAD4;
  --color-ansi-bright-white: var(--color-console-fg);

  /* ── Diff colors ── */
  --color-diff-added-linenum-bg: #14532D;
  --color-diff-added-row-bg: #052E16;
  --color-diff-added-row-border: #166534;
  --color-diff-added-word-bg: #166534;
  --color-diff-moved-row-bg: #422006;
  --color-diff-moved-row-border: #A16207;
  --color-diff-removed-linenum-bg: #7F1D1D;
  --color-diff-removed-row-bg: #450A0A;
  --color-diff-removed-row-border: #991B1B;
  --color-diff-removed-word-bg: #991B1B;
  --color-diff-inactive: #27272A;

  /* ── Status / semantic backgrounds ── */
  --color-error-border: #991B1B;
  --color-error-bg: #450A0A;
  --color-error-bg-active: #7F1D1D;
  --color-error-bg-hover: #7F1D1D;
  --color-error-text: #FCA5A5;
  --color-success-border: #047857;
  --color-success-bg: #052E16;
  --color-success-text: #6EE7B7;
  --color-warning-border: #B45309;
  --color-warning-bg: #422006;
  --color-warning-text: #FDE68A;
  --color-info-border: #1E40AF;
  --color-info-bg: #1E3A5F;
  --color-info-text: #93C5FD;

  /* ── Badge colors ── */
  --color-red-badge: #EF4444;
  --color-red-badge-bg: #EF44441a;
  --color-red-badge-hover-bg: #EF44444d;
  --color-green-badge: #10B981;
  --color-green-badge-bg: #10B9811a;
  --color-green-badge-hover-bg: #10B9814d;
  --color-yellow-badge: #FBBF24;
  --color-yellow-badge-bg: #FBBF241a;
  --color-yellow-badge-hover-bg: #FBBF244d;
  --color-orange-badge: #F97316;
  --color-orange-badge-bg: #F973161a;
  --color-orange-badge-hover-bg: #F973164d;

  /* ── Tooltip, reactions, highlights ── */
  --color-tooltip-bg: #000017f0;
  --color-tooltip-text: #FAFAF8;
  --color-reaction-bg: rgba(255, 255, 255, 0.06);
  --color-reaction-hover-bg: var(--color-primary-light-4);
  --color-reaction-active-bg: var(--color-primary-light-5);
  --color-highlight-fg: #D97706;
  --color-highlight-bg: #422006;

  /* ── Miscellaneous ── */
  --color-grey: #52525B;
  --color-grey-light: #A1A1AA;
  --color-gold: #D97706;
  --color-white: #FFFFFF;
  --color-git: #F05133;
  --color-expand-button: #3F3F46;
  --color-editor-line-highlight: var(--color-primary-light-5);
  --color-project-board-bg: var(--color-secondary-light-2);
  --color-caret: var(--color-text);
  --is-dark-theme: true;
  accent-color: var(--color-accent);
  color-scheme: dark;


  --color-text: #FAFAFA;
  --color-text-light: #A1A1AA;
  --color-text-light-2: #71717A;
  --color-text-light-3: #52525B;
  --color-placeholder-text: var(--color-text-light-3);
  --color-label-text: #FAFAFA;
  --color-nav-text: var(--color-text);
  --color-nav-hover-bg: var(--color-secondary-light-1);
  --color-primary-contrast: #FFFFFF;

  --color-input-text: #FAFAFA;
  --color-input-background: #18181B;
  --color-input-border: #27272A;
  --color-input-border-hover: var(--color-secondary-dark-1);

  --color-text-light-1: #D4D4D8;

  --yolla-gradient: linear-gradient(135deg, #6366F1, #A78BFA);
  --yolla-glow: 0 0 24px rgba(129, 140, 248, 0.25);
  --yolla-shadow: 0 1px 3px rgba(0,0,0,0.3), 0 1px 2px rgba(0,0,0,0.2);
  --yolla-shadow-lg: 0 10px 40px rgba(0,0,0,0.4), 0 2px 8px rgba(0,0,0,0.25);
}


/* ----------------------------------------------------------
   3. BASE & TYPOGRAPHY
   ---------------------------------------------------------- */

body {
  font-family: var(--yolla-font) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.011em;
}

h1, h2, h3, .ui.header {
  font-family: var(--yolla-font) !important;
  font-weight: 800;
  letter-spacing: -0.03em;
}

h4, h5, h6 {
  font-family: var(--yolla-font) !important;
  font-weight: 600;
  letter-spacing: -0.015em;
}

code, pre, .CodeMirror, .code-view, .mono, .sha, tt {
  font-family: var(--yolla-mono) !important;
}

a { transition: color 0.15s var(--yolla-ease); }

::selection {
  background: var(--color-primary);
  color: #FFFFFF;
}

/* Page entrance animation */
.page-content {
  animation: yollaEnter 0.3s var(--yolla-ease) both;
  position: relative;
  z-index: 1;
}

@keyframes yollaEnter {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}


/* ----------------------------------------------------------
   4. NAVIGATION — Glass morphism
   No height or layout changes. Glass + typography only.
   ---------------------------------------------------------- */

#navbar,
.ui.secondary.menu.navbar,
.ui.top.secondary.menu {
  backdrop-filter: blur(16px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
  background: rgba(255, 255, 255, 0.82) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02) !important;
  position: relative;
  z-index: 30;
}

/* Prevent navbar from clipping dropdown menus */
#navbar {
  overflow: visible !important;
}

[data-theme="dark"] #navbar,
[data-theme="dark"] .ui.secondary.menu.navbar,
[data-theme="dark"] .ui.top.secondary.menu {
  background: rgba(9, 9, 11, 0.82) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

#navbar .item,
.ui.secondary.menu .item {
  font-family: var(--yolla-font);
  font-weight: 500;
  transition: color 0.15s var(--yolla-ease), background 0.15s var(--yolla-ease);
}

#navbar .item.active,
.ui.secondary.menu .item.active {
  font-weight: 700;
}

#navbar img.avatar,
#navbar .ui.avatar.image {
  border-radius: var(--yolla-r-full) !important;
  border: 2px solid var(--color-border);
  transition: border-color 0.2s var(--yolla-ease), box-shadow 0.2s var(--yolla-ease);
}

#navbar img.avatar:hover,
#navbar .ui.avatar.image:hover {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-alpha-10);
}

/* Dropdown flyouts — glass */
#navbar .ui.dropdown .menu {
  border-radius: var(--yolla-r-lg) !important;
  box-shadow: var(--yolla-shadow-lg) !important;
  border: 1px solid var(--color-border) !important;
  padding: 4px !important;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  background: rgba(255, 255, 255, 0.92) !important;
  z-index: 1000;
}

/* Ensure navbar dropdown triggers are clickable above page content */
#navbar .ui.dropdown {
  position: relative;
  z-index: 31;
  overflow: visible !important;
}

[data-theme="dark"] #navbar .ui.dropdown .menu {
  background: rgba(24, 24, 27, 0.92) !important;
}

#navbar .ui.dropdown .menu .item {
  border-radius: var(--yolla-r) !important;
  font-family: var(--yolla-font);
  transition: background 0.1s var(--yolla-ease);
}

/* Notification badge — gradient */
.notification_count {
  background: var(--yolla-gradient) !important;
  font-family: var(--yolla-font);
  font-weight: 700;
  font-size: 0.7rem;
  border-radius: var(--yolla-r-full) !important;
}

/* Yolla custom nav items */
.yolla-nav-item {
  display: flex !important;
  align-items: center;
  gap: 6px;
  font-weight: 500;
}


/* ----------------------------------------------------------
   5. REPOSITORY PAGES
   ---------------------------------------------------------- */

#repo-files-table {
  border-radius: var(--yolla-r-lg);
  overflow: hidden;
  border: 1px solid var(--color-border);
  box-shadow: var(--yolla-shadow);
}

#repo-files-table thead th {
  font-family: var(--yolla-font);
  font-weight: 600;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

#repo-files-table tbody tr {
  transition: background 0.1s var(--yolla-ease);
}

/* Markdown / README */
.render-content.markup {
  font-family: var(--yolla-font) !important;
  line-height: 1.75;
  font-size: 0.95rem;
}

.render-content.markup h1,
.render-content.markup h2,
.render-content.markup h3 {
  font-weight: 800;
  letter-spacing: -0.03em;
}

.render-content.markup h1 {
  font-size: 1.9rem;
  padding-bottom: 0.35em;
  border-bottom: 2px solid var(--color-border);
}

.render-content.markup h2 {
  font-size: 1.5rem;
  padding-bottom: 0.25em;
  border-bottom: 1px solid var(--color-border);
}

.render-content.markup h3 { font-size: 1.2rem; }

.render-content.markup code:not(pre code) {
  font-family: var(--yolla-mono) !important;
  font-size: 0.86em;
  padding: 2px 6px;
  border-radius: 5px;
  background: var(--color-primary-alpha-10);
}

.render-content.markup pre {
  border-radius: var(--yolla-r);
  border: 1px solid var(--color-border);
  box-shadow: var(--yolla-shadow);
}

.render-content.markup pre code {
  font-family: var(--yolla-mono) !important;
  font-size: 13px;
  line-height: 1.65;
}

.render-content.markup blockquote {
  border-left: 3px solid var(--color-primary);
  background: var(--color-primary-alpha-10);
  border-radius: 0 var(--yolla-r) var(--yolla-r) 0;
  padding: 10px 16px;
  margin: 16px 0;
}

.render-content.markup table th,
.render-content.markup table td {
  border: 1px solid var(--color-border);
  padding: 8px 14px;
}


/* ----------------------------------------------------------
   6. CODE VIEW & DIFFS
   ---------------------------------------------------------- */

.code-view {
  border-radius: var(--yolla-r-lg);
  overflow: hidden;
  border: 1px solid var(--color-border);
  box-shadow: var(--yolla-shadow);
}

.code-view .lines-num span { user-select: none; font-size: 12px; }

.diff-file-box {
  border: 1px solid var(--color-border) !important;
  border-radius: var(--yolla-r-lg) !important;
  overflow: hidden;
  margin-bottom: 12px;
  box-shadow: var(--yolla-shadow);
}

.diff-file-header {
  font-family: var(--yolla-font);
  font-weight: 600;
  font-size: 0.85rem;
}


/* ----------------------------------------------------------
   7. ISSUES & PULL REQUESTS
   ---------------------------------------------------------- */

.issue.list > .item,
.flex-item {
  transition: background 0.1s var(--yolla-ease);
}

/* Color-coded left borders */
.issue.list > .item.open {
  border-left: 3px solid var(--color-primary) !important;
}

.issue.list > .item.closed {
  border-left: 3px solid var(--color-text-light-2) !important;
  opacity: 0.6;
}

.issue.list > .item.is-pull {
  border-left: 3px solid var(--color-green) !important;
}

/* Label pills */
.ui.label, a.ui.label {
  border-radius: var(--yolla-r-full) !important;
  font-family: var(--yolla-font) !important;
  font-size: 0.73rem !important;
  font-weight: 600 !important;
  padding: 2px 10px !important;
}

/* Comment cards */
.timeline-item .comment {
  border-radius: var(--yolla-r-lg) !important;
  overflow: hidden;
  box-shadow: var(--yolla-shadow);
}


/* ----------------------------------------------------------
   8. BUTTONS — Gradient primary, clean secondary
   ---------------------------------------------------------- */

.ui.primary.button,
.ui.primary.buttons .button,
button.ui.primary {
  background: var(--yolla-gradient) !important;
  color: #FFFFFF !important;
  border: none !important;
  border-radius: var(--yolla-r) !important;
  font-family: var(--yolla-font) !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 8px rgba(79, 70, 229, 0.25);
  transition: transform 0.12s var(--yolla-ease), box-shadow 0.12s var(--yolla-ease);
}

.ui.primary.button:hover {
  transform: translateY(-1px);
  box-shadow: var(--yolla-glow), 0 4px 16px rgba(79, 70, 229, 0.3);
}

.ui.primary.button:active { transform: none; }

.ui.button, .ui.basic.button {
  border-radius: var(--yolla-r) !important;
  font-family: var(--yolla-font) !important;
  font-weight: 500 !important;
  transition: all 0.12s var(--yolla-ease);
}

.ui.negative.button, .ui.red.button {
  background: var(--color-red) !important;
  color: #FFFFFF !important;
  border: none !important;
}

.ui.green.button {
  background: var(--color-green) !important;
  color: #FFFFFF !important;
  border: none !important;
}

/* Inputs — clean with indigo focus ring */
input[type="text"], input[type="password"], input[type="email"],
input[type="search"], textarea, .ui.input input,
.ui.form input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.ui.form textarea, .ui.form select {
  border-radius: var(--yolla-r) !important;
  font-family: var(--yolla-font) !important;
  transition: border-color 0.15s var(--yolla-ease), box-shadow 0.15s var(--yolla-ease);
}

input:focus, textarea:focus,
.ui.input input:focus, .ui.form input:focus, .ui.form textarea:focus {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 3px var(--color-primary-alpha-10) !important;
  outline: none !important;
}


/* ----------------------------------------------------------
   9. DASHBOARD & CARDS — Hover elevation
   ---------------------------------------------------------- */

.explore .repo-search-result,
.repo-card,
.ui.repository.list .item {
  border-radius: var(--yolla-r-lg) !important;
  box-shadow: var(--yolla-shadow);
  transition: transform 0.2s var(--yolla-ease), box-shadow 0.2s var(--yolla-ease);
  position: relative;
}

.explore .repo-search-result:hover,
.repo-card:hover,
.ui.repository.list .item:hover {
  transform: translateY(-2px);
  box-shadow: var(--yolla-shadow-lg);
}

.ui.segment {
  border-radius: var(--yolla-r-lg) !important;
  box-shadow: var(--yolla-shadow) !important;
}

/* Tabs */
.ui.secondary.pointing.menu .item {
  font-family: var(--yolla-font);
  font-weight: 500;
  transition: color 0.12s var(--yolla-ease);
}

.ui.secondary.pointing.menu .item.active {
  font-weight: 700;
}

.ui.pagination.menu .item {
  border-radius: var(--yolla-r) !important;
  font-family: var(--yolla-font);
}

.ui.pagination.menu .item.active {
  background: var(--yolla-gradient) !important;
  color: #FFFFFF !important;
  border-color: transparent !important;
}

/* Heatmap — indigo gradient */
.heatmap .is-color-1 { fill: var(--color-primary-alpha-10) !important; }
.heatmap .is-color-2 { fill: var(--color-primary-alpha-20) !important; }
.heatmap .is-color-3 { fill: var(--color-primary-alpha-40) !important; }
.heatmap .is-color-4 { fill: var(--color-primary-alpha-60) !important; }
.heatmap .is-color-5 { fill: var(--color-primary-alpha-80) !important; }


/* ----------------------------------------------------------
   10. KANBAN BOARDS
   ---------------------------------------------------------- */

.project-column {
  border-radius: var(--yolla-r-lg);
}

.project-column .board-card,
.project-column .card {
  border-radius: var(--yolla-r) !important;
  box-shadow: var(--yolla-shadow);
  cursor: grab;
  transition: transform 0.12s var(--yolla-ease), box-shadow 0.12s var(--yolla-ease);
}

.project-column .board-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--yolla-shadow-lg);
}

.project-column .board-card:active { cursor: grabbing; }


/* ----------------------------------------------------------
   11. THEME TOGGLE
   ---------------------------------------------------------- */

#yolla-theme-toggle {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 42px;
  height: 42px;
  border-radius: var(--yolla-r-full);
  background: var(--color-box-body);
  border: 1px solid var(--color-border);
  box-shadow: var(--yolla-shadow-lg);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  transition: all 0.2s var(--yolla-ease);
  color: var(--color-text-light);
}

#yolla-theme-toggle:hover {
  box-shadow: var(--yolla-glow);
  transform: translateY(-2px) scale(1.05);
  border-color: var(--color-primary);
  color: var(--color-primary);
}


/* ----------------------------------------------------------
   12. MODAL & DIMMER
   ---------------------------------------------------------- */

.ui.dimmer {
  background: rgba(0, 0, 0, 0.4) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.ui.modal {
  border-radius: var(--yolla-r-lg) !important;
  box-shadow: var(--yolla-shadow-lg) !important;
  animation: yollaModalIn 0.25s var(--yolla-ease);
}

@keyframes yollaModalIn {
  from { opacity: 0; transform: scale(0.96) translateY(8px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}


/* ----------------------------------------------------------
   13. SCROLLBAR
   ---------------------------------------------------------- */

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: var(--yolla-r-full);
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--color-text-light-2);
  background-clip: padding-box;
}


/* ----------------------------------------------------------
   14. MISCELLANEOUS
   ---------------------------------------------------------- */

.ui.message { border-radius: var(--yolla-r) !important; }
.footer { border-top: 1px solid var(--color-border); background: var(--color-footer, var(--color-nav-bg)); }

/* ----------------------------------------------------------
   15. FOMANTIC UI — Background fixes
   Ensure menus, segments, and containers use theme variables
   instead of Fomantic defaults or unresolved values.
   ---------------------------------------------------------- */

/* Menus: pagination, borderless, attached */
.ui.menu:not(.secondary):not(.pointing):not(.tabular):not(.vertical) {
  background: var(--color-menu) !important;
}

.ui.secondary.menu {
  background: transparent !important;
}

/* Attached segments and menus */
.ui.attached.segment,
.ui.attached.menu,
.ui.top.attached.menu {
  background: var(--color-box-body) !important;
}

.ui.attached.header {
  background: var(--color-box-header) !important;
}

/* Cards and raised segments */
.ui.card,
.ui.cards > .card {
  background: var(--color-box-body) !important;
}

.ui.card > .content,
.ui.cards > .card > .content {
  background: var(--color-box-body) !important;
}

/* List items in menus */
.ui.list .item,
.ui.relaxed.list > .item {
  background: transparent;
}

/* Dividing headers */
.ui.dividing.header {
  border-bottom-color: var(--color-border) !important;
}

/* Tabular menu (repo tabs, etc) */
.ui.tabular.menu {
  background: transparent !important;
}

.ui.tabular.menu .item {
  background: var(--color-menu) !important;
}

.ui.tabular.menu .item.active {
  background: var(--color-box-body) !important;
}

/* Vertical menus (sidebar) */
.ui.vertical.menu {
  background: var(--color-menu) !important;
}

/* Selection / dropdown */
.ui.selection.dropdown,
.ui.dropdown .menu {
  background: var(--color-box-body) !important;
}

.ui.dropdown .menu > .item {
  background: transparent !important;
}

.ui.dropdown .menu > .item:hover {
  background: var(--color-hover) !important;
}

[data-tooltip]::after {
  border-radius: var(--yolla-r) !important;
  font-family: var(--yolla-font) !important;
  font-size: 0.8rem;
}

:focus-visible {
  outline: 2px solid var(--color-primary) !important;
  outline-offset: 2px;
}

.ui.loader::after {
  border-color: var(--color-primary) transparent transparent transparent !important;
}

.milestone .progress .bar {
  background: var(--yolla-gradient) !important;
  border-radius: var(--yolla-r-full);
}

.ui.checkbox input:checked ~ label::before,
.ui.toggle.checkbox input:checked ~ label::before {
  background: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
}

@media print {
  #navbar, .footer, #yolla-theme-toggle { display: none !important; }
  body { background: white !important; color: black !important; }
}


/* ----------------------------------------------------------
   16. TIPPY.JS TOOLTIPS
   Gitea uses Tippy.js for tooltips — ensure themed backgrounds.
   ---------------------------------------------------------- */

.tippy-box {
  background: var(--color-tooltip-bg) !important;
  color: var(--color-tooltip-text) !important;
  border-radius: var(--yolla-r) !important;
  font-family: var(--yolla-font) !important;
  font-size: 0.8rem;
  box-shadow: var(--yolla-shadow-lg) !important;
}

.tippy-box .tippy-content {
  padding: 4px 8px;
}

.tippy-box[data-placement^="top"] > .tippy-arrow::before { border-top-color: var(--color-tooltip-bg) !important; }
.tippy-box[data-placement^="bottom"] > .tippy-arrow::before { border-bottom-color: var(--color-tooltip-bg) !important; }
.tippy-box[data-placement^="left"] > .tippy-arrow::before { border-left-color: var(--color-tooltip-bg) !important; }
.tippy-box[data-placement^="right"] > .tippy-arrow::before { border-right-color: var(--color-tooltip-bg) !important; }

/* Fomantic UI popups — same treatment */
.ui.popup {
  background: var(--color-box-body) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--yolla-r-lg) !important;
  box-shadow: var(--yolla-shadow-lg) !important;
  font-family: var(--yolla-font) !important;
  color: var(--color-text) !important;
}

.ui.popup::before {
  background: var(--color-box-body) !important;
  border-color: var(--color-border) !important;
}

@media (prefers-reduced-motion: reduce) {
  .page-content { animation: none; }
  .ui.modal { animation: none; }
  * { transition-duration: 0.01ms !important; }
}