cleanup and styling

12 files changed, 29 insertions, 24 deletions

diff --git a/src/components/CustomStyles.astro b/src/components/CustomStyles.astro
index 2b27954..ba1d327 100644
--- a/src/components/CustomStyles.astro
+++ b/src/components/CustomStyles.astro
@@ -25,19 +25,22 @@ import '@fontsource-variable/inter';
     --aw-font-serif: 'Inter Variable';
     --aw-font-heading: 'Inter Variable';
 
-    --aw-color-primary: rgb(1 97 239);
-    --aw-color-secondary: rgb(1 84 207);
-    --aw-color-accent: rgb(109 40 217);
+    /* New stone-inspired color palette */
+    --aw-color-primary: rgb(182 165 139); /* Ciepły granitowy beż - CTA, przyciski */
+    --aw-color-secondary: rgb(122 92 58); /* Brązowy klinkier - Hover CTA / ikonki */
+    --aw-color-accent: rgb(182 165 139); /* Ciepły granitowy beż - Akcent */
 
-    --aw-color-text-heading: rgb(0 0 0);
-    --aw-color-text-default: rgb(16 16 16);
-    --aw-color-text-muted: rgb(16 16 16 / 66%);
-    --aw-color-bg-page: rgb(255 255 255);
+    --aw-color-text-heading: rgb(43 43 43); /* Ciemny grafit - Wyraźny i kontrastowy */
+    --aw-color-text-default: rgb(43 43 43); /* Ciemny grafit - Tekst główny */
+    --aw-color-text-muted: rgb(43 43 43 / 66%); /* Ciemny grafit z przezroczystością */
+    --aw-color-bg-page: rgb(248 248 248); /* Jasny marmur - Tło główne */
+    --aw-color-bg-section: rgb(230 230 230); /* Szary piaskowiec - Sekcje/boxy */
 
     --aw-color-bg-page-dark: rgb(3 6 32);
 
     ::selection {
-      background-color: lavender;
+      background-color: rgb(182 165 139);
+      color: rgb(43 43 43);
     }
   }
 
@@ -46,18 +49,20 @@ import '@fontsource-variable/inter';
     --aw-font-serif: 'Inter Variable';
     --aw-font-heading: 'Inter Variable';
 
-    --aw-color-primary: rgb(1 97 239);
-    --aw-color-secondary: rgb(1 84 207);
-    --aw-color-accent: rgb(109 40 217);
+    /* Dark mode - keeping some stone inspiration but darker */
+    --aw-color-primary: rgb(182 165 139); /* Ciepły granitowy beż - CTA, przyciski */
+    --aw-color-secondary: rgb(122 92 58); /* Brązowy klinkier - Hover CTA / ikonki */
+    --aw-color-accent: rgb(182 165 139); /* Ciepły granitowy beż - Akcent */
 
     --aw-color-text-heading: rgb(247, 248, 248);
     --aw-color-text-default: rgb(229 236 246);
     --aw-color-text-muted: rgb(229 236 246 / 66%);
     --aw-color-bg-page: rgb(3 6 32);
+    --aw-color-bg-section: rgb(15 20 40); /* Darker section background */
 
     ::selection {
-      background-color: black;
-      color: snow;
+      background-color: rgb(182 165 139);
+      color: rgb(43 43 43);
     }
   }
 </style>
