La til figma styling med komponenter og theme. Endret litt på App.tsx…

frontend/src/App.css

@@ -1,5 +1,5 @@
 /* Hjemskjerm – styling etter Figma (Handlelappen – notatbok).
-   Farger og skrift kommer fra tema.css. */
+   Farger og skrift kommer fra styles/theme.css. */
 
 #root {
   max-width: 1100px;
@@ -21,20 +21,20 @@
   max-width: 480px;
   padding: 10px 14px;
   font: 15px var(--font-ui);
-  color: var(--blekk);
-  background: var(--hvit);
-  border: 1px solid var(--blekk);
+  color: var(--text-primary);
+  background: var(--bg-surface);
+  border: 1px solid var(--border-strong);
   border-radius: 8px;
 }
 
 .search input:focus {
-  outline: 2px solid var(--bringebaer);
+  outline: 2px solid var(--text-accent);
   outline-offset: 2px;
 }
 
 .search button {
-  background: var(--bringebaer);
-  color: var(--hvit);
+  background: var(--bg-primary);
+  color: var(--text-on-dark);
   border: none;
   border-radius: 8px;
   padding: 10px 16px;
@@ -55,16 +55,16 @@
   gap: 1rem;
   align-items: center;
   padding: 0.75rem 0;
-  border-bottom: 1px solid #e5e5e5;
+  border-bottom: 1px solid var(--border-hairline);
 }
 
 .product img,
 .no-image {
   width: 64px;
   height: 64px;
   object-fit: contain;
-  background: var(--hvit);
-  border: 1px solid var(--burgunder);
+  background: var(--bg-surface);
+  border: 1px solid var(--border-brand);
   border-radius: 6px;
   flex-shrink: 0;
 }

frontend/src/App.tsx

