Redmine Theme Colors Optimization

1. 1Fokus auf lokales Font-Hosting (Inter, Hanken Grotesk) per WOFF2 zur Einhaltung von Datenschutz und Performance.
2. 2Kaskadierende SCSS-Architektur mit _fonts.scss, _custom-variables.scss und modifizierter _header.scss.
3. 3Strikte Trennung von Farbdefinitionen, semantischem Mapping und Kontrastanforderungen nach WCAG AA.
4. 4Header-Neugestaltung inklusive Logoeinbindung über CSS-Hintergrundgrafiken und Flexbox bei unverändertem HTML-Markup.
5. 5Eindeutig formatierte Ausgabeanweisungen in drei separaten Codeblöcken.

# **Expert SCSS Theme Refactor & Modernization**

## **Persona**

You are a senior front-end architect with elite-level expertise in modern SCSS, UI/UX modernization, web accessibility (WCAG AA), and theming complex web applications. You write clean, maintainable, and highly professional code that follows best practices for performance and scalability.

## **High-Level Objective**

Perform a comprehensive visual overhaul of a web application's theme. Your primary tasks are to define locally-hosted fonts, create a custom SCSS override file, implement a new color palette, establish a professional typography system, and redesign the application header to include a logo—all without modifying the underlying HTML.

---

## **Core Context & SCSS Architecture**

The application's styling is controlled by a series of SCSS partials imported into a main `application.scss` file. The import order is critical for the cascade:

1.  **`_fonts.scss`**: This file contains all `@font-face` definitions for locally-hosted fonts.
2.  **`_custom-variables.scss`**: This is the file you will create. It contains all our custom variable overrides.
3.  **`_variables.scss`**: The original theme's default variables. Because our custom file is loaded first, its values take precedence.
4.  **Component Partials (`_header.scss`, etc.)**: All other theme components that use the variables.

Your output must be segmented into three distinct, clearly labeled parts: the content for `_fonts.scss`, the content for `_custom-variables.scss`, and the additional rules for `_header.scss`.

---

## **Detailed Requirements**

### **Part 1: Local Font Implementation (`_fonts.scss`)**

The theme must use locally-hosted web fonts for privacy, reliability, and performance. Generate the complete SCSS content for a `_fonts.scss` file.

* **Assumption**: The necessary variable WOFF2 font files have been downloaded and are located in a `../fonts/` directory relative to the final compiled CSS file.
* **Instructions**: Create `@font-face` rules for **Hanken Grotesk** (for headings) and **Inter** (for UI text). Use the `font-display: swap;` property and configure them as variable fonts to support a full range of weights.

### **Part 2: Custom Theme Overrides (`_custom-variables.scss`)**

Create the complete content for the new `_custom-variables.scss` file. It must be perfectly formatted, well-commented, and logically structured.

#### **1. File Header**
Begin with a clear comment block explaining the file's purpose (e.g., "Custom variable overrides for the corporate theme").

#### **2. Color System**
* **Corporate Brand Colors**:
    * `$brand-primary-light: #66C4E1;`
    * `$brand-primary-dark: #1B7A95;`
* **Base & Content Colors**:
    * `$body-bg: #FFFFFF;`
    * `$text-color: #0a0a0a;`
* **Professional Web App Palette**: Redefine the core color variables (`$blue`, `$green`, `$red`, etc.) using the hex codes from the provided "Professional Web Application Color System - 2025 Update".

    ```scss
    // ==========================================================================
    // Professional Web Application Color System - 2025 Update
    // ==========================================================================
    $blue:    #0D47A1; // Primary actions, branding
    $indigo:  #303F9F; // Secondary brand color
    $green:   #2E7D32; // Success states
    $yellow:  #F9A825; // Warnings, pending
    $red:     #B71C1C; // Error, destructive actions
    $purple:  #6A1B9A; // Special highlights
    $teal:    #00695C; // Informational accents
    $orange:  #E65100; // High-impact accents
    $pink:    #AD1457; // Categorical tags

    // --- Neutral Grayscale System ---
    $gray-900: #212121; // Primary text
    $gray-700: #616161; // Secondary text
    $gray-400: #BDBDBD; // Borders, dividers
    $gray-200: #EEEEEE; // Hover states
    $gray-100: #F5F5F5; // Page background
    $white:    #FFFFFF; // Surface backgrounds
    ```
* **Semantic Mapping**: Thoughtfully remap the application's semantic variables (`$brand-primary`, `$brand-success`, `$brand-danger`, `$header-bg`, etc.) to use the appropriate colors from your new palette. `$brand-primary` should use the new `$blue`, and `$header-bg` should use a corporate brand color.

#### **3. Typography System**
* **Font Family Variables**:
    * `$font-family-sans-serif`: Use **Inter**. Justify this choice in a comment (e.g., `// Highly legible at small UI sizes, pairs excellently with Hanken Grotesk.`).
    * `$font-family-monospace`: Use **JetBrains Mono**. Justify this choice (e.g., `// Developer-focused font with high readability for code.`).
* **Sizing & Accessibility**:
    * set the base font size for better readability by setting `$font-size-base: 14px;`.
    * Ensure typography choices produce strong contrast. Re-evaluate variables like `$link-color` to guarantee they meet **WCAG AA contrast ratios** against their common backgrounds.
* **Header Logo Flag**:
    * Set `$use-logo: true;` to enable the theme's built-in logic for logo spacing.

### **Part 3: Header Component Styling (`_header.scss` additions)**

Provide a separate, well-commented SCSS code block intended for a component-specific file like `_header.scss`.

#### **1. Header HTML Structure (Reference Only - DO NOT CHANGE)**
Your CSS must target this exact, unchangeable HTML structure:
```html
<div id="header">
    <a href="#" class="mobile-toggle-button js-flyout-menu-toggle-button"></a>
    <div id="quick-search">
        </div>
    <h1>webconsulting Tracker</h1>
</div>
```

#### **2. SCSS Implementation**
* **Logo Injection**: Inject the logo from `opale/images/logo/logo.png` as a `background-image` directly on the `#header` element.
* **Layout and Spacing**:
    * Use `background-position`, `background-repeat`, and `background-size: contain;` to place the logo cleanly on the far left, vertically centered.
    * Apply sufficient `padding-left` to the `#header` to create dedicated space for the logo, pushing all child content to the right so it does not overlap the background image.
    * Use flexbox on the `#header` container to properly align its children (like `h1` and `#quick-search`) and manage spacing for a modern, robust layout.
* **Heading Font**: Specifically apply the `Hanken Grotesk` font family to the `#header h1` element.

---

### **Reference Code: `_variables.scss`**

```scss
// [The entire content of the user's _variables.scss file would be pasted here]
```

---

### **Final Deliverables**

Please provide your response in three distinct, clearly labeled Markdown code blocks:

1.  **`_fonts.scss`**: The complete code for the font definitions.
2.  **`_custom-variables.scss`**: The complete code for the theme variable overrides.
3.  **`_header.scss` Additions**: The new rules for styling the header component.