color scheme matching the company

assets/css/app.css

@@ -39,17 +39,23 @@
 @theme {
   /* light mode — Catppuccin Latte (https://catppuccin.com/palette)
    * Base #eff1f5, Mantle #e6e9ef, Surface1 #bcc0cc, Subtext1 #5c5f77,
-   * Subtext0 #6c6f85, Text #4c4f69, Blue #1e66f5. */
+   * Subtext0 #6c6f85, Text #4c4f69. Primary is the KOMPRESS logo blue
+   * (sampled from logo.jpg) rather than the Latte blue. */
   --color-surface: #eff1f5;            /* Base */
   --color-surface-alt: #e6e9ef;        /* Mantle */
   --color-on-surface: #5c5f77;         /* Subtext1 */
   --color-on-surface-strong: #4c4f69;  /* Text */
-  --color-primary: #1e66f5;            /* Blue */
+  --color-primary: #1600ff;            /* KOMPRESS logo blue */
   --color-on-primary: #eff1f5;         /* Base */
   --color-secondary: #6c6f85;          /* Subtext0 */
   --color-on-secondary: #eff1f5;       /* Base */
   --color-outline: #bcc0cc;            /* Surface1 */
   --color-outline-strong: #4c4f69;     /* Text */
+  /* CTA: solid fill for large/filled buttons + the contact block. The vivid
+   * logo blue (--color-primary) is reserved for tiny accents (links, hover
+   * tints, badges); a calmer Latte blue reads better across big surfaces. */
+  --color-cta: #1e66f5;
+  --color-on-cta: #eff1f5;
 
   /* dark mode — Gruvbox dark palette (https://github.com/morhetz/gruvbox)
    * bg0 #282828, bg1 #3c3836, bg2 #504945, fg0 #fbf1c7, fg1 #ebdbb2,
@@ -64,6 +70,9 @@
   --color-on-secondary-dark: #1d2021;       /* bg0_h */
   --color-outline-dark: #504945;            /* bg2 */
   --color-outline-dark-strong: #bdae93;     /* fg3 */
+  /* CTA in dark mode tracks the existing primary so dark buttons are unchanged. */
+  --color-cta-dark: #83a598;                /* = primary-dark */
+  --color-on-cta-dark: #1d2021;             /* = on-primary-dark */
 
   /* shared status colors (same in both modes) */
   --color-info: var(--color-sky-500);

assets/views/base.html

@@ -114,7 +114,7 @@
               placeholder="{{ t(key='search-placeholder', lang=lang | default(value='sk')) }}"
               aria-label="{{ t(key='search-placeholder', lang=lang | default(value='sk')) }}"
               class="min-w-0 flex-1 border-0 bg-surface-alt px-2.5 py-2.5 text-sm text-on-surface placeholder:text-on-surface/50 focus:outline-none dark:bg-surface-dark-alt dark:text-on-surface-dark dark:placeholder:text-on-surface-dark/50" />
-            <button type="submit" class="shrink-0 bg-primary px-5 text-sm font-bold text-on-primary transition hover:opacity-90 dark:bg-primary-dark dark:text-on-primary-dark">{{ t(key="search-button", lang=lang | default(value='sk')) }}</button>
+            <button type="submit" class="shrink-0 bg-cta px-5 text-sm font-bold text-on-cta transition hover:opacity-90 dark:bg-cta-dark dark:text-on-cta-dark">{{ t(key="search-button", lang=lang | default(value='sk')) }}</button>
           </div>
         </form>
         {% endif %}

assets/views/home/index.html

@@ -97,7 +97,7 @@
     </section>
 
     <!-- contact CTA (static, brand blue) -->
-    <section class="overflow-hidden rounded-radius bg-primary text-on-primary dark:bg-primary-dark dark:text-on-primary-dark">
+    <section class="overflow-hidden rounded-radius bg-cta text-on-cta dark:bg-cta-dark dark:text-on-cta-dark">
       <div class="p-5">
         <div class="text-xs font-bold uppercase tracking-wider opacity-80">{{ t(key="home-contact-title", lang=L) }}</div>
         <p class="mt-2.5 text-sm leading-relaxed opacity-90">{{ t(key="home-contact-text", lang=L) }}</p>
@@ -105,7 +105,7 @@
           <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M5 4h4l2 5-3 2a12 12 0 0 0 5 5l2-3 5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2Z"></path></svg>
           +421 903 410 476
         </a>
-        <a href="tel:+421903410476" class="mt-3.5 block w-full rounded-radius bg-surface px-4 py-3 text-center text-sm font-bold text-primary transition hover:opacity-90 dark:bg-surface-dark dark:text-primary-dark">{{ t(key="home-contact-cta", lang=L) }}</a>
+        <a href="tel:+421903410476" class="mt-3.5 block w-full rounded-radius bg-surface px-4 py-3 text-center text-sm font-bold text-cta transition hover:opacity-90 dark:bg-surface-dark dark:text-cta-dark">{{ t(key="home-contact-cta", lang=L) }}</a>
       </div>
     </section>
 

assets/views/macros/ui.html

@@ -49,7 +49,7 @@
 {%- elif variant == "ghost-primary" -%}{% set cls = "bg-transparent text-primary focus-visible:outline-primary dark:text-primary-dark dark:focus-visible:outline-primary-dark" -%}
 {%- elif variant == "ghost-secondary" -%}{% set cls = "bg-transparent text-secondary focus-visible:outline-secondary dark:text-secondary-dark dark:focus-visible:outline-secondary-dark" -%}
 {%- elif variant == "ghost-danger" -%}{% set cls = "bg-transparent text-danger focus-visible:outline-danger dark:text-danger dark:focus-visible:outline-danger" -%}
-{%- else -%}{% set cls = "border border-primary bg-primary text-on-primary focus-visible:outline-primary dark:border-primary-dark dark:bg-primary-dark dark:text-on-primary-dark dark:focus-visible:outline-primary-dark" -%}
+{%- else -%}{% set cls = "border border-cta bg-cta text-on-cta focus-visible:outline-cta dark:border-cta-dark dark:bg-cta-dark dark:text-on-cta-dark dark:focus-visible:outline-cta-dark" -%}
 {%- endif -%}
 {% if nowrap %}{% set wrap = "whitespace-nowrap" %}{% else %}{% set wrap = "text-balance" %}{% endif %}{% if href %}<a href="{{ href }}"{% else %}<button type="{{ type }}"{% endif %} class="inline-flex items-center justify-center gap-2 {{ wrap }} rounded-radius {{ size }} text-center font-medium tracking-wide transition hover:opacity-75 focus-visible:outline-2 focus-visible:outline-offset-2 active:opacity-100 active:outline-offset-0 disabled:cursor-not-allowed disabled:opacity-75 {{ cls }} {{ extra }}" {{ attrs | safe }}>{{ icon | safe }}{{ label }}</{% if href %}a{% else %}button{% endif %}>
 {%- endmacro button %}

assets/views/shop/_search.html

@@ -42,7 +42,7 @@
           </svg>
         </span>
       </div>
-      <button type="submit" class="shrink-0 rounded-radius bg-primary px-5 text-sm font-bold text-on-primary transition hover:opacity-90 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary dark:bg-primary-dark dark:text-on-primary-dark dark:focus-visible:outline-primary-dark">
+      <button type="submit" class="shrink-0 rounded-radius bg-cta px-5 text-sm font-bold text-on-cta transition hover:opacity-90 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-cta dark:bg-cta-dark dark:text-on-cta-dark dark:focus-visible:outline-cta-dark">
         {{ t(key="search-button", lang=L) }}
       </button>
     </div>

assets/views/shop/show.html

@@ -50,7 +50,7 @@
 
   <!-- details -->
   {% set fld = "w-full rounded-radius border border-outline bg-surface-alt px-3 py-2 text-sm text-on-surface focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary dark:border-outline-dark dark:bg-surface-dark-alt/50 dark:text-on-surface-dark dark:focus-visible:outline-primary-dark" %}
-  {% set btn = "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-radius px-5 py-2 text-sm text-center font-medium tracking-wide transition hover:opacity-75 focus-visible:outline-2 focus-visible:outline-offset-2 active:opacity-100 active:outline-offset-0 disabled:cursor-not-allowed disabled:opacity-75 border border-primary bg-primary text-on-primary focus-visible:outline-primary dark:border-primary-dark dark:bg-primary-dark dark:text-on-primary-dark dark:focus-visible:outline-primary-dark" %}
+  {% set btn = "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-radius px-5 py-2 text-sm text-center font-medium tracking-wide transition hover:opacity-75 focus-visible:outline-2 focus-visible:outline-offset-2 active:opacity-100 active:outline-offset-0 disabled:cursor-not-allowed disabled:opacity-75 border border-cta bg-cta text-on-cta focus-visible:outline-cta dark:border-cta-dark dark:bg-cta-dark dark:text-on-cta-dark dark:focus-visible:outline-cta-dark" %}
   <script id="variant-data" type="application/json">{{ variants | json_encode() | safe }}</script>
   <div class="space-y-6" x-data="productBuy(JSON.parse(document.getElementById('variant-data').textContent))">
     {% if category %}