@@ -86,7 +86,7 @@ function App() {
       )}
 
       {data && data.products.length > 0 && (
-        <ul className="product-list kort">
+        <ul>
           {data.products.map((product) => {
             const price = lowestPrice(product.prices);
             return (

frontend/src/components/badge/Badge.css

@@ -0,0 +1,27 @@
+/* Badge – fra Figma (Components → Badge) */
+.badge {
+    display: inline-flex;
+    align-items: center;
+    padding: 4px 8px;
+    border-radius: 4px;
+    font: 500 10px var(--font-mono);
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+    white-space: nowrap;
+}
+
+/* Style */
+.badge--primary {
+    background: var(--bg-primary);
+    color: var(--text-on-dark);
+}
+
+.badge--dark {
+    background: var(--bg-brand);
+    color: var(--text-on-dark);
+}
+
+.badge--tinted {
+    background: var(--bg-tint);
+    color: var(--text-brand);
+}

frontend/src/components/button/Button.css

@@ -0,0 +1,66 @@
+/* Button – mål og farger fra Figma (Components → Button) */
+.button {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    border: 1px solid transparent;
+    border-radius: 8px;
+    font: 500 14px var(--font-ui);
+    cursor: pointer;
+    transition: filter 0.15s;
+}
+
+.button:hover {
+    filter: brightness(0.95);
+}
+
+.button:focus-visible {
+    outline: 2px solid var(--text-accent);
+    outline-offset: 2px;
+}
+
+/* Størrelse */
+.button--l {
+    height: 46px;
+    padding: 0 20px;
+}
+
+.button--m {
+    height: 42px;
+    padding: 0 18px;
+}
+
+.button--s {
+    height: 36px;
+    padding: 0 14px;
+    font-size: 13px;
+}
+
+/* Type */
+.button--primary {
+    background: var(--bg-primary);
+    color: var(--text-on-dark);
+}
+
+.button--dark {
+    background: var(--bg-brand);
+    color: var(--text-on-dark);
+}
+
+.button--secondary {
+    background: var(--bg-surface);
+    color: var(--text-primary);
+    border-color: var(--border-hairline);
+}
+
+.button--tinted {
+    background: var(--bg-tint);
+    color: var(--text-brand);
+}
+
+/* Liten teller, f.eks. «Min lapp 08» */
+.button__count {
+    font-family: var(--font-mono);
+    font-size: 12px;
+    opacity: 0.8;
+}

frontend/src/components/card/Card.css

@@ -0,0 +1,15 @@
+/* Kort: hvit flate med burgunder kant og skarp skygge */
+.card {
+    background: var(--bg-surface);
+    color: var(--text-primary);
+    border: 1px solid var(--border-brand);
+    border-radius: 10px;
+    box-shadow: 3px 3px 0 var(--border-brand);
+    padding: 16px;
+    transition: box-shadow 0.15s, transform 0.15s;
+}
+
+.card:hover {
+    box-shadow: 5px 5px 0 var(--border-brand);
+    transform: translate(-1px, -1px);
+}

frontend/src/components/categoryCard/CategoryCard.css

@@ -0,0 +1,74 @@
+/* CategoryCard – fra Figma (Components → CategoryCard) */
+.category-card {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    min-width: 200px;
+    max-width: 400px;
+    height: 150px;
+    padding: 20px;
+    text-align: left;
+    font-family: var(--font-ui);
+    background: var(--bg-surface);
+    border: 1.25px solid var(--border-brand);
+    border-radius: 12px;
+    box-shadow: 3px 3px 0 var(--border-brand);
+    cursor: pointer;
+    transition: box-shadow 0.15s, transform 0.15s;
+}
+
+.category-card:hover {
+    border-width: 1.75px;
+    box-shadow: 4px 4px 0 var(--border-brand);
+    transform: translate(-1px, -1px);
+}
+
+.category-card__top {
+    display: flex;
+    justify-content: space-between;
+    font: 500 10px var(--font-mono);
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+    color: var(--text-muted);
+}
+
+.category-card__top> :first-child {
+    color: var(--text-accent);
+}
+
+.category-card__bottom {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-end;
+}
+
+.category-card__name {
+    display: block;
+    font-size: 20px;
+    font-weight: 500;
+    letter-spacing: -0.02em;
+    color: var(--text-primary);
+}
+
+.category-card__description {
+    display: block;
+    margin-top: 4px;
+    font-size: 13px;
+    color: var(--text-secondary);
+}
+
+.category-card__arrow {
+    display: grid;
+    place-items: center;
+    width: 30px;
+    height: 30px;
+    border-radius: 50%;
+    background: var(--bg-muted);
+    color: var(--text-primary);
+    transition: background 0.15s, color 0.15s;
+}
+
+.category-card:hover .category-card__arrow {
+    background: var(--bg-primary);
+    color: var(--text-on-dark);
+}

frontend/src/components/checkbox/Checkbox.css

@@ -0,0 +1,40 @@
+/* Checkbox – fra Figma (Components → Checkbox)
+   Bruker en ekte <input type="checkbox">, så den virker med tastatur og skjermleser. */
+.checkbox {
+    appearance: none;
+    display: inline-grid;
+    place-items: center;
+    flex-shrink: 0;
+    width: 16px;
+    height: 16px;
+    margin: 0;
+    background: var(--bg-surface);
+    border: 1.25px solid var(--border-brand);
+    border-radius: 3px;
+    cursor: pointer;
+}
+
+.checkbox--large {
+    width: 18px;
+    height: 18px;
+}
+
+/* Avkrysset: fylt burgunder med hvit hake */
+.checkbox:checked {
+    background: var(--bg-brand);
+    border-color: var(--bg-brand);
+}
+
+.checkbox:checked::after {
+    content: "";
+    width: 8px;
+    height: 4px;
+    border-left: 1.8px solid var(--text-on-dark);
+    border-bottom: 1.8px solid var(--text-on-dark);
+    transform: translateY(-1px) rotate(-45deg);
+}
+
+.checkbox:focus-visible {
+    outline: 2px solid var(--text-accent);
+    outline-offset: 2px;
+}

frontend/src/components/filterChip/FilterChip.css

@@ -0,0 +1,22 @@
+/* FilterChip – fra Figma (Components → FilterChip)
+   Viser et aktivt filter, med × for å fjerne det. */
+.filter-chip {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    height: 28px;
+    padding: 0 10px;
+    border: none;
+    border-radius: 4px;
+    background: var(--bg-tint);
+    color: var(--text-brand);
+    font: 500 10px var(--font-mono);
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+    cursor: pointer;
+}
+
+.filter-chip__close {
+    font: 400 14px var(--font-ui);
+    line-height: 1;
+}

frontend/src/components/filterRow/FilterRow.css

@@ -0,0 +1,25 @@
+/* FilterRow – én rad i filterlisten (Components → FilterRow) */
+.filter-row {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    min-width: 160px;
+    cursor: pointer;
+}
+
+.filter-row__name {
+    flex: 1;
+    font: 400 14px var(--font-ui);
+    color: var(--text-primary);
+}
+
+.filter-row__count {
+    font: 500 10px var(--font-mono);
+    letter-spacing: 0.06em;
+    color: var(--text-muted);
+}
+
+/* Valgt: navnet blir litt tykkere */
+.filter-row:has(.checkbox:checked) .filter-row__name {
+    font-weight: 500;
+}

frontend/src/components/header/Header.css

@@ -0,0 +1,45 @@
+/* Header – fra Figma (Components → Header)
+   Inneholder Logo, enten SearchField eller navigasjon, og en Button (variant dark, size s). */
+.header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 24px;
+    height: 64px;
+    padding: 0 40px;
+    background: var(--bg-page);
+    border-bottom: 1px solid var(--border-hairline);
+}
+
+.header .search-field {
+    flex: 1;
+}
+
+.header__nav {
+    display: flex;
+    gap: 32px;
+}
+
+.header__link {
+    font: 500 11px var(--font-mono);
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+    color: var(--text-secondary);
+    text-decoration: none;
+}
+
+.header__link:hover {
+    color: var(--text-accent);
+}
+
+/* Mobil: mindre luft på sidene */
+@media (max-width: 600px) {
+    .header {
+        gap: 12px;
+        padding: 0 16px;
+    }
+
+    .header__nav {
+        display: none;
+    }
+}