diff --git a/style.css b/style.css
index ae9b186..8a42936 100644
--- a/style.css
+++ b/style.css
@@ -1,408 +1,378 @@
+/* ============================================================
+   Design tokens
+   ------------------------------------------------------------
+   Palette:  warm paper background, ink-dark sidebar "spine",
+             deep pine accent (not the generic AI-blue).
+   Type:     Source Serif 4 for headings (editorial, planner-like),
+             Inter for body copy, IBM Plex Mono for time/data.
+   ============================================================ */
+
+@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,500;8..60,600&family=Inter:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');
+
 :root {
+    /* Surfaces */
+    --bg: #f7f6f3;
+    --panel: #ffffff;
+    --sidebar: #15171c;
+    --sidebar-hover: #1f222a;
 
-    --bg: #f4f5f7;
-    --panel: white;
-    --sidebar: #ffffff;
-    --text: #111;
-    --muted: #666;
-    --border: #ddd;
-    --accent: #2563eb;
+    /* Text */
+    --text: #16181d;
+    --text-inverse: #eceae4;
+    --muted: #74716a;
+    --muted-inverse: #8b8e97;
 
+    /* Structure */
+    --border: #e5e2da;
+    --border-strong: #d3cfc3;
+
+    /* Accent */
+    --accent: #1f5c52;
+    --accent-hover: #164941;
+    --accent-tint: #e8efec;
+
+    /* Status (used as tint + left-bar, not solid fills) */
+    --status-confirmed: #1f5c52;
+    --status-confirmed-tint: #e8efec;
+    --status-busy: #a15c14;
+    --status-busy-tint: #f6ede1;
+    --status-private: #4b4d57;
+    --status-private-tint: #eceae7;
+
+    --danger: #ad2b38;
+
+    /* Scale */
+    --space-1: 4px;
+    --space-2: 8px;
+    --space-3: 12px;
+    --space-4: 16px;
+    --space-5: 24px;
+    --space-6: 32px;
+    --space-7: 40px;
+
+    --radius-sm: 6px;
+    --radius-md: 8px;
+    --radius-lg: 12px;
+
+    --shadow-sm: 0 1px 2px rgba(21, 23, 28, 0.06);
+    --shadow-md: 0 4px 16px rgba(21, 23, 28, 0.08);
+
+    --ease: cubic-bezier(0.4, 0, 0.2, 1);
+
+    --font-display: "Source Serif 4", Georgia, serif;
+    --font-body: Inter, system-ui, sans-serif;
+    --font-mono: "IBM Plex Mono", ui-monospace, monospace;
 }
 
-
-
 .dark {
+    --bg: #0e0f12;
+    --panel: #17191d;
+    --sidebar: #0a0b0d;
+    --sidebar-hover: #161821;
 
-    --bg: #080808;
-    --panel: #151515;
-    --sidebar: #101010;
-    --text: #eee;
-    --muted: #aaa;
-    --border: #333;
-    --accent: #38bdf8;
+    --text: #eceae4;
+    --text-inverse: #16181d;
+    --muted: #91908a;
+    --muted-inverse: #6b6d75;
 
+    --border: #2a2c31;
+    --border-strong: #3a3d43;
+
+    --accent: #4fa393;
+    --accent-hover: #63b6a5;
+    --accent-tint: #16221f;
+
+    --status-confirmed: #4fa393;
+    --status-confirmed-tint: #16221f;
+    --status-busy: #d1934f;
+    --status-busy-tint: #26200f;
+    --status-private: #9294a0;
+    --status-private-tint: #1c1d21;
+
+    --danger: #e2707c;
+
+    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
+    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4);
 }
 
-
-
 * {
     box-sizing: border-box;
 }
 
-
-
 body {
-
     margin: 0;
-
     background: var(--bg);
-
     color: var(--text);
-
-    font-family:
-        Inter,
-        system-ui,
-        sans-serif;
-
-    transition: 0.2s;
-
+    font-family: var(--font-body);
+    font-size: 14px;
+    line-height: 1.5;
+    -webkit-font-smoothing: antialiased;
+    transition: background 0.2s var(--ease), color 0.2s var(--ease);
 }
 
-
+/* ============================================================
+   Layout
+   ============================================================ */
 
 .layout {
-
     display: grid;
-
-    grid-template-columns: 260px 1fr;
-
+    grid-template-columns: 248px 1fr;
     height: 100vh;
-
-    display: none;
-
 }
 
-
 .sidebar {
-
     background: var(--sidebar);
-
-    border-right: 1px solid var(--border);
-
-    padding: 25px;
-
+    color: var(--text-inverse);
+    border-right: 1px solid rgba(255, 255, 255, 0.06);
+    padding: var(--space-5) var(--space-4);
     display: flex;
-
     flex-direction: column;
-
 }
 
-
-
 .logo {
-
     display: flex;
-
     align-items: center;
-
-    gap: 10px;
-
-    margin-bottom: 40px;
-
+    gap: var(--space-2);
+    margin-bottom: var(--space-6);
+    padding: 0 var(--space-2);
 }
 
-
-
 .logo h2 {
-
     margin: 0;
-
+    font-family: var(--font-display);
+    font-weight: 600;
+    font-size: 19px;
+    letter-spacing: -0.01em;
 }
 
-
-
 nav {
-
     display: flex;
-
     flex-direction: column;
-
-    gap: 8px;
-
+    gap: 2px;
 }
 
-
-
 nav a {
-
     cursor: pointer;
-
-    padding: 12px 15px;
-
-    border-radius: 10px;
-
-    color: var(--muted);
-
-    transition: 0.2s;
-
+    padding: 10px 14px;
+    border-radius: var(--radius-sm);
+    color: var(--muted-inverse);
+    font-size: 13.5px;
+    font-weight: 500;
+    transition: background 0.15s var(--ease), color 0.15s var(--ease);
 }
 
+nav a:hover {
+    background: var(--sidebar-hover);
+    color: var(--text-inverse);
+}
 
-
-nav a:hover,
 nav .active {
-
     background: var(--accent);
-
-    color: white;
-
+    color: #ffffff;
 }
 
-
-
 .sidebar-bottom {
-
     margin-top: auto;
-
+    padding-top: var(--space-4);
+    border-top: 1px solid rgba(255, 255, 255, 0.08);
 }
 
-
-
 button {
-
     width: 100%;
-
-    padding: 12px;
-
-    border-radius: 10px;
-
+    padding: 10px 14px;
+    border-radius: var(--radius-sm);
     border: 1px solid var(--border);
-
     background: var(--panel);
-
     color: var(--text);
-
+    font-family: var(--font-body);
+    font-size: 13.5px;
+    font-weight: 500;
     cursor: pointer;
-
-    margin-top: 8px;
-
+    margin-top: var(--space-2);
+    transition: border-color 0.15s var(--ease), background 0.15s var(--ease);
 }
 
+button:hover {
+    border-color: var(--border-strong);
+    background: var(--bg);
+}
 
+button:focus-visible,
+a:focus-visible,
+input:focus-visible {
+    outline: 2px solid var(--accent);
+    outline-offset: 2px;
+}
+
+.sidebar button {
+    background: transparent;
+    border-color: rgba(255, 255, 255, 0.12);
+    color: var(--text-inverse);
+}
+
+.sidebar button:hover {
+    background: var(--sidebar-hover);
+    border-color: rgba(255, 255, 255, 0.2);
+}
 
 /* Content */
 
 .content {
-
-    padding: 40px;
-
+    padding: var(--space-6) var(--space-7);
     overflow-y: auto;
-
 }
 
-
-
 h1 {
-
     margin-top: 0;
-
+    font-family: var(--font-display);
+    font-weight: 600;
+    font-size: 26px;
+    letter-spacing: -0.01em;
 }
 
-
-
 .card {
-
     background: var(--panel);
-
     border: 1px solid var(--border);
-
-    border-radius: 16px;
-
-    padding: 25px;
-
-    margin-top: 20px;
-
-    box-shadow:
-        0 10px 30px rgba(0,0,0,0.05);
-
+    border-radius: var(--radius-lg);
+    padding: var(--space-5);
+    margin-top: var(--space-4);
+    box-shadow: var(--shadow-sm);
 }
 
-
-
 /* forms */
 
 input {
-
     width: 100%;
-
-    padding: 12px;
-
-    border-radius: 10px;
-
+    padding: 10px 12px;
+    border-radius: var(--radius-sm);
     border: 1px solid var(--border);
-
     background: var(--bg);
-
     color: var(--text);
-
-    margin-top: 8px;
-
+    font-family: var(--font-body);
+    font-size: 13.5px;
+    margin-top: var(--space-2);
+    transition: border-color 0.15s var(--ease);
 }
 
-
+input:focus {
+    border-color: var(--accent);
+}
 
 form {
-
     display: flex;
-
     flex-direction: column;
-
 }
 
-
-
 .muted {
-
     color: var(--muted);
-
 }
 
-
-
 .error {
-
-    color: #e11d48;
-
+    color: var(--danger);
 }
 
-
-
 /* list items */
 
 .list-item {
-
-    padding: 10px 15px;
-
+    padding: 10px 14px;
     border: 1px solid var(--border);
-
-    border-radius: 10px;
-
-    margin-top: 10px;
-
+    border-radius: var(--radius-md);
+    margin-top: var(--space-2);
+    transition: border-color 0.15s var(--ease);
 }
 
-
+.list-item:hover {
+    border-color: var(--border-strong);
+}
 
 /* event actions */
 
 .event-actions {
-
     display: flex;
-
-    gap: 10px;
-
-    margin-top: 15px;
-
+    gap: var(--space-2);
+    margin-top: var(--space-4);
 }
 
-
 .event-actions button {
-
     margin-top: 0;
-
 }
 
-
-
 /* calendar */
 
 .calendar-header {
-
     display: flex;
-
     align-items: center;
-
     justify-content: space-between;
-
 }
 
-
 .calendar-header h3 {
-
     margin: 0;
-
+    font-family: var(--font-display);
+    font-weight: 600;
+    font-size: 17px;
     text-transform: capitalize;
-
 }
 
-
 .calendar-nav-btn {
-
     width: auto;
-
-    padding: 8px 14px;
-
+    padding: 6px 12px;
     margin-top: 0;
-
 }
 
-
 .calendar-legend {
-
     display: flex;
-
-    gap: 18px;
-
-    margin-top: 14px;
-
+    gap: var(--space-5);
+    margin-top: var(--space-4);
     font-size: 12px;
-
     color: var(--muted);
-
 }
 
-
 .legend-item {
-
     display: flex;
-
     align-items: center;
-
     gap: 6px;
-
 }
 
-
 .legend-dot {
-
-    width: 10px;
-
-    height: 10px;
-
-    border-radius: 50%;
-
+    width: 8px;
+    height: 8px;
+    border-radius: 2px;
     display: inline-block;
-
 }
 
-
 /* week grid */
 
 .calendar-week {
     display: flex;
-    margin-top: 16px;
+    margin-top: var(--space-4);
     overflow-x: auto;
 }
 
-
 .calendar-gutter {
-    width: 55px;
+    width: 52px;
     flex-shrink: 0;
     padding-top: 0px;
 }
 
-
 .calendar-hour-label {
-    height: 48px; /* 2 uur = 48px */
-    font-size: 11px;
+    height: 48px;
+    font-family: var(--font-mono);
+    font-size: 10.5px;
     color: var(--muted);
     text-align: right;
-    padding-right: 8px;
+    padding-right: var(--space-2);
     display: flex;
     justify-content: flex-end;
     align-items: flex-start;
     transform: translateY(-6px);
 }
 
-
 .calendar-days {
     display: flex;
     flex: 1;
     min-width: 700px;
 }
 
-
 .calendar-day-column {
     flex: 1;
     display: flex;
@@ -410,138 +380,110 @@ form {
     border-left: 1px solid var(--border);
 }
 
-
 .calendar-day-header {
     height: 32px;
     text-align: center;
     padding: 6px 0;
-    font-size: 12px;
+    font-family: var(--font-mono);
+    font-size: 11px;
+    letter-spacing: 0.02em;
+    text-transform: uppercase;
     color: var(--muted);
 }
 
-
 .calendar-day-track {
     position: relative;
-
-    height: 576px; /* 12 uur zichtbaar × 48px */
-    
-    background-image:
-        repeating-linear-gradient(
-            to bottom,
-            var(--border) 0,
-            var(--border) 1px,
-            transparent 1px,
-            transparent 48px
-        );
+    height: 576px; /* 12 uur zichtbaar x 48px */
+    background-image: repeating-linear-gradient(
+        to bottom,
+        var(--border) 0,
+        var(--border) 1px,
+        transparent 1px,
+        transparent 48px
+    );
 }
 
-
 .calendar-event {
     position: absolute;
-
     left: 4px;
     right: 4px;
-
-    border-radius: 6px;
-
-    padding: 3px 6px;
-
+    border-radius: var(--radius-sm);
+    padding: 4px 8px 4px 9px;
     font-size: 11px;
-
-    color: white;
-
+    color: var(--text);
     cursor: pointer;
-
     overflow: hidden;
-
-    box-shadow:
-        0 2px 6px rgba(0,0,0,0.25);
-
-    opacity: 0.92;
-
-    border: 1px solid rgba(255,255,255,0.4);
+    border-left: 3px solid transparent;
+    background: var(--panel);
+    box-shadow: var(--shadow-sm);
+    transition: box-shadow 0.15s var(--ease);
 }
 
+.calendar-event:hover {
+    box-shadow: var(--shadow-md);
+}
 
 .calendar-event-time {
     display: block;
-    font-size: 10px;
-    opacity: 0.85;
+    font-family: var(--font-mono);
+    font-size: 9.5px;
+    color: var(--muted);
 }
 
-
 .calendar-event-title {
     display: block;
     font-weight: 600;
-
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
 }
 
 .event-confirmed {
-
-    background: #16a34a;
-
+    background: var(--status-confirmed-tint);
+    border-left-color: var(--status-confirmed);
 }
 
-
 .event-busy {
-
-    background: #f97316;
-
+    background: var(--status-busy-tint);
+    border-left-color: var(--status-busy);
 }
 
-
 .event-private {
-
-    background: #6b7280;
-
+    background: var(--status-private-tint);
+    border-left-color: var(--status-private);
 }
 
-
+.legend-dot.event-confirmed,
+.legend-dot.event-busy,
+.legend-dot.event-private {
+    border-radius: 2px;
+    border-left: none;
+}
 
 /* login screen */
 
 .login-screen {
-
     height: 100vh;
-
     width: 100%;
-
     display: flex;
-
     align-items: center;
-
     justify-content: center;
-
+    background: var(--bg);
 }
 
-
-
 .login-box {
-
     background: var(--panel);
-
     border: 1px solid var(--border);
-
-    border-radius: 16px;
-
-    padding: 40px;
-
+    border-radius: var(--radius-lg);
+    padding: var(--space-6);
     width: 320px;
-
-    box-shadow:
-        0 10px 30px rgba(0,0,0,0.05);
-
+    box-shadow: var(--shadow-md);
 }
 
-
-
 .login-box h2 {
-
     margin-top: 0;
-
+    margin-bottom: var(--space-5);
+    font-family: var(--font-display);
+    font-weight: 600;
     text-align: center;
-
-}
\ No newline at end of file
+}