Redmine Theme Colors Optimization

1. 1Implements locally hosted variable fonts (Inter, Hanken Grotesk) using WOFF2 for privacy and performance.
2. 2Establishes a strict cascade: _fonts.scss, _custom-variables.scss, and component-specific rules in _header.scss.
3. 3Enforces semantic variable mapping and WCAG AA contrast ratios for UI elements.
4. 4Injects branding via background images and Flexbox alignment into rigid HTML header structures.
5. 5Mandates three distinct, modular code block outputs for clean file separation.

# **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.