diff --git a/src/components/blog/GridItem.astro b/src/components/blog/GridItem.astro
index cd02fa8..73353ca 100644
--- a/src/components/blog/GridItem.astro
+++ b/src/components/blog/GridItem.astro
@@ -58,7 +58,7 @@ const link = APP_BLOG?.post?.isEnabled ? getPermalink(post.permalink, 'post') :
   <h3 class="text-xl sm:text-2xl font-bold leading-tight mb-2 font-heading dark:text-slate-300">
     {
       link ? (
-        <a class="inline-block hover:text-primary dark:hover:text-blue-700 transition ease-in duration-200" href={link}>
+                        <a class="inline-block hover:text-primary dark:hover:text-secondary transition ease-in duration-200" href={link}>
           {post.title}
         </a>
       ) : (
diff --git a/src/components/blog/ListItem.astro b/src/components/blog/ListItem.astro
index 6a416d6..36602f2 100644
--- a/src/components/blog/ListItem.astro
+++ b/src/components/blog/ListItem.astro
@@ -94,7 +94,7 @@ const link = APP_BLOG?.post?.isEnabled ? getPermalink(post.permalink, 'post') :
         {
           link ? (
             <a
-              class="inline-block hover:text-primary dark:hover:text-blue-700 transition ease-in duration-200"
+                              class="inline-block hover:text-primary dark:hover:text-secondary transition ease-in duration-200"
               href={link}
             >
               {post.title}
diff --git a/src/components/blog/SinglePost.astro b/src/components/blog/SinglePost.astro
index 297cca9..ac92cd3 100644
--- a/src/components/blog/SinglePost.astro
+++ b/src/components/blog/SinglePost.astro
@@ -91,7 +91,7 @@ const { post, url } = Astro.props;
       }
     </header>
     <div
-      class="mx-auto px-6 sm:px-6 max-w-3xl prose prose-md lg:prose-xl dark:prose-invert dark:prose-headings:text-slate-300 prose-headings:font-heading prose-headings:leading-tighter prose-headings:tracking-tighter prose-headings:font-bold prose-a:text-primary dark:prose-a:text-blue-400 prose-img:rounded-md prose-img:shadow-lg mt-8 prose-headings:scroll-mt-[80px] prose-li:my-0"
+      class="mx-auto px-6 sm:px-6 max-w-3xl prose prose-md lg:prose-xl dark:prose-invert dark:prose-headings:text-slate-300 prose-headings:font-heading prose-headings:leading-tighter prose-headings:tracking-tighter prose-headings:font-bold prose-a:text-primary dark:prose-a:text-primary prose-img:rounded-md prose-img:shadow-lg mt-8 prose-headings:scroll-mt-[80px] prose-li:my-0"
     >
       <slot />
     </div>
diff --git a/src/components/ui/Background.astro b/src/components/ui/Background.astro
index 1093c17..f220487 100644
--- a/src/components/ui/Background.astro
+++ b/src/components/ui/Background.astro
@@ -6,6 +6,6 @@ export interface Props {
 const { isDark = false } = Astro.props;
 ---
 
-<div class:list={['absolute inset-0', { 'bg-dark dark:bg-transparent': isDark }]}>
+<div class:list={['absolute inset-0', { 'bg-section dark:bg-dark': isDark }]}>
   <slot />
 </div>
diff --git a/src/components/ui/Headline.astro b/src/components/ui/Headline.astro
index 621b23d..6b906b0 100644
--- a/src/components/ui/Headline.astro
+++ b/src/components/ui/Headline.astro
@@ -20,7 +20,7 @@ const {
   (title || subtitle || tagline) && (
     <div class={twMerge('mb-8 md:mx-auto md:mb-12 text-center', containerClass)}>
       {tagline && (
-        <p class="text-base text-secondary dark:text-blue-200 font-bold tracking-wide uppercase" set:html={tagline} />
+        <p class="text-base text-secondary dark:text-primary font-bold tracking-wide uppercase" set:html={tagline} />
       )}
       {title && (
         <h2
diff --git a/src/components/ui/Timeline.astro b/src/components/ui/Timeline.astro
index 51e09f0..b25c9de 100644
--- a/src/components/ui/Timeline.astro
+++ b/src/components/ui/Timeline.astro
@@ -16,7 +16,7 @@ const {
   panel: panelClass = '',
   title: titleClass = '',
   description: descriptionClass = '',
-  icon: defaultIconClass = 'text-primary dark:text-slate-200 border-primary dark:border-blue-700',
+  icon: defaultIconClass = 'text-primary dark:text-slate-200 border-primary dark:border-secondary',
 } = classes;
 ---
 
diff --git a/src/components/widgets/Hero.astro b/src/components/widgets/Hero.astro
index 700468c..cbd1154 100644
--- a/src/components/widgets/Hero.astro
+++ b/src/components/widgets/Hero.astro
@@ -31,7 +31,7 @@ const {
         {
           tagline && (
             <p
-              class="text-base text-secondary dark:text-blue-200 font-bold tracking-wide uppercase intersect-once intersect-quarter motion-safe:md:opacity-0 motion-safe:md:intersect:animate-fade"
+              class="text-base text-secondary dark:text-primary font-bold tracking-wide uppercase intersect-once intersect-quarter motion-safe:md:opacity-0 motion-safe:md:intersect:animate-fade"
               set:html={tagline}
             />
           )
diff --git a/src/components/widgets/Hero2.astro b/src/components/widgets/Hero2.astro
index c6daa30..5527a91 100644
--- a/src/components/widgets/Hero2.astro
+++ b/src/components/widgets/Hero2.astro
@@ -31,7 +31,7 @@ const {
         {
           tagline && (
             <p
-              class="text-base text-secondary dark:text-blue-200 font-bold tracking-wide uppercase intersect-once motion-safe:md:intersect:animate-fade motion-safe:md:opacity-0 intersect-quarter"
+              class="text-base text-secondary dark:text-primary font-bold tracking-wide uppercase intersect-once motion-safe:md:intersect:animate-fade motion-safe:md:opacity-0 intersect-quarter"
               set:html={tagline}
             />
           )
diff --git a/src/components/widgets/HeroText.astro b/src/components/widgets/HeroText.astro
index fa3e054..be2a1b6 100644
--- a/src/components/widgets/HeroText.astro
+++ b/src/components/widgets/HeroText.astro
@@ -30,7 +30,7 @@ const {
         {
           tagline && (
             <p
-              class="text-base text-secondary dark:text-blue-200 font-bold tracking-wide uppercase intersect-once intersect-quarter motion-safe:md:opacity-0 motion-safe:md:intersect:animate-fade"
+              class="text-base text-secondary dark:text-primary font-bold tracking-wide uppercase intersect-once intersect-quarter motion-safe:md:opacity-0 motion-safe:md:intersect:animate-fade"
               set:html={tagline}
             />
           )
diff --git a/src/components/widgets/Note.astro b/src/components/widgets/Note.astro
index 3594b39..3f43881 100644
--- a/src/components/widgets/Note.astro
+++ b/src/components/widgets/Note.astro
@@ -14,7 +14,7 @@ const {
 } = Astro.props;
 ---
 
-<section class="bg-blue-50 dark:bg-slate-800 not-prose">
+<section class="bg-section dark:bg-slate-800 not-prose">
   <div class="max-w-6xl mx-auto px-4 sm:px-6 py-4 text-md text-center font-medium">
     <Icon name={icon} class="w-5 h-5 inline-block align-text-bottom font-bold" />
     <span class="font-bold" set:html={title} />
diff --git a/src/components/widgets/Steps2.astro b/src/components/widgets/Steps2.astro
index e13a377..cb6e902 100644
--- a/src/components/widgets/Steps2.astro
+++ b/src/components/widgets/Steps2.astro
@@ -61,7 +61,7 @@ function makeEmailsClickable(text: string | undefined): string {
             ? items.map(({ title: title2, description, icon }, index) => (
                 <li class="flex md:-mx-4">
                   <div class="pr-4 sm:pl-4 rtl:pr-0 rtl:pl-4 rtl:sm:pl-0 rtl:sm:pr-4">
-                    <span class="flex w-16 h-16 mx-auto items-center justify-center text-2xl font-bold rounded-full bg-blue-100 text-primary">
+                    <span class="flex w-16 h-16 mx-auto items-center justify-center text-2xl font-bold rounded-full bg-stone-piaskowiec text-primary">
                       {icon ? <Icon name={icon} class="w-6 h-6 icon-bold" /> : index + 1}
                     </span>
                   </div>