Add header with background-color

css.css

@@ -1,4 +1,6 @@
 :root {
+    color-scheme: light dark;
+
     --primary: #cc2027;
     --primary-darken: #8E161B;
     --primary-lighten: #D64C52;
@@ -33,10 +35,22 @@
     --background-color-darken: light-dark(#B2AFAF, #100E0E);
     --background-color-lighten: light-dark(#FFFBFB, #454343);
 
+    --header-background-color: light-dark(#171414, #fffbfb);
+    --header-background-color-darken: light-dark(#100E0E, #B2AFAF);
+    --header-background-color-lighten: light-dark(#454343, #FFFBFB);
+
+    --header-text-color: light-dark(#fffbfb, #171414);
+    --header-text-color-secondary: #ffffffb3;
+    --header-text-color-disable: light-dark(#ffffff80, #454343);
+
     --text-color: light-dark(#171414, #fffbfb);
     --text-color-secondary: #ffffffb3;
     --text-color-disable: light-dark(#454343, #ffffff80);
 
+    --text-color-inverse: light-dark(#fffbfb, #171414);
+    --text-color-secondary-inverse: #ffffffb3;
+    --text-color-disable-inverse: light-dark(#ffffff80, #454343);
+
     --h1-color: var(--primary);
     --h2-color: #c33d35;
     --h3-color: #b94f44;
@@ -604,4 +618,25 @@
 [role=link].info:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) {
     --pico-color: var(--pico-info-hover);
     --pico-underline: var(--pico-info-hover-underline)
+}
+
+.header,
+.header>* {
+    background-color: var(--header-background-color) !important;
+    color: var(--header-text-color) !important;
+}
+
+.header nav[aria-label="breadcrumb"] ul li:not(:last-child)::after,
+.header hgroup> :not(:first-child):last-child {
+    color: var(--header-text-color-disable);
+}
+
+.flex {
+    display: flex;
+    gap: 1em;
+    padding: 1em;
+
+    img {
+        height: fit-content;
+    }
 }

index.html

@@ -46,7 +46,41 @@
                 <li><a href="#article">Article/card</a></li>
             </ul>
         </nav>
+
+        <nav aria-label="breadcrumb">
+            <ul>
+                <li><a href="#">Home</a></li>
+                <li><a href="#">Services</a></li>
+                <li>Design</li>
+            </ul>
+        </nav>
+
     </header>
+
+    <header class="header container">
+        <hgroup class="flex">
+            <img src="logo.png" width="40px">
+            <h1>Pico</h1>
+            <p>A pure HTML example, without dependencies.</p>
+        </hgroup>
+
+        <nav aria-label="breadcrumb">
+            <ul>
+                <li><a href="#">Home</a></li>
+                <li><a href="#">Services</a></li>
+                <li>Design</li>
+            </ul>
+        </nav>
+
+        <p>
+            Lorem ipsum dolor sit amet consectetur <a href=""> adipisicing elit</a>. Odit dolore dolorum vitae
+            necessitatibus, facere
+            reprehenderit ipsa vero quaerat, obcaecati nihil consequatur animi. Perferendis fuga possimus ducimus, iure
+            ipsa nisi quidem?
+        </p>
+
+    </header>
+
     <!-- ./ Header -->
 
     <!-- Main -->