Lay the Almanacka design foundation: tokens, type, shell

New token system in global.css (near-white surfaces, one ink-blue
accent, no sub-12px type), self-hosted Schibsted Grotesk, rewritten
primitives (buttons, fields, modal shell, segmented, disclosure,
skeleton), a borderless 56px header with an SV | EN language toggle,
an Icon component replacing glyphs, page skeletons that keep the
layout during loading, and leave-type colours moved out of TS into
CSS variables. Feature blocks keep their structure for later phases.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>

frontend/src/components/layout/layout.css

@@ -1,17 +1,17 @@
 /* Layout container */
-[data-testid='layout'] {
+.layout {
   display: flex;
   flex-direction: column;
   min-height: 100vh;
   background-color: var(--c-bg);
 }
 
-[data-testid='layout-main'] {
+.layout__main {
   flex: 1;
   max-width: var(--maxw);
   width: 100%;
   margin: 0 auto;
-  padding: var(--sp-6) var(--sp-5);
+  padding: var(--sp-6) var(--sp-5) var(--sp-7);
 }
 
 /* Dashboard & Pages */
@@ -27,12 +27,9 @@
   margin-bottom: var(--sp-5);
 }
 
-/* Sections separate by whitespace and a hairline rule, not a stack of
- * bordered/shadowed cards — every section on a page looking equally "boxed"
- * flattens the hierarchy the headline figures above them are meant to have.
- * The `<details>` accordions (plan-fold, dashboard__more-details) keep their
- * own bordered treatment in components.css since they're interactive
- * disclosure controls, not passive content groups. */
+/* Sections separate by whitespace and, where two run together, one
+ * hairline — never a stack of bordered cards. Every section looking equally
+ * "boxed" flattens the hierarchy the headline figures are meant to have. */
 .dashboard__section,
 .settings-page__section,
 .calendar__section,
@@ -42,7 +39,7 @@
   border-top: 1px solid var(--c-border);
   border-radius: 0;
   padding: var(--sp-6) 0 0;
-  margin-bottom: var(--sp-6);
+  margin-bottom: var(--sp-7);
   box-shadow: none;
 }
 
@@ -75,7 +72,7 @@
 }
 
 .dashboard__break-item {
-  padding: var(--sp-3) var(--sp-4);
+  padding: var(--sp-3) 0;
   border-bottom: 1px solid var(--c-border);
   display: flex;
   justify-content: space-between;
@@ -105,4 +102,3 @@
   padding-top: var(--sp-3);
   border-top: 1px solid var(--c-border);
 }
-