From 69fa05347d6e8ea9769453514c9ff72d1aed82bd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tam=C3=A1s=20S=C3=BCdi?= <sudi.tamas@simonyi.bme.hu>
Date: Wed, 10 Dec 2025 00:02:37 +0100
Subject: [PATCH 1/4] Refreshed design system

---
 full-stack/src/styles.css | 257 ++++++++++++++++++++++++++++----------
 1 file changed, 188 insertions(+), 69 deletions(-)

diff --git a/full-stack/src/styles.css b/full-stack/src/styles.css
index 3197a60..1eaa394 100644
--- a/full-stack/src/styles.css
+++ b/full-stack/src/styles.css
@@ -1,3 +1,48 @@
+/* 
+  ===========================================================================
+  PEK DESIGN SYSTEM (PDS) v4.0 - "THE ELITE DIGITAL HOME"
+  ===========================================================================
+  
+  CONTEXT FOR AGENTS:
+  You are building "Pek Infinity", a social-first Phonebook for the Schönherz 
+  dormitory. The users are Gen Z Engineers: bright, critical, and digital-native.
+  They use Revolut, Spotify, and Tinder. They do not use Bootstrap admin panels.
+  
+  THE PHILOSOPHY: "TACTILE PROFESSIONALISM"
+  This is not a website. It is a Progressive Web App (PWA) that feels native.
+  
+  1. NAVIGATION PHYSICS (THE "NO FLASH" RULE):
+     - REJECT: Full page reloads (White Flashes).
+     - REJECT: Hamburger Menus. They hide architecture and feel distinctively "Web 2.0".
+     - ADOPT: Bottom Navigation Bar (The Thumb Zone). This is the stable anchor.
+     - ADOPT: "Optimistic UI". State changes happen instantly, data syncs in the background.
+  
+  2. SHEETS OVER MODALS:
+     - Center modals are intrusive and alienate the user from their context.
+     - ADOPT: Sheets (Drawers) for all secondary flows (editing profiles, 
+       viewing details, filters) with option to open in full screen.
+     - Sheets preserve the feeling of "holding" the app. They are stackable and 
+       dismissible via gestures.
+  
+  3. PLANAR / INVISIBLE UI:
+     - REJECT: The "Box Strategy" (placing every distinct item in a card with a drop shadow).
+     - REJECT: Heavy, muddy drop shadows. Shadows are reserved only for "floating" 
+       elements (toasts, active sheets, sticky headers).
+     - ADOPT: Content-first structuring. Use negative space (margin/padding) and 
+       subtle 1px borders (`border-border`) to define hierarchy. 
+     - On Mobile: Lists should often bleed to the edge (no horizontal padding on the container).
+  
+  4. INTERACTIVITY & FEEDBACK:
+     - The interface must feel "Tactile". It allows the user to feel the software.
+     - Clickable elements must respond.
+     - Transitions should be fluid, rarely instant.
+  
+  5. "ELITE" AESTHETIC:
+     - Avoid overly "Gamified" or "Toy" looks. Rounded corners are `xl` or `2xl`, but 
+       typography is crisp and professional.
+     - Layouts should handle density well without feeling cluttered. These users 
+       process data fast.
+*/
 @import "tailwindcss";
 @import "tw-animate-css";
 
@@ -18,74 +63,138 @@ code {
 }
 
 :root {
-  --background: oklch(1 0 0);
-  --foreground: oklch(0.141 0.005 285.823);
-  --card: oklch(1 0 0);
-  --card-foreground: oklch(0.141 0.005 285.823);
-  --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.141 0.005 285.823);
-  --primary: oklch(0.21 0.006 285.885);
-  --primary-foreground: oklch(0.985 0 0);
-  --secondary: oklch(0.967 0.001 286.375);
-  --secondary-foreground: oklch(0.21 0.006 285.885);
-  --muted: oklch(0.967 0.001 286.375);
-  --muted-foreground: oklch(0.552 0.016 285.938);
-  --accent: oklch(0.967 0.001 286.375);
-  --accent-foreground: oklch(0.21 0.006 285.885);
-  --destructive: oklch(0.577 0.245 27.325);
-  --destructive-foreground: oklch(0.577 0.245 27.325);
-  --border: oklch(0.92 0.004 286.32);
-  --input: oklch(0.92 0.004 286.32);
-  --ring: oklch(0.871 0.006 286.286);
-  --chart-1: oklch(0.646 0.222 41.116);
-  --chart-2: oklch(0.6 0.118 184.704);
-  --chart-3: oklch(0.398 0.07 227.392);
-  --chart-4: oklch(0.828 0.189 84.429);
-  --chart-5: oklch(0.769 0.188 70.08);
-  --radius: 0.625rem;
-  --sidebar: oklch(0.985 0 0);
-  --sidebar-foreground: oklch(0.141 0.005 285.823);
-  --sidebar-primary: oklch(0.21 0.006 285.885);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.967 0.001 286.375);
-  --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
-  --sidebar-border: oklch(0.92 0.004 286.32);
-  --sidebar-ring: oklch(0.871 0.006 286.286);
+  /* 
+    LIGHT MODE: "Tactile Professionalism"
+    Concept: A sheet of high-quality paper. Invisible cards.
+    Background: Pure white with a perceptible warmth.
+  */
+  --background: oklch(0.99 0.002 285);
+  --foreground: oklch(0.13 0.02 285); /* Nearly black, softened */
+
+  /* Invisible UI: Cards blend into background to reduce visual noise */
+  --card: oklch(0.99 0.002 285);
+  --card-foreground: oklch(0.13 0.02 285);
+
+  --popover: oklch(1.0 0 0);
+  --popover-foreground: oklch(0.13 0.02 285);
+
+  /* Elite Purple: Deep, authoritative, not playful */
+  --primary: oklch(0.45 0.18 290);
+  --primary-foreground: oklch(0.98 0 0);
+
+  /* Secondary: Soft lavender for depth without borders */
+  --secondary: oklch(0.92 0.03 290);
+  --secondary-foreground: oklch(0.30 0.05 290);
+
+  /* Muted: For metadata/subtext */
+  --muted: oklch(0.96 0.01 285);
+  --muted-foreground: oklch(0.50 0.02 285);
+
+  /* Accent: AMBER mapping for "Home" warmth on interaction */
+  --accent: oklch(0.94 0.06 85); /* Pale Amber wash */
+  --accent-foreground: oklch(0.35 0.08 80); /* Deep Amber text */
+
+  /* Destructive & Borders */
+  --destructive: oklch(0.6 0.18 25);
+  --destructive-foreground: oklch(0.98 0 0);
+  --border: oklch(0.92 0.01 285); /* Subtle structure */
+  --input: oklch(0.92 0.01 285);
+  --ring: oklch(0.45 0.18 290);
+
+  /* Charting adjusted to Purple/Amber/Teal trio */
+  --chart-1: oklch(0.45 0.18 290); /* Purple */
+  --chart-2: oklch(0.75 0.16 85);  /* Amber */
+  --chart-3: oklch(0.60 0.15 180); /* Teal */
+  --chart-4: oklch(0.55 0.10 250); /* Blue */
+  --chart-5: oklch(0.85 0.10 85);  /* Soft Amber */
+
+  /* Radii: Sleek but approachable (Apple/Linear standard) */
+  --radius: 0.75rem;
+
+  /* Shadows: "Invisible" - minimal spread, purely for lifting on z-index */
+  --shadow-2xs: 0 1px 2px -1px rgb(0 0 0 / 0.05);
+  --shadow-xs: 0 1px 3px 0 rgb(0 0 0 / 0.05);
+  --shadow-sm: 0 4px 6px -1px rgb(0 0 0 / 0.05);
+  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.05), 0 2px 4px -2px rgb(0 0 0 / 0.05);
+  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.05), 0 4px 6px -4px rgb(0 0 0 / 0.05);
+  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.05), 0 8px 10px -6px rgb(0 0 0 / 0.05);
+  --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.15);
+
+  /* Sidebar: Blends with background */
+  --sidebar: oklch(0.99 0.002 285);
+  --sidebar-foreground: oklch(0.13 0.02 285);
+  --sidebar-primary: oklch(0.45 0.18 290);
+  --sidebar-primary-foreground: oklch(0.98 0 0);
+  --sidebar-accent: oklch(0.94 0.06 85);
+  --sidebar-accent-foreground: oklch(0.35 0.08 80);
+  --sidebar-border: oklch(0.92 0.01 285);
+  --sidebar-ring: oklch(0.45 0.18 290);
 }
 
 .dark {
-  --background: oklch(0.141 0.005 285.823);
-  --foreground: oklch(0.985 0 0);
-  --card: oklch(0.141 0.005 285.823);
-  --card-foreground: oklch(0.985 0 0);
-  --popover: oklch(0.141 0.005 285.823);
-  --popover-foreground: oklch(0.985 0 0);
-  --primary: oklch(0.985 0 0);
-  --primary-foreground: oklch(0.21 0.006 285.885);
-  --secondary: oklch(0.274 0.006 286.033);
-  --secondary-foreground: oklch(0.985 0 0);
-  --muted: oklch(0.274 0.006 286.033);
-  --muted-foreground: oklch(0.705 0.015 286.067);
-  --accent: oklch(0.274 0.006 286.033);
-  --accent-foreground: oklch(0.985 0 0);
-  --destructive: oklch(0.396 0.141 25.723);
-  --destructive-foreground: oklch(0.637 0.237 25.331);
-  --border: oklch(0.274 0.006 286.033);
-  --input: oklch(0.274 0.006 286.033);
-  --ring: oklch(0.442 0.017 285.786);
-  --chart-1: oklch(0.488 0.243 264.376);
-  --chart-2: oklch(0.696 0.17 162.48);
-  --chart-3: oklch(0.769 0.188 70.08);
-  --chart-4: oklch(0.627 0.265 303.9);
-  --chart-5: oklch(0.645 0.246 16.439);
-  --sidebar: oklch(0.21 0.006 285.885);
-  --sidebar-foreground: oklch(0.985 0 0);
-  --sidebar-primary: oklch(0.488 0.243 264.376);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.274 0.006 286.033);
-  --sidebar-accent-foreground: oklch(0.985 0 0);
-  --sidebar-border: oklch(0.274 0.006 286.033);
-  --sidebar-ring: oklch(0.442 0.017 285.786);
+  /* 
+    DARK MODE: "The Void"
+    Concept: Premium OLED. Deep violet tint, no grey wash.
+  */
+  --background: oklch(0.10 0.02 280); /* Deep rich violet-black */
+  --foreground: oklch(0.98 0.01 280);
+
+  /* Invisible UI: Card matches background to create depth via borders/hover only */
+  --card: oklch(0.10 0.02 280);
+  --card-foreground: oklch(0.98 0.01 280);
+
+  --popover: oklch(0.10 0.02 280);
+  --popover-foreground: oklch(0.98 0.01 280);
+
+  /* Primary: Electric Violet - High energy */
+  --primary: oklch(0.65 0.22 290);
+  --primary-foreground: oklch(0.10 0.02 280);
+
+  /* Secondary: Deep muted violet surface */
+  --secondary: oklch(0.20 0.04 285);
+  --secondary-foreground: oklch(0.90 0.02 285);
+
+  /* Muted: Receded text */
+  --muted: oklch(0.15 0.02 280);
+  --muted-foreground: oklch(0.65 0.02 280);
+
+  /* Accent: Amber Glow - The "Hearth" in the dark */
+  --accent: oklch(0.25 0.08 85); /* Dark Amber wash */
+  --accent-foreground: oklch(0.90 0.05 85); /* Bright Amber text */
+
+  --destructive: oklch(0.5 0.20 25);
+  --destructive-foreground: oklch(0.98 0 0);
+
+  /* Borders: Very subtle, defining the "invisible" structure */
+  --border: oklch(0.20 0.02 280);
+  --input: oklch(0.20 0.02 280);
+  --ring: oklch(0.65 0.22 290);
+
+  /* Charting adjusted for dark mode contrast */
+  --chart-1: oklch(0.65 0.22 290);
+  --chart-2: oklch(0.70 0.16 85);
+  --chart-3: oklch(0.60 0.15 180);
+  --chart-4: oklch(0.60 0.10 250);
+  --chart-5: oklch(0.80 0.10 85);
+
+  /* Sidebar: Unified dark */
+  --sidebar: oklch(0.10 0.02 280);
+  --sidebar-foreground: oklch(0.98 0.01 280);
+  --sidebar-primary: oklch(0.65 0.22 290);
+  --sidebar-primary-foreground: oklch(0.10 0.02 280);
+  --sidebar-accent: oklch(0.25 0.08 85);
+  --sidebar-accent-foreground: oklch(0.90 0.05 85);
+  --sidebar-border: oklch(0.20 0.02 280);
+  --sidebar-ring: oklch(0.65 0.22 290);
+  
+  /* Shadows: Removed colored tint, purely low-alpha black */
+  --shadow-2xs: 0 1px 2px -1px rgb(0 0 0 / 0.2);
+  --shadow-xs: 0 1px 3px 0 rgb(0 0 0 / 0.2);
+  --shadow-sm: 0 4px 6px -1px rgb(0 0 0 / 0.2);
+  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.2), 0 2px 4px -2px rgb(0 0 0 / 0.2);
+  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.2), 0 4px 6px -4px rgb(0 0 0 / 0.2);
+  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.2), 0 8px 10px -6px rgb(0 0 0 / 0.2);
+  --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.3);
 }
 
 @theme inline {
@@ -113,10 +222,6 @@ code {
   --color-chart-3: var(--chart-3);
   --color-chart-4: var(--chart-4);
   --color-chart-5: var(--chart-5);
-  --radius-sm: calc(var(--radius) - 4px);
-  --radius-md: calc(var(--radius) - 2px);
-  --radius-lg: var(--radius);
-  --radius-xl: calc(var(--radius) + 4px);
   --color-sidebar: var(--sidebar);
   --color-sidebar-foreground: var(--sidebar-foreground);
   --color-sidebar-primary: var(--sidebar-primary);
@@ -125,8 +230,22 @@ code {
   --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
   --color-sidebar-border: var(--sidebar-border);
   --color-sidebar-ring: var(--sidebar-ring);
+
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+
+  /* Native Mobile-first feel requires specific tracking */
+  --tracking-tighter: -0.05em;
+  --tracking-tight: -0.025em;
+  --tracking-normal: 0em;
+  --tracking-wide: 0.025em;
+  --tracking-wider: 0.05em;
+  --tracking-widest: 0.1em;
 }
 
+
 @layer base {
   * {
     @apply border-border outline-ring/50;

From 4f87e4329c08196009c8ad2dd420a4cd9736a260 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tam=C3=A1s=20S=C3=BCdi?= <sudi.tamas@simonyi.bme.hu>
Date: Wed, 10 Dec 2025 04:13:09 +0100
Subject: [PATCH 2/4] feat: Add native UI design vision, shell navigation,
 user/group profiles, and activity sheets documentation.

---
 .../ui-native-design/activity-sheets.md       |  37 ++++++
 memory-bank/ui-native-design/design-vision.md | 108 +++++++++++++++++
 memory-bank/ui-native-design/group-profile.md |  41 +++++++
 .../ui-native-design/members-and-actions.md   |  37 ++++++
 .../ui-native-design/shell-navigation.md      |  31 +++++
 memory-bank/ui-native-design/user-profile.md  |  28 +++++
 memory-bank/ui-native-design/vision.md        | 113 ++++++++++++++++++
 7 files changed, 395 insertions(+)
 create mode 100644 memory-bank/ui-native-design/activity-sheets.md
 create mode 100644 memory-bank/ui-native-design/design-vision.md
 create mode 100644 memory-bank/ui-native-design/group-profile.md
 create mode 100644 memory-bank/ui-native-design/members-and-actions.md
 create mode 100644 memory-bank/ui-native-design/shell-navigation.md
 create mode 100644 memory-bank/ui-native-design/user-profile.md
 create mode 100644 memory-bank/ui-native-design/vision.md

diff --git a/memory-bank/ui-native-design/activity-sheets.md b/memory-bank/ui-native-design/activity-sheets.md
new file mode 100644
index 0000000..b1a277e
--- /dev/null
+++ b/memory-bank/ui-native-design/activity-sheets.md
@@ -0,0 +1,37 @@
+---
+purpose: "Specify the activity heatmap sheet design and behavior"
+triggers: ["activity sheet", "heatmap", "user activity"]
+keywords: ["heatmap", "sheet", "activity", "semester", "sticky"]
+importance: "high"
+size: "600 words"
+status: "active"
+created: "2025-12-10"
+updated: "2025-12-10"
+---
+
+# Activity Sheets
+
+## Sticky Heatmap Header
+- Displays semester blocks (e.g., 2020 – 2024) with a **quick‑jump anchor** for each.
+- Header remains fixed at the top of the sheet while the activity list scrolls (Audit 1.5).
+
+## CTA Button
+- In the profile view, the button reads **“Active between 2020 and 2024”** (Audit 1.1) and opens this sheet.
+
+## Content Layout
+- Below the heatmap, a vertical list of activity items grouped by semester.
+- Each item shows an icon, timestamp, and brief description.
+
+## Interaction Model
+- No swipe gestures between heatmap and details (as per user request). Users scroll normally.
+- Tapping an activity opens a **detail overlay** within the sheet (small modal, not full navigation).
+
+## Optimistic Updates
+- Actions such as “Mark as read” update instantly; a background sync persists changes.
+
+## Accessibility
+- Heatmap anchors are reachable via keyboard (`Tab` navigation) and have ARIA labels.
+
+## Audit Integration
+- Updated button text and removed swipe requirement.
+- Sticky heatmap kept visible for easy navigation.
diff --git a/memory-bank/ui-native-design/design-vision.md b/memory-bank/ui-native-design/design-vision.md
new file mode 100644
index 0000000..16c1d4b
--- /dev/null
+++ b/memory-bank/ui-native-design/design-vision.md
@@ -0,0 +1,108 @@
+---
+purpose: "Define the design philosophy shift from Bootstrap Admin to Native/Linear"
+triggers: ["UI refactor", "design review", "component updates"]
+keywords: ["design", "native", "linear", "phonebook", "search-first"]
+importance: "critical"
+size: "1200 words"
+status: "active"
+created: "2025-12-10"
+updated: "2025-12-10"
+---
+
+# Design Vision: Bootstrap Admin → Native/Linear
+
+## The Shift
+
+We are moving from a "Bootstrap Admin Page" aesthetic (card-based, boxed containers) to a "Native/Linear" design (content-first, whitespace-driven, gesture-based).
+
+This is a **fundamental architecture change**, not cosmetic.
+
+## Core Principles
+
+### 1. Invisible Structures
+- **Kill the card metaphor**: No rounded boxes with shadows on generic backgrounds
+- **Use whitespace & negative space** to organize data
+- **1px dividers** between logical sections (not containers)
+- Content defines the interface, not chrome
+
+### 2. Thumb-Zone Supremacy
+- Navigation and primary actions live in **bottom 30%** (OneUI principle)
+- Reachability is mandatory — users shouldn't hunt
+- Bottom bar is persistent, always accessible
+- Content scrolls; controls don't
+
+### 3. Death to Hamburger Menu
+- No off-canvas navigation
+- Use **persistent bottom bars** + **stackable sheets**
+- Context is always visible
+- Navigation is friction-free
+
+### 4. Content is the Interface
+- Reduce button clutter
+- If data can be tapped/swiped directly, do it
+- Don't add a "View" button when the row itself should be interactive
+- Rows are actionable by default
+
+### 5. Optimistic Physics
+- UI reacts **instantly** to touch
+- Data syncs in the background
+- Never show a spinner for simple toggles (Revolut pattern)
+- Feedback is tactile and present
+
+### 6. Tactile Precision
+- High-density information without visual chaos
+- Rigorous alignment creates order
+- Gesture states (swipe, drag) are distinct
+- Micro-interactions soften professional rigidity
+
+### 7. Sheets Over Modals
+- Avoid center-screen popups (jarring, takes focus)
+- Complex interactions happen in **slide-up panels**
+- Sheets preserve context — you see the background
+- Sheets are dismissible by gesture
+
+### 8. Humanized Micro-interactions
+- Hover/active states feel responsive
+- Don't just change color — add weight, scale, or movement
+- Feedback should feel intentional, not mechanical
+
+### 9. Native Fluidity
+- Eliminate "white flash" routing artifacts
+- App behaves like a **single living organism**
+- Transitions are smooth, content feels connected
+- No page reloads — state flows between screens
+
+## Core Use Case: Search-First Phonebook
+
+**Users**: 10,000+ people across 100+ groups
+**User's context**: 3-10 groups on average
+**Primary actions**:
+1. Search for a user by name
+2. Search for a group by name
+3. View user profile with their groups
+4. View group profile with hierarchy, leader, metadata
+
+**Design consequence**: 
+- Search is a **core navigation element**, not a buried feature
+- User & Group profiles are equally important
+- Membership is an **entity** (not just a join table)
+
+## Memory Bank Structure
+
+This folder contains:
+- `design-vision.md` (this file) — Philosophy & principles
+- `shell-architecture.md` — App shell, bottom nav, sheet stack
+- `patterns.md` — Reusable interaction patterns
+
+## Conversion Rules: From Bootstrap → Native
+
+| Bootstrap | Native | Rationale |
+|-----------|--------|-----------|
+| Card containers | Whitespace + dividers | Content breathes |
+| Modal popups | Bottom sheets | Context preserved |
+| Hamburger menu | Bottom nav | Reachability |
+| Button-heavy UI | Row-based actions | Simplicity |
+| Page reloads | Sheet overlays | Continuity |
+| Shadows & borders | Subtle dividers | Minimal chrome |
+| "View" buttons | Tap row directly | Content-first |
+| Spinners on interactions | Optimistic updates | Responsive feel |
\ No newline at end of file
diff --git a/memory-bank/ui-native-design/group-profile.md b/memory-bank/ui-native-design/group-profile.md
new file mode 100644
index 0000000..6002b58
--- /dev/null
+++ b/memory-bank/ui-native-design/group-profile.md
@@ -0,0 +1,41 @@
+---
+purpose: "Document the Group Profile layout and interactions"
+triggers: ["group profile", "ui design", "member list"]
+keywords: ["group", "profile", "layout", "members", "hierarchy"]
+importance: "critical"
+size: "1000 words"
+status: "active"
+created: "2025-12-10"
+updated: "2025-12-10"
+---
+
+# Group Profile
+
+## Layout Overview
+- **Header**: Optional group logo, Group name, and a sticky **status banner** (e.g., “Archived”, “Inactive”, “Taskforce”) that stays visible when scrolling.
+- **Leader Row**: Avatar + Name + **Edit** icon (opens a leader edit sheet). Highlighted to indicate leadership.
+- **Sub‑Groups**: Inline list of child groups with right‑arrow indicators to show hierarchy.
+- **Members Section**: Title “Members (100+)” followed by a **search input** and **filter chips**:
+  - **Active** – filters active members.
+  - **Newbie** – filters newcomers.
+  - **Role…** – ellipsis opens a role dropdown; selecting a role filters accordingly.
+  Default sorting is **Active → Role hierarchy** (Audit Item 2.2).
+
+## Interaction Details
+- **Member Row**: Avatar, Name, Role, Join year. Tapping opens a **member sheet**.
+- **Member Sheet**: Contains quick actions:
+  - **Change Role** – opens a role picker; selection triggers a confirmation modal (“Change role to X?”) (Audit Item 2.3).
+  - **Toggle State** – cycles through Newbie → Active → Passive → Former with a confirmation toast.
+- **Optimistic UI**: Immediate visual feedback; rollback on server error.
+- **Filtering**: Chips filter locally; large lists (> 50) are virtualized for performance (Audit Item 2.1).
+- **Breadcrumb**: Shows full hierarchy; truncated with ellipsis in the middle on narrow screens (business constraints limit depth, so minimal breadcrumb needed).
+
+## Visual Consistency
+- Uses the spacing and divider tokens defined in the tokens file.
+- Icons from the Lucide set for edit, hierarchy arrows, and status indicators.
+
+## Audit Integration
+- Default filter set to Active, sorted by role hierarchy.
+- Confirmation dialogs added for role/state changes.
+- Sticky banner for special states included.
+- No deep breadcrumb due to business constraints.
diff --git a/memory-bank/ui-native-design/members-and-actions.md b/memory-bank/ui-native-design/members-and-actions.md
new file mode 100644
index 0000000..48e4ba4
--- /dev/null
+++ b/memory-bank/ui-native-design/members-and-actions.md
@@ -0,0 +1,37 @@
+---
+purpose: "Define member list filtering, sorting, and quick actions"
+triggers: ["member list", "filter", "actions"]
+keywords: ["members", "filter", "role", "state", "optimistic"]
+importance: "high"
+size: "800 words"
+status: "active"
+created: "2025-12-10"
+updated: "2025-12-10"
+---
+
+# Members & Actions
+
+## Filtering & Sorting
+- **Search Input**: Live fuzzy search across member names.
+- **Filter Chips**:
+  - **Active** – shows only members with active status.
+  - **Newbie** – shows only newcomers.
+  - **Role…** – ellipsis opens a dropdown of all roles; selecting a role filters accordingly.
+- **Default**: Active members sorted by role hierarchy (Leader > Admin > Member) (Audit 2.2).
+
+## Virtualization
+- For lists > 50 items, the UI uses virtualization to render only visible rows, preserving performance on mobile devices.
+
+## Member Sheet Actions
+- **Quick Actions** (displayed at top of the sheet):
+  - **Change Role** – opens a role picker; on selection, shows a confirmation modal (“Change role to X?”) (Audit 2.3).
+  - **Toggle State** – cycles through Newbie → Active → Passive → Former with a confirmation toast.
+- **Optimistic Updates**: UI updates immediately; if the server rejects, a rollback toast appears.
+
+## Accessibility
+- All chips are keyboard‑navigable; ARIA labels communicate current filter state.
+
+## Audit Integration
+- Confirmation dialogs added for role/state changes.
+- Virtualized list to address performance concerns for > 100 members (Audit 2.1).
+- Default sorting aligns with design decisions.
diff --git a/memory-bank/ui-native-design/shell-navigation.md b/memory-bank/ui-native-design/shell-navigation.md
new file mode 100644
index 0000000..b741cef
--- /dev/null
+++ b/memory-bank/ui-native-design/shell-navigation.md
@@ -0,0 +1,31 @@
+---
+purpose: "Define the app shell and navigation patterns for the native design"
+triggers: ["navigation design", "bottom bar", "sheet stack"]
+keywords: ["shell", "navigation", "bottom bar", "sheets"]
+importance: "critical"
+size: "800 words"
+status: "active"
+created: "2025-12-10"
+updated: "2025-12-10"
+---
+
+# Shell & Navigation
+
+## Bottom Bar Architecture
+- Four tabs for regular users: **Home**, **Search**, **My Groups**, **Profile**.
+- Fifth **Manage** tab appears only for users with leadership roles (hidden otherwise) to avoid illegal states.
+- Persistent at the bottom 30% of the viewport, respecting safe‑area insets.
+
+## Sheet vs. Navigation Rule
+- **Sheet** for interactions that keep context visible (member details, activity heatmap, quick actions).  
+- **Full navigation** (push route) when the view occupies >70% of the screen or requires deep hierarchy (e.g., Group Management).
+
+## Scroll‑to‑Top on Tab Re‑tap
+- Re‑tapping an active tab scrolls its main list to the top, providing a quick reset.
+
+## No Header
+- Each screen begins with a clear title element inside the content area to maintain identity without a global header.
+
+## Audit Notes (integrated)
+- The dynamic Manage tab may cause jarring UI shifts; we recommend an introductory tooltip when it first appears (Audit Item 3.5).  
+- Sticky heatmap remains visible; no swipe between heatmap and details per user request (Audit Item 1.5).
diff --git a/memory-bank/ui-native-design/user-profile.md b/memory-bank/ui-native-design/user-profile.md
new file mode 100644
index 0000000..9b81604
--- /dev/null
+++ b/memory-bank/ui-native-design/user-profile.md
@@ -0,0 +1,28 @@
+---
+purpose: "Document the User Profile layout and interactions"
+triggers: ["user profile", "ui design", "contact icons"]
+keywords: ["user", "profile", "layout", "contacts", "heatmap"]
+importance: "critical"
+size: "900 words"
+status: "active"
+created: "2025-12-10"
+updated: "2025-12-10"
+---
+
+# User Profile
+
+## Layout Overview
+- **Top Section**: Avatar (large), Name, Title, Status badge.
+- **Contact Row**: Icons for Email, Facebook, Instagram, WhatsApp, Phone. Each icon reveals a tooltip on hover (desktop) or long‑press (mobile) with the actual contact value (Audit Item 1.2).
+- **Groups Section**: “Groups” heading followed by a horizontal scroll of group chips (up to 10). The first chip is a **“Create Group”** action (plus sign) for quick entry.
+- **Activity Sheet Trigger**: A button labeled **“Active between 2020 and 2024”** opens the sticky heatmap sheet (Audit Item 1.1). The sheet shows semester blocks with quick‑jump anchors.
+
+## Interaction Details
+- **Edit Button**: Located top‑right, opens a full‑screen edit view (`/profile/edit`). No conflict with safe‑area.
+- **Heatmap Sheet**: Sticky header stays visible while scrolling the activity list; users can scroll without needing swipe gestures (Audit Item 1.5).
+- **Accessibility**: Icons are keyboard‑focusable; tooltips appear on focus.
+
+## Audit Integration
+- Added explicit tooltip/long‑press labels for contacts.
+- Updated activity button text per user request.
+- Confirmed no swipe between heatmap and details; sticky heatmap remains on top.
diff --git a/memory-bank/ui-native-design/vision.md b/memory-bank/ui-native-design/vision.md
new file mode 100644
index 0000000..e8f5970
--- /dev/null
+++ b/memory-bank/ui-native-design/vision.md
@@ -0,0 +1,113 @@
+---
+purpose: "Define the design philosophy shift from Bootstrap Admin to Native/Linear"
+triggers: ["UI refactor", "design review", "component updates"]
+keywords: ["design", "native", "linear", "phonebook", "search-first"]
+importance: "critical"
+size: "1500 words"
+status: "active"
+created: "2025-12-10"
+updated: "2025-12-10"
+---
+
+# Design Vision: Bootstrap Admin → Native/Linear
+
+## The Shift
+
+We are moving from a "Bootstrap Admin Page" aesthetic (card-based, boxed containers) to a "Native/Linear" design (content-first, whitespace-driven, gesture-based).
+
+This is a **fundamental architecture change**, not cosmetic.
+
+## Core Principles
+
+### 1. Invisible Structures
+- **Kill the card metaphor**: No rounded boxes with shadows on generic backgrounds
+- **Use whitespace & negative space** to organize data
+- **1px dividers** between logical sections (not containers)
+- Content defines the interface, not chrome
+
+### 2. Thumb-Zone Supremacy
+- Navigation and primary actions live in **bottom 30%** (OneUI principle)
+- Reachability is mandatory — users shouldn't hunt
+- Bottom bar is persistent, always accessible
+- Content scrolls; controls don't
+
+### 3. Death to Hamburger Menu
+- No off-canvas navigation
+- Use **persistent bottom bars** + **stackable sheets**
+- Context is always visible
+- Navigation is friction-free
+
+### 4. Content is the Interface
+- Reduce button clutter
+- If data can be tapped/swiped directly, do it
+- Don't add a "View" button when the row itself should be interactive
+- Rows are actionable by default
+
+### 5. Optimistic Physics
+- UI reacts **instantly** to touch
+- Data syncs in the background
+- Never show a spinner for simple toggles (Revolut pattern)
+- Feedback is tactile and present
+
+### 6. Tactile Precision
+- High-density information without visual chaos
+- Rigorous alignment creates order
+- Gesture states (swipe, drag) are distinct
+- Micro-interactions soften professional rigidity
+
+### 7. Sheets Over Modals
+- Avoid center-screen popups (jarring, takes focus)
+- Complex interactions happen in **slide-up panels**
+- Sheets preserve context — you see the background
+- Sheets are dismissible by gesture
+
+### 8. Humanized Micro-interactions
+- Hover/active states feel responsive
+- Don't just change color — add weight, scale, or movement
+- Feedback should feel intentional, not mechanical
+
+### 9. Native Fluidity
+- Eliminate "white flash" routing artifacts
+- App behaves like a **single living organism**
+- Transitions are smooth, content feels connected
+- No page reloads — state flows between screens
+
+## Core Use Case: Search-First Phonebook
+
+**Users**: 10,000+ people across 100+ groups
+**User's context**: 3-10 groups on average
+**Primary actions**:
+1. Search for a user by name
+2. Search for a group by name
+3. View user profile with their groups
+4. View group profile with hierarchy, leader, metadata
+
+**Design consequence**: 
+- Search is a **core navigation element**, not a buried feature
+- User & Group profiles are equally important
+- Membership is an **entity** (not just a join table)
+
+## Memory Bank Structure
+
+This folder contains:
+- `vision.md` (this file) — Philosophy & principles
+- `shell-navigation.md` — App shell and navigation patterns
+- `user-profile.md` — User Profile layout and interactions
+- `group-profile.md` — Group Profile layout and interactions
+- `members-and-actions.md` — Group members list, filtering, and quick actions
+- `activity-sheets.md` — User activity sheet design
+- `tokens-and-visuals.md` — Design tokens, typography, spacing, iconography
+- `todos-home-search-manage.md` — Placeholders for remaining major screens
+
+## Conversion Rules: From Bootstrap → Native
+
+| Bootstrap | Native | Rationale |
+|-----------|--------|-----------|
+| Card containers | Whitespace + dividers | Content breathes |
+| Modal popups | Bottom sheets | Context preserved |
+| Hamburger menu | Bottom nav | Reachability |
+| Button-heavy UI | Row-based actions | Simplicity |
+| Page reloads | Sheet overlays | Continuity |
+| Shadows & borders | Subtle dividers | Minimal chrome |
+| "View" buttons | Tap row directly | Content-first |
+| Spinners on interactions | Optimistic updates | Responsive feel |

From 7def02ee21c1c7a91964b9b01d7e0919cc8af9e3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tam=C3=A1s=20S=C3=BCdi?= <sudi.tamas@simonyi.bme.hu>
Date: Wed, 10 Dec 2025 14:30:50 +0100
Subject: [PATCH 3/4] feat: Introduce design tokens for spacing and sizing

---
 .github/copilot-instructions.md               | 168 ++++++++++++++----
 .github/generate-instructions.sh              |   6 +-
 full-stack/src/styles.css                     |  12 +-
 .../{vision.md => federation-vision.md}       |   2 +-
 memory-bank/rules/frontmatter.md              |   2 +-
 memory-bank/tokens-and-visuals.md             |  44 +++++
 .../ui-native-design/activity-sheets.md       |   5 +
 memory-bank/ui-native-design/group-profile.md |   5 +
 .../ui-native-design/members-and-actions.md   |   5 +
 .../ui-native-design/shell-navigation.md      |   5 +
 .../{design-vision.md => ui-vision.md}        |  16 +-
 memory-bank/ui-native-design/user-profile.md  |   5 +
 memory-bank/ui-native-design/vision.md        | 113 ------------
 13 files changed, 227 insertions(+), 161 deletions(-)
 rename memory-bank/.federation/{vision.md => federation-vision.md} (99%)
 create mode 100644 memory-bank/tokens-and-visuals.md
 rename memory-bank/ui-native-design/{design-vision.md => ui-vision.md} (93%)
 delete mode 100644 memory-bank/ui-native-design/vision.md

diff --git a/.github/copilot-instructions.md b/.github/copilot-instructions.md
index 2b58455..2b2cd2c 100644
--- a/.github/copilot-instructions.md
+++ b/.github/copilot-instructions.md
@@ -1,6 +1,6 @@
 <!-- this is auto generated, do not edit manually -->
 <memory-bank>
-==> /home/sudta/projects/kir-dev/pek-infinity/copilot/refactor-memory-bank-docs/.github/../memory-bank/architecture/data-flow.md <==
+==> memory-bank/architecture/data-flow.md <==
 ---
 purpose: "Visual reference: request flows, auth flows, policy cascade, error handling paths"
 triggers: ["understanding request lifecycle", "tracing bug through system", "architectural review"]
@@ -17,7 +17,7 @@ updated: "2025-11-27"
 
 ---
 
-==> /home/sudta/projects/kir-dev/pek-infinity/copilot/refactor-memory-bank-docs/.github/../memory-bank/architecture/data-modeling.md <==
+==> memory-bank/architecture/data-modeling.md <==
 ---
 purpose: "Guide on mapping Database Tables to Zod Schemas and DTOs"
 triggers: ["creating new domain", "adding database fields"]
@@ -34,7 +34,7 @@ updated: "2025-11-27"
 
 ---
 
-==> /home/sudta/projects/kir-dev/pek-infinity/copilot/refactor-memory-bank-docs/.github/../memory-bank/architecture/middleware.md <==
+==> memory-bank/architecture/middleware.md <==
 ---
 purpose: "Middleware stack order and guard responsibilities"
 triggers: ["implementing middleware", "debugging auth failures", "adding new guard"]
@@ -51,7 +51,7 @@ updated: "2025-11-27"
 
 ---
 
-==> /home/sudta/projects/kir-dev/pek-infinity/copilot/refactor-memory-bank-docs/.github/../memory-bank/architecture/service-layer.md <==
+==> memory-bank/architecture/service-layer.md <==
 ---
 purpose: "Copy-paste service template with DI pattern; what goes in service, what doesn't, testing in isolation"
 triggers: ["implementing new domain", "code review for service layer", "understanding DI pattern"]
@@ -68,7 +68,7 @@ updated: "2025-11-27"
 
 ---
 
-==> /home/sudta/projects/kir-dev/pek-infinity/copilot/refactor-memory-bank-docs/.github/../memory-bank/architecture/testing.md <==
+==> memory-bank/architecture/testing.md <==
 ---
 purpose: "Canonical guide for testing strategies and patterns"
 triggers: ["writing tests", "debugging tests"]
@@ -85,7 +85,7 @@ updated: "2025-11-27"
 
 ---
 
-==> /home/sudta/projects/kir-dev/pek-infinity/copilot/refactor-memory-bank-docs/.github/../memory-bank/auth/login-flow.md <==
+==> memory-bank/auth/login-flow.md <==
 ---
 purpose: "Complete JWT flow, auth guards, and permission system"
 triggers: ["implementing auth", "designing login flow", "debugging permissions"]
@@ -102,7 +102,7 @@ updated: "2025-11-27"
 
 ---
 
-==> /home/sudta/projects/kir-dev/pek-infinity/copilot/refactor-memory-bank-docs/.github/../memory-bank/auth/permissions.md <==
+==> memory-bank/auth/permissions.md <==
 ---
 purpose: "Policy, Statement, PolicyAssignment models; hierarchy with delegation, cascading escalation, permission grants"
 triggers: ["adding permissions", "debugging access denied", "cascading on subgroup creation"]
@@ -119,7 +119,7 @@ updated: "2025-11-27"
 
 ---
 
-==> /home/sudta/projects/kir-dev/pek-infinity/copilot/refactor-memory-bank-docs/.github/../memory-bank/auth/session.md <==
+==> memory-bank/auth/session.md <==
 ---
 purpose: "Explain session management and cookies"
 triggers: ["debugging session", "security audit"]
@@ -136,7 +136,7 @@ updated: "2025-11-27"
 
 ---
 
-==> /home/sudta/projects/kir-dev/pek-infinity/copilot/refactor-memory-bank-docs/.github/../memory-bank/evaluation/guidelines.md <==
+==> memory-bank/evaluation/guidelines.md <==
 ---
 purpose: "Rules for what counts as points"
 triggers: ["creating guidelines", "disputing points"]
@@ -153,7 +153,7 @@ updated: "2025-11-27"
 
 ---
 
-==> /home/sudta/projects/kir-dev/pek-infinity/copilot/refactor-memory-bank-docs/.github/../memory-bank/evaluation/scoring.md <==
+==> memory-bank/evaluation/scoring.md <==
 ---
 purpose: "Define how points are calculated"
 triggers: ["evaluating members", "setting up semester"]
@@ -170,7 +170,7 @@ updated: "2025-11-27"
 
 ---
 
-==> /home/sudta/projects/kir-dev/pek-infinity/copilot/refactor-memory-bank-docs/.github/../memory-bank/evaluation/sheets-integration.md <==
+==> memory-bank/evaluation/sheets-integration.md <==
 ---
 purpose: "Explain the sync with Google Sheets"
 triggers: ["configuring sheets", "debugging sync"]
@@ -187,7 +187,7 @@ updated: "2025-11-27"
 
 ---
 
-==> /home/sudta/projects/kir-dev/pek-infinity/copilot/refactor-memory-bank-docs/.github/../memory-bank/external/prisma.md <==
+==> memory-bank/external/prisma.md <==
 ---
 purpose: "Guide for Prisma usage"
 triggers: ["database migration", "querying"]
@@ -204,7 +204,7 @@ updated: "2025-11-27"
 
 ---
 
-==> /home/sudta/projects/kir-dev/pek-infinity/copilot/refactor-memory-bank-docs/.github/../memory-bank/external/tanstack-form.md <==
+==> memory-bank/external/tanstack-form.md <==
 ---
 purpose: "Guide for TanStack Form usage"
 triggers: ["building forms"]
@@ -221,7 +221,7 @@ updated: "2025-11-27"
 
 ---
 
-==> /home/sudta/projects/kir-dev/pek-infinity/copilot/refactor-memory-bank-docs/.github/../memory-bank/external/tanstack-query.md <==
+==> memory-bank/external/tanstack-query.md <==
 ---
 purpose: "Guide for TanStack Query usage"
 triggers: ["fetching data", "caching"]
@@ -238,7 +238,7 @@ updated: "2025-11-27"
 
 ---
 
-==> /home/sudta/projects/kir-dev/pek-infinity/copilot/refactor-memory-bank-docs/.github/../memory-bank/external/tanstack-start.md <==
+==> memory-bank/external/tanstack-start.md <==
 ---
 purpose: "Guide for TanStack Start usage"
 triggers: ["routing", "server actions"]
@@ -255,7 +255,7 @@ updated: "2025-11-27"
 
 ---
 
-==> /home/sudta/projects/kir-dev/pek-infinity/copilot/refactor-memory-bank-docs/.github/../memory-bank/external/zod.md <==
+==> memory-bank/external/zod.md <==
 ---
 purpose: "Guide for Zod usage"
 triggers: ["validation", "schema definition"]
@@ -272,7 +272,7 @@ updated: "2025-11-27"
 
 ---
 
-==> /home/sudta/projects/kir-dev/pek-infinity/copilot/refactor-memory-bank-docs/.github/../memory-bank/gotchas/serverfn-responses.md <==
+==> memory-bank/gotchas/serverfn-responses.md <==
 ---
 purpose: "GOTCHA: serverFn handlers must return json() wrapped responses"
 triggers: ["serverFn returns undefined", "middleware chain breaks", "test failures"]
@@ -289,7 +289,7 @@ updated: "2025-11-27"
 
 ---
 
-==> /home/sudta/projects/kir-dev/pek-infinity/copilot/refactor-memory-bank-docs/.github/../memory-bank/group/creation.md <==
+==> memory-bank/group/creation.md <==
 ---
 purpose: "Rules for creating organizations and subgroups"
 triggers: ["creating group", "onboarding organization"]
@@ -306,7 +306,7 @@ updated: "2025-11-27"
 
 ---
 
-==> /home/sudta/projects/kir-dev/pek-infinity/copilot/refactor-memory-bank-docs/.github/../memory-bank/group/hierarchy.md <==
+==> memory-bank/group/hierarchy.md <==
 ---
 purpose: "Group model with parent-child hierarchy, realmId isolation, composite constraints, cascading on creation"
 triggers: ["creating groups", "querying group hierarchy", "designing group operations", "validating group constraints"]
@@ -323,7 +323,7 @@ updated: "2025-11-27"
 
 ---
 
-==> /home/sudta/projects/kir-dev/pek-infinity/copilot/refactor-memory-bank-docs/.github/../memory-bank/group/roles.md <==
+==> memory-bank/group/roles.md <==
 ---
 purpose: "Define roles and permission inheritance"
 triggers: ["assigning roles", "checking permissions"]
@@ -340,7 +340,7 @@ updated: "2025-11-27"
 
 ---
 
-==> /home/sudta/projects/kir-dev/pek-infinity/copilot/refactor-memory-bank-docs/.github/../memory-bank/group/structure.md <==
+==> memory-bank/group/structure.md <==
 ---
 purpose: "Define the Group data model and hierarchy"
 triggers: ["schema changes", "understanding groups"]
@@ -357,7 +357,7 @@ updated: "2025-11-27"
 
 ---
 
-==> /home/sudta/projects/kir-dev/pek-infinity/copilot/refactor-memory-bank-docs/.github/../memory-bank/membership/management.md <==
+==> memory-bank/membership/management.md <==
 ---
 purpose: "Manage group memberships"
 triggers: ["joining group", "leaving group", "approving members"]
@@ -374,7 +374,7 @@ updated: "2025-11-27"
 
 ---
 
-==> /home/sudta/projects/kir-dev/pek-infinity/copilot/refactor-memory-bank-docs/.github/../memory-bank/reference/glossary.md <==
+==> memory-bank/reference/glossary.md <==
 ---
 purpose: "Terminology glossary for pek-infinity architecture, policies, and system design"
 triggers: ["confused about terminology", "onboarding new developer", "architectural discussion"]
@@ -391,7 +391,7 @@ updated: "2025-11-27"
 
 ---
 
-==> /home/sudta/projects/kir-dev/pek-infinity/copilot/refactor-memory-bank-docs/.github/../memory-bank/rejected/00-rest-endpoints-in-mvp.md <==
+==> memory-bank/rejected/00-rest-endpoints-in-mvp.md <==
 ---
 purpose: "Why REST not chosen for MVP. When REST will be added (worker instances)"
 triggers: ["architectural discussion", "comparing REST vs tRPC", "worker planning"]
@@ -408,7 +408,7 @@ status: "active"
 ---
 
 
-==> /home/sudta/projects/kir-dev/pek-infinity/copilot/refactor-memory-bank-docs/.github/../memory-bank/rules/auth-enforcement.md <==
+==> memory-bank/rules/auth-enforcement.md <==
 ---
 purpose: "MUST: Auth checks in middleware, not handlers. Error handling, response codes, middleware order critical"
 triggers: ["code review for auth", "implementing permission check", "debugging permission bypass"]
@@ -425,7 +425,7 @@ updated: "2025-11-27"
 
 ---
 
-==> /home/sudta/projects/kir-dev/pek-infinity/copilot/refactor-memory-bank-docs/.github/../memory-bank/rules/domain-structure.md <==
+==> memory-bank/rules/domain-structure.md <==
 ---
 purpose: "MUST: Organize code by domain, not technology layer"
 triggers: ["creating new feature", "organizing code", "file structure"]
@@ -442,7 +442,7 @@ updated: "2025-11-27"
 
 ---
 
-==> /home/sudta/projects/kir-dev/pek-infinity/copilot/refactor-memory-bank-docs/.github/../memory-bank/rules/frontmatter.md <==
+==> memory-bank/rules/frontmatter.md <==
 ---
 purpose: "Enforce frontmatter format"
 triggers: ["creating documentation", "updating docs"]
@@ -459,7 +459,7 @@ updated: "2025-11-27"
 
 ---
 
-==> /home/sudta/projects/kir-dev/pek-infinity/copilot/refactor-memory-bank-docs/.github/../memory-bank/rules/group-validation.md <==
+==> memory-bank/rules/group-validation.md <==
 ---
 purpose: "MUST: Validate parent group exists and is not archived. Prevent orphaned groups"
 triggers: ["group creation", "group update", "parentId assignment"]
@@ -476,7 +476,7 @@ updated: "2025-11-27"
 
 ---
 
-==> /home/sudta/projects/kir-dev/pek-infinity/copilot/refactor-memory-bank-docs/.github/../memory-bank/rules/naming.md <==
+==> memory-bank/rules/naming.md <==
 ---
 purpose: "Enforce naming conventions"
 triggers: ["naming file", "naming variable"]
@@ -493,7 +493,7 @@ updated: "2025-11-27"
 
 ---
 
-==> /home/sudta/projects/kir-dev/pek-infinity/copilot/refactor-memory-bank-docs/.github/../memory-bank/rules/performance.md <==
+==> memory-bank/rules/performance.md <==
 ---
 purpose: "MUST: Prevent N+1, cascading queries, and serial awaits. Performance is a feature."
 triggers: ["code review", "database design", "implementing list endpoint", "policy logic"]
@@ -510,7 +510,7 @@ updated: "2025-11-27"
 
 ---
 
-==> /home/sudta/projects/kir-dev/pek-infinity/copilot/refactor-memory-bank-docs/.github/../memory-bank/rules/schema-validation.md <==
+==> memory-bank/rules/schema-validation.md <==
 ---
 purpose: "MUST: Zod schemas satisfy Prisma types. Type safety, prevention of silent bugs"
 triggers: ["creating schema", "code review for types", "debugging type mismatch"]
@@ -527,7 +527,7 @@ updated: "2025-11-27"
 
 ---
 
-==> /home/sudta/projects/kir-dev/pek-infinity/copilot/refactor-memory-bank-docs/.github/../memory-bank/rules/service-purity.md <==
+==> memory-bank/rules/service-purity.md <==
 ---
 purpose: "MUST: Services realm-agnostic for MVP + worker-instance reuse"
 triggers: ["implementing service", "code review for service", "adding realm parameter"]
@@ -544,7 +544,109 @@ updated: "2025-11-27"
 
 ---
 
-==> /home/sudta/projects/kir-dev/pek-infinity/copilot/refactor-memory-bank-docs/.github/../memory-bank/user/profile.md <==
+==> memory-bank/ui-native-design/activity-sheets.md <==
+---
+purpose: "Specify the activity heatmap sheet design and behavior"
+triggers: ["activity sheet", "heatmap", "user activity"]
+keywords: ["heatmap", "sheet", "activity", "semester", "sticky"]
+importance: "high"
+size: "600 words"
+status: "active"
+created: "2025-12-10"
+updated: "2025-12-10"
+
+
+
+
+
+---
+
+==> memory-bank/ui-native-design/group-profile.md <==
+---
+purpose: "Document the Group Profile layout and interactions"
+triggers: ["group profile", "ui design", "member list"]
+keywords: ["group", "profile", "layout", "members", "hierarchy"]
+importance: "critical"
+size: "1000 words"
+status: "active"
+created: "2025-12-10"
+updated: "2025-12-10"
+
+
+
+
+
+---
+
+==> memory-bank/ui-native-design/members-and-actions.md <==
+---
+purpose: "Define member list filtering, sorting, and quick actions"
+triggers: ["member list", "filter", "actions"]
+keywords: ["members", "filter", "role", "state", "optimistic"]
+importance: "high"
+size: "800 words"
+status: "active"
+created: "2025-12-10"
+updated: "2025-12-10"
+
+
+
+
+
+---
+
+==> memory-bank/ui-native-design/shell-navigation.md <==
+---
+purpose: "Define the app shell and navigation patterns for the native design"
+triggers: ["navigation design", "bottom bar", "sheet stack"]
+keywords: ["shell", "navigation", "bottom bar", "sheets"]
+importance: "critical"
+size: "800 words"
+status: "active"
+created: "2025-12-10"
+updated: "2025-12-10"
+
+
+
+
+
+---
+
+==> memory-bank/ui-native-design/ui-vision.md <==
+---
+purpose: "Define the design philosophy shift from Bootstrap Admin to Native/Linear"
+triggers: ["UI refactor", "design review", "component updates"]
+keywords: ["design", "native", "linear", "phonebook", "search-first"]
+importance: "critical"
+size: "1000 tokens"
+status: "active"
+created: "2025-12-10"
+updated: "2025-12-10"
+
+
+
+
+
+---
+
+==> memory-bank/ui-native-design/user-profile.md <==
+---
+purpose: "Document the User Profile layout and interactions"
+triggers: ["user profile", "ui design", "contact icons"]
+keywords: ["user", "profile", "layout", "contacts", "heatmap"]
+importance: "critical"
+size: "900 words"
+status: "active"
+created: "2025-12-10"
+updated: "2025-12-10"
+
+
+
+
+
+---
+
+==> memory-bank/user/profile.md <==
 ---
 purpose: "User and Profile models; single profile in hub across federation, privacy scope restrictions"
 triggers: ["implementing user queries", "designing profile access", "handling federated users", "privacy boundaries"]
diff --git a/.github/generate-instructions.sh b/.github/generate-instructions.sh
index 3b1da60..e7aa742 100755
--- a/.github/generate-instructions.sh
+++ b/.github/generate-instructions.sh
@@ -1,5 +1,5 @@
 #!/bin/bash
-set -euo pipefail
+set -exuo pipefail
 
 # Get the directory where this script is located
 SCRIPT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
@@ -13,7 +13,9 @@ cat > copilot-instructions.md << 'EOF'
 <memory-bank>
 EOF
 
-head -n 15 "$SCRIPT_DIR"/../memory-bank/**/*.md >> copilot-instructions.md
+pushd "$SCRIPT_DIR/../"
+head -n 15 memory-bank/**/*.md >> "$SCRIPT_DIR/copilot-instructions.md"
+popd
 
 cat >> copilot-instructions.md << 'EOF'
 </memory-bank>
diff --git a/full-stack/src/styles.css b/full-stack/src/styles.css
index 1eaa394..1def530 100644
--- a/full-stack/src/styles.css
+++ b/full-stack/src/styles.css
@@ -62,7 +62,15 @@ code {
     source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
 }
 
-:root {
+@theme {
+  --transition-duration-instant: 50ms;
+  --transition-duration-quick: 150ms;
+  --transition-duration-snap: 250ms;
+  --transition-duration-fluid: 350ms;
+  --transition-duration-deliberate: 500ms;
+}
+
+.light, :root {
   /* 
     LIGHT MODE: "Tactile Professionalism"
     Concept: A sheet of high-quality paper. Invisible cards.
@@ -134,7 +142,7 @@ code {
 .dark {
   /* 
     DARK MODE: "The Void"
-    Concept: Premium OLED. Deep violet tint, no grey wash.
+    Concept: Premium OLED. Deep violet tint, no gray wash.
   */
   --background: oklch(0.10 0.02 280); /* Deep rich violet-black */
   --foreground: oklch(0.98 0.01 280);
diff --git a/memory-bank/.federation/vision.md b/memory-bank/.federation/federation-vision.md
similarity index 99%
rename from memory-bank/.federation/vision.md
rename to memory-bank/.federation/federation-vision.md
index aca149b..0f94b72 100644
--- a/memory-bank/.federation/vision.md
+++ b/memory-bank/.federation/federation-vision.md
@@ -3,7 +3,7 @@ purpose: "Complete federation model - hub/worker relationships, realm concept, i
 triggers: ["planning future", "scaling", "understanding federation"]
 keywords: ["federation", "vision", "scaling", "hub", "worker", "realm"]
 importance: "future"
-size: "1500 words"
+size: "1000 tokens"
 status: "active"
 created: "2025-11-27"
 updated: "2025-11-27"
diff --git a/memory-bank/rules/frontmatter.md b/memory-bank/rules/frontmatter.md
index 0a33d46..921df61 100644
--- a/memory-bank/rules/frontmatter.md
+++ b/memory-bank/rules/frontmatter.md
@@ -26,7 +26,7 @@ purpose: "Short description of the file"
 triggers: ["when to read this"]
 keywords: ["keywords", "for", "search"]
 importance: "must know" | "probably needed" | "nice to know" | "archive" | "deprecated" | "something else, freetext"
-size: "approx tokens or words. Round to nearest 100 or 1000."
+size: "approx tokens or words. Round to nearest 100."
 status: "active"
 created: "YYYY-MM-DD"
 updated: "YYYY-MM-DD"
diff --git a/memory-bank/tokens-and-visuals.md b/memory-bank/tokens-and-visuals.md
new file mode 100644
index 0000000..d8920d3
--- /dev/null
+++ b/memory-bank/tokens-and-visuals.md
@@ -0,0 +1,44 @@
+---
+purpose: "Define spacing and sizing tokens and visual systems"
+triggers: ["styling components", "adjusting layout", "design system updates"]
+keywords: ["tokens", "spacing", "sizing", "visuals", "tailwind"]
+importance: "must know"
+size: "500 words"
+status: "active"
+created: "2025-12-10"
+updated: "2025-12-10"
+
+
+
+
+
+---
+
+# Spacing and Sizing Systems
+
+## 1. THE SPACING SYSTEM (Relationships: Padding, Margin, Gap)
+
+This system is for controlling the space between elements. We strictly use the Tailwind scale based on your company's desired rhythm (4px, 6px, 8px, 12px, 16px, 20px).
+
+| Semantic Job | Tailwind Class | Value (px) | Company Value (px) | Usage Context |
+| :--- | :--- | :--- | :--- | :--- |
+| Micro Gap | p-1 / gap-1 | 4px | 4px | Tightest alignment. Required for icon and text in a compact label or tag. |
+| Subtle Gap | gap-1.5 | 6px | 6px | Used for spacing small, related elements where 8px is too loose (e.g., small status indicators). |
+| Inline Gap | p-2 / gap-2 | 8px | 8px | Standard horizontal space between an icon and a primary label, or closely related buttons. |
+| Item Gap | p-3 / gap-3 | 12px | 12px | Vertical separation within a component (e.g., Title from Description). Standard padding for small components. |
+| Group Gap | p-4 / gap-4 | 16px | 16px | The Default. Vertical/Horizontal separation between items in a list, table rows, or distinct groups. |
+| Section Gap | p-5 / gap-5 | 20px | 20px | Major separation between content blocks or primary sections on a page. |
+| Card Padding | p-6 / m-6 | 24px | 24px | Standard Padding inside any white or colored content box/card. |
+| Panel Padding | p-8 / m-8 | 32px | 32px | Padding inside large containers like sidebars, modals, and slide-over panels. |
+| Page Padding | p-10 / m-10 | 40px | 40px | Padding for the main viewport edge-to-edge content. |
+
+## 2. THE SIZING SYSTEM (Component Dimensions)
+
+This system is for setting fixed width (w-*), height (h-*), and size (size-*) for structural components like Avatars, Inputs, and Icons. It directly maps to your 8, 16, 24... scale.
+
+| Semantic Size | Tailwind Class | Value (px) | Company Value (px) | Usage Context |
+| :--- | :--- | :--- | :--- | :--- |
+| Size-XS | size-2 | 8px | 8px | Tiny status dots, small badges. |
+| Size-SM | size-4 | 16px | 16px | Standard Icon Size (e.g., Lucide icons inside a button). |
+| Size-MD | size-6 | 24px | 24px | Small Avatar (3x3 grid), standard checkbox/radio size. |
+| Size-LG | size-8 | 32px | 32px | Medium Avatar, large touch targets (mobile only). |
diff --git a/memory-bank/ui-native-design/activity-sheets.md b/memory-bank/ui-native-design/activity-sheets.md
index b1a277e..371de31 100644
--- a/memory-bank/ui-native-design/activity-sheets.md
+++ b/memory-bank/ui-native-design/activity-sheets.md
@@ -7,6 +7,11 @@ size: "600 words"
 status: "active"
 created: "2025-12-10"
 updated: "2025-12-10"
+
+
+
+
+
 ---
 
 # Activity Sheets
diff --git a/memory-bank/ui-native-design/group-profile.md b/memory-bank/ui-native-design/group-profile.md
index 6002b58..44a2430 100644
--- a/memory-bank/ui-native-design/group-profile.md
+++ b/memory-bank/ui-native-design/group-profile.md
@@ -7,6 +7,11 @@ size: "1000 words"
 status: "active"
 created: "2025-12-10"
 updated: "2025-12-10"
+
+
+
+
+
 ---
 
 # Group Profile
diff --git a/memory-bank/ui-native-design/members-and-actions.md b/memory-bank/ui-native-design/members-and-actions.md
index 48e4ba4..58029f0 100644
--- a/memory-bank/ui-native-design/members-and-actions.md
+++ b/memory-bank/ui-native-design/members-and-actions.md
@@ -7,6 +7,11 @@ size: "800 words"
 status: "active"
 created: "2025-12-10"
 updated: "2025-12-10"
+
+
+
+
+
 ---
 
 # Members & Actions
diff --git a/memory-bank/ui-native-design/shell-navigation.md b/memory-bank/ui-native-design/shell-navigation.md
index b741cef..6cbd0c5 100644
--- a/memory-bank/ui-native-design/shell-navigation.md
+++ b/memory-bank/ui-native-design/shell-navigation.md
@@ -7,6 +7,11 @@ size: "800 words"
 status: "active"
 created: "2025-12-10"
 updated: "2025-12-10"
+
+
+
+
+
 ---
 
 # Shell & Navigation
diff --git a/memory-bank/ui-native-design/design-vision.md b/memory-bank/ui-native-design/ui-vision.md
similarity index 93%
rename from memory-bank/ui-native-design/design-vision.md
rename to memory-bank/ui-native-design/ui-vision.md
index 16c1d4b..2e70cc2 100644
--- a/memory-bank/ui-native-design/design-vision.md
+++ b/memory-bank/ui-native-design/ui-vision.md
@@ -3,10 +3,15 @@ purpose: "Define the design philosophy shift from Bootstrap Admin to Native/Line
 triggers: ["UI refactor", "design review", "component updates"]
 keywords: ["design", "native", "linear", "phonebook", "search-first"]
 importance: "critical"
-size: "1200 words"
+size: "1000 tokens"
 status: "active"
 created: "2025-12-10"
 updated: "2025-12-10"
+
+
+
+
+
 ---
 
 # Design Vision: Bootstrap Admin → Native/Linear
@@ -87,13 +92,6 @@ This is a **fundamental architecture change**, not cosmetic.
 - User & Group profiles are equally important
 - Membership is an **entity** (not just a join table)
 
-## Memory Bank Structure
-
-This folder contains:
-- `design-vision.md` (this file) — Philosophy & principles
-- `shell-architecture.md` — App shell, bottom nav, sheet stack
-- `patterns.md` — Reusable interaction patterns
-
 ## Conversion Rules: From Bootstrap → Native
 
 | Bootstrap | Native | Rationale |
@@ -105,4 +103,4 @@ This folder contains:
 | Page reloads | Sheet overlays | Continuity |
 | Shadows & borders | Subtle dividers | Minimal chrome |
 | "View" buttons | Tap row directly | Content-first |
-| Spinners on interactions | Optimistic updates | Responsive feel |
\ No newline at end of file
+| Spinners on interactions | Optimistic updates | Responsive feel |
diff --git a/memory-bank/ui-native-design/user-profile.md b/memory-bank/ui-native-design/user-profile.md
index 9b81604..42abd91 100644
--- a/memory-bank/ui-native-design/user-profile.md
+++ b/memory-bank/ui-native-design/user-profile.md
@@ -7,6 +7,11 @@ size: "900 words"
 status: "active"
 created: "2025-12-10"
 updated: "2025-12-10"
+
+
+
+
+
 ---
 
 # User Profile
diff --git a/memory-bank/ui-native-design/vision.md b/memory-bank/ui-native-design/vision.md
deleted file mode 100644
index e8f5970..0000000
--- a/memory-bank/ui-native-design/vision.md
+++ /dev/null
@@ -1,113 +0,0 @@
----
-purpose: "Define the design philosophy shift from Bootstrap Admin to Native/Linear"
-triggers: ["UI refactor", "design review", "component updates"]
-keywords: ["design", "native", "linear", "phonebook", "search-first"]
-importance: "critical"
-size: "1500 words"
-status: "active"
-created: "2025-12-10"
-updated: "2025-12-10"
----
-
-# Design Vision: Bootstrap Admin → Native/Linear
-
-## The Shift
-
-We are moving from a "Bootstrap Admin Page" aesthetic (card-based, boxed containers) to a "Native/Linear" design (content-first, whitespace-driven, gesture-based).
-
-This is a **fundamental architecture change**, not cosmetic.
-
-## Core Principles
-
-### 1. Invisible Structures
-- **Kill the card metaphor**: No rounded boxes with shadows on generic backgrounds
-- **Use whitespace & negative space** to organize data
-- **1px dividers** between logical sections (not containers)
-- Content defines the interface, not chrome
-
-### 2. Thumb-Zone Supremacy
-- Navigation and primary actions live in **bottom 30%** (OneUI principle)
-- Reachability is mandatory — users shouldn't hunt
-- Bottom bar is persistent, always accessible
-- Content scrolls; controls don't
-
-### 3. Death to Hamburger Menu
-- No off-canvas navigation
-- Use **persistent bottom bars** + **stackable sheets**
-- Context is always visible
-- Navigation is friction-free
-
-### 4. Content is the Interface
-- Reduce button clutter
-- If data can be tapped/swiped directly, do it
-- Don't add a "View" button when the row itself should be interactive
-- Rows are actionable by default
-
-### 5. Optimistic Physics
-- UI reacts **instantly** to touch
-- Data syncs in the background
-- Never show a spinner for simple toggles (Revolut pattern)
-- Feedback is tactile and present
-
-### 6. Tactile Precision
-- High-density information without visual chaos
-- Rigorous alignment creates order
-- Gesture states (swipe, drag) are distinct
-- Micro-interactions soften professional rigidity
-
-### 7. Sheets Over Modals
-- Avoid center-screen popups (jarring, takes focus)
-- Complex interactions happen in **slide-up panels**
-- Sheets preserve context — you see the background
-- Sheets are dismissible by gesture
-
-### 8. Humanized Micro-interactions
-- Hover/active states feel responsive
-- Don't just change color — add weight, scale, or movement
-- Feedback should feel intentional, not mechanical
-
-### 9. Native Fluidity
-- Eliminate "white flash" routing artifacts
-- App behaves like a **single living organism**
-- Transitions are smooth, content feels connected
-- No page reloads — state flows between screens
-
-## Core Use Case: Search-First Phonebook
-
-**Users**: 10,000+ people across 100+ groups
-**User's context**: 3-10 groups on average
-**Primary actions**:
-1. Search for a user by name
-2. Search for a group by name
-3. View user profile with their groups
-4. View group profile with hierarchy, leader, metadata
-
-**Design consequence**: 
-- Search is a **core navigation element**, not a buried feature
-- User & Group profiles are equally important
-- Membership is an **entity** (not just a join table)
-
-## Memory Bank Structure
-
-This folder contains:
-- `vision.md` (this file) — Philosophy & principles
-- `shell-navigation.md` — App shell and navigation patterns
-- `user-profile.md` — User Profile layout and interactions
-- `group-profile.md` — Group Profile layout and interactions
-- `members-and-actions.md` — Group members list, filtering, and quick actions
-- `activity-sheets.md` — User activity sheet design
-- `tokens-and-visuals.md` — Design tokens, typography, spacing, iconography
-- `todos-home-search-manage.md` — Placeholders for remaining major screens
-
-## Conversion Rules: From Bootstrap → Native
-
-| Bootstrap | Native | Rationale |
-|-----------|--------|-----------|
-| Card containers | Whitespace + dividers | Content breathes |
-| Modal popups | Bottom sheets | Context preserved |
-| Hamburger menu | Bottom nav | Reachability |
-| Button-heavy UI | Row-based actions | Simplicity |
-| Page reloads | Sheet overlays | Continuity |
-| Shadows & borders | Subtle dividers | Minimal chrome |
-| "View" buttons | Tap row directly | Content-first |
-| Spinners on interactions | Optimistic updates | Responsive feel |

From f4dafbac8f4bdd69cdeba936d852f9ce400f2674 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tam=C3=A1s=20S=C3=BCdi?= <sudi.tamas@simonyi.bme.hu>
Date: Wed, 10 Dec 2025 14:33:46 +0100
Subject: [PATCH 4/4] format file

---
 full-stack/src/styles.css | 71 +++++++++++++++++++++------------------
 1 file changed, 38 insertions(+), 33 deletions(-)

diff --git a/full-stack/src/styles.css b/full-stack/src/styles.css
index 1def530..9319cd6 100644
--- a/full-stack/src/styles.css
+++ b/full-stack/src/styles.css
@@ -70,7 +70,8 @@ code {
   --transition-duration-deliberate: 500ms;
 }
 
-.light, :root {
+.light,
+:root {
   /* 
     LIGHT MODE: "Tactile Professionalism"
     Concept: A sheet of high-quality paper. Invisible cards.
@@ -83,7 +84,7 @@ code {
   --card: oklch(0.99 0.002 285);
   --card-foreground: oklch(0.13 0.02 285);
 
-  --popover: oklch(1.0 0 0);
+  --popover: oklch(1 0 0);
   --popover-foreground: oklch(0.13 0.02 285);
 
   /* Elite Purple: Deep, authoritative, not playful */
@@ -92,11 +93,11 @@ code {
 
   /* Secondary: Soft lavender for depth without borders */
   --secondary: oklch(0.92 0.03 290);
-  --secondary-foreground: oklch(0.30 0.05 290);
+  --secondary-foreground: oklch(0.3 0.05 290);
 
   /* Muted: For metadata/subtext */
   --muted: oklch(0.96 0.01 285);
-  --muted-foreground: oklch(0.50 0.02 285);
+  --muted-foreground: oklch(0.5 0.02 285);
 
   /* Accent: AMBER mapping for "Home" warmth on interaction */
   --accent: oklch(0.94 0.06 85); /* Pale Amber wash */
@@ -111,10 +112,10 @@ code {
 
   /* Charting adjusted to Purple/Amber/Teal trio */
   --chart-1: oklch(0.45 0.18 290); /* Purple */
-  --chart-2: oklch(0.75 0.16 85);  /* Amber */
-  --chart-3: oklch(0.60 0.15 180); /* Teal */
-  --chart-4: oklch(0.55 0.10 250); /* Blue */
-  --chart-5: oklch(0.85 0.10 85);  /* Soft Amber */
+  --chart-2: oklch(0.75 0.16 85); /* Amber */
+  --chart-3: oklch(0.6 0.15 180); /* Teal */
+  --chart-4: oklch(0.55 0.1 250); /* Blue */
+  --chart-5: oklch(0.85 0.1 85); /* Soft Amber */
 
   /* Radii: Sleek but approachable (Apple/Linear standard) */
   --radius: 0.75rem;
@@ -123,9 +124,12 @@ code {
   --shadow-2xs: 0 1px 2px -1px rgb(0 0 0 / 0.05);
   --shadow-xs: 0 1px 3px 0 rgb(0 0 0 / 0.05);
   --shadow-sm: 0 4px 6px -1px rgb(0 0 0 / 0.05);
-  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.05), 0 2px 4px -2px rgb(0 0 0 / 0.05);
-  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.05), 0 4px 6px -4px rgb(0 0 0 / 0.05);
-  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.05), 0 8px 10px -6px rgb(0 0 0 / 0.05);
+  --shadow-md:
+    0 4px 6px -1px rgb(0 0 0 / 0.05), 0 2px 4px -2px rgb(0 0 0 / 0.05);
+  --shadow-lg:
+    0 10px 15px -3px rgb(0 0 0 / 0.05), 0 4px 6px -4px rgb(0 0 0 / 0.05);
+  --shadow-xl:
+    0 20px 25px -5px rgb(0 0 0 / 0.05), 0 8px 10px -6px rgb(0 0 0 / 0.05);
   --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.15);
 
   /* Sidebar: Blends with background */
@@ -144,23 +148,23 @@ code {
     DARK MODE: "The Void"
     Concept: Premium OLED. Deep violet tint, no gray wash.
   */
-  --background: oklch(0.10 0.02 280); /* Deep rich violet-black */
+  --background: oklch(0.1 0.02 280); /* Deep rich violet-black */
   --foreground: oklch(0.98 0.01 280);
 
   /* Invisible UI: Card matches background to create depth via borders/hover only */
-  --card: oklch(0.10 0.02 280);
+  --card: oklch(0.1 0.02 280);
   --card-foreground: oklch(0.98 0.01 280);
 
-  --popover: oklch(0.10 0.02 280);
+  --popover: oklch(0.1 0.02 280);
   --popover-foreground: oklch(0.98 0.01 280);
 
   /* Primary: Electric Violet - High energy */
   --primary: oklch(0.65 0.22 290);
-  --primary-foreground: oklch(0.10 0.02 280);
+  --primary-foreground: oklch(0.1 0.02 280);
 
   /* Secondary: Deep muted violet surface */
-  --secondary: oklch(0.20 0.04 285);
-  --secondary-foreground: oklch(0.90 0.02 285);
+  --secondary: oklch(0.2 0.04 285);
+  --secondary-foreground: oklch(0.9 0.02 285);
 
   /* Muted: Receded text */
   --muted: oklch(0.15 0.02 280);
@@ -168,40 +172,42 @@ code {
 
   /* Accent: Amber Glow - The "Hearth" in the dark */
   --accent: oklch(0.25 0.08 85); /* Dark Amber wash */
-  --accent-foreground: oklch(0.90 0.05 85); /* Bright Amber text */
+  --accent-foreground: oklch(0.9 0.05 85); /* Bright Amber text */
 
-  --destructive: oklch(0.5 0.20 25);
+  --destructive: oklch(0.5 0.2 25);
   --destructive-foreground: oklch(0.98 0 0);
 
   /* Borders: Very subtle, defining the "invisible" structure */
-  --border: oklch(0.20 0.02 280);
-  --input: oklch(0.20 0.02 280);
+  --border: oklch(0.2 0.02 280);
+  --input: oklch(0.2 0.02 280);
   --ring: oklch(0.65 0.22 290);
 
   /* Charting adjusted for dark mode contrast */
   --chart-1: oklch(0.65 0.22 290);
-  --chart-2: oklch(0.70 0.16 85);
-  --chart-3: oklch(0.60 0.15 180);
-  --chart-4: oklch(0.60 0.10 250);
-  --chart-5: oklch(0.80 0.10 85);
+  --chart-2: oklch(0.7 0.16 85);
+  --chart-3: oklch(0.6 0.15 180);
+  --chart-4: oklch(0.6 0.1 250);
+  --chart-5: oklch(0.8 0.1 85);
 
   /* Sidebar: Unified dark */
-  --sidebar: oklch(0.10 0.02 280);
+  --sidebar: oklch(0.1 0.02 280);
   --sidebar-foreground: oklch(0.98 0.01 280);
   --sidebar-primary: oklch(0.65 0.22 290);
-  --sidebar-primary-foreground: oklch(0.10 0.02 280);
+  --sidebar-primary-foreground: oklch(0.1 0.02 280);
   --sidebar-accent: oklch(0.25 0.08 85);
-  --sidebar-accent-foreground: oklch(0.90 0.05 85);
-  --sidebar-border: oklch(0.20 0.02 280);
+  --sidebar-accent-foreground: oklch(0.9 0.05 85);
+  --sidebar-border: oklch(0.2 0.02 280);
   --sidebar-ring: oklch(0.65 0.22 290);
-  
+
   /* Shadows: Removed colored tint, purely low-alpha black */
   --shadow-2xs: 0 1px 2px -1px rgb(0 0 0 / 0.2);
   --shadow-xs: 0 1px 3px 0 rgb(0 0 0 / 0.2);
   --shadow-sm: 0 4px 6px -1px rgb(0 0 0 / 0.2);
   --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.2), 0 2px 4px -2px rgb(0 0 0 / 0.2);
-  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.2), 0 4px 6px -4px rgb(0 0 0 / 0.2);
-  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.2), 0 8px 10px -6px rgb(0 0 0 / 0.2);
+  --shadow-lg:
+    0 10px 15px -3px rgb(0 0 0 / 0.2), 0 4px 6px -4px rgb(0 0 0 / 0.2);
+  --shadow-xl:
+    0 20px 25px -5px rgb(0 0 0 / 0.2), 0 8px 10px -6px rgb(0 0 0 / 0.2);
   --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.3);
 }
 
@@ -253,7 +259,6 @@ code {
   --tracking-widest: 0.1em;
 }
 
-
 @layer base {
   * {
     @apply border-border outline-ring/50;