chore: initial project setup with documentation and design assets

Add project foundation: CLAUDE.md, requirements tracking system,
technical architecture docs, Firestore setup guide, device testing guide,
and Stitch design mockups for Precision Vitality app.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

stitch_calorietracker_design_brief_brief/vitality_pulse/DESIGN.md

@@ -0,0 +1,76 @@
+# Design System Document: Precision Vitality
+
+## 1. Overview & Creative North Star
+The "Creative North Star" for this design system is **The Kinetic Editor**. 
+
+While many fitness apps feel like static spreadsheets, this system treats health data as a living, breathing editorial story. We move beyond the "standard tracker" by utilizing high-contrast typography scales, intentional asymmetry, and a sophisticated layering system. The goal is to make the user feel like they are interacting with a premium digital magazine that reacts to their progress. By breaking the grid with overlapping elements and prioritizing tonal depth over rigid borders, we create an environment that feels energetic yet remarkably clean.
+
+## 2. Color Strategy: Tonal Vitality
+Our palette utilizes the Material Design convention to ensure a "Health Green" core that feels professional rather than radioactive.
+
+### The "No-Line" Rule
+**Borders are prohibited.** You must never use a 1px solid border to define sections. Boundaries are created through:
+*   **Background Shifts:** Placing a `surface-container-lowest` card against a `surface` background.
+*   **Tonal Transitions:** Using `surface-container-low` for secondary groupings to create natural separation.
+
+### Surface Hierarchy & Nesting
+Treat the UI as a series of physical layers—like stacked sheets of fine paper.
+*   **Level 0 (Base):** `surface` (#f6f6f6) – The canvas.
+*   **Level 1 (Sections):** `surface-container-low` (#f0f1f1) – For grouping related modules.
+*   **Level 2 (Active Cards):** `surface-container-lowest` (#ffffff) – The highest priority interactive elements.
+
+### The "Glass & Gradient" Rule
+To inject "visual soul," use subtle gradients.
+*   **Primary Action:** Transition from `primary` (#006b1b) to `primary-dim` (#005d16) at a 135° angle.
+*   **Floating Elements:** Apply Glassmorphism to top navigation bars or floating action buttons using `surface` at 80% opacity with a `24px` backdrop-blur.
+
+## 3. Typography: Editorial Impact
+We pair the geometric precision of **Lexend** for data with the humanist readability of **Plus Jakarta Sans** for interface elements.
+
+*   **Main Kcal Display (`display-lg`):** Lexend, 3.5rem (56px), Bold. Use `primary` color. This is the "Hero" of the screen.
+*   **Section Headlines (`headline-sm`):** Lexend, 1.5rem. Use `on-surface`.
+*   **Primary Labels (`label-md`):** Plus Jakarta Sans, 0.75rem, Medium. Use `on-surface-variant` for metadata.
+*   **Body Copy (`body-lg`):** Plus Jakarta Sans, 1rem, Regular. Use `on-surface`.
+
+The high contrast between the massive `display-lg` calorie counts and the tight `label-sm` metadata creates an "Editorial" hierarchy that guides the eye instantly to what matters.
+
+## 4. Elevation & Depth: Tonal Layering
+Depth is achieved through "stacking" rather than traditional drop shadows.
+
+*   **The Layering Principle:** Avoid shadows on static cards. Instead, place a `surface-container-lowest` card on a `surface-container` background. The subtle 2-3% shift in hex value provides a sophisticated, modern lift.
+*   **Ambient Shadows:** For floating elements (e.g., a "Log Food" button), use a 15% opacity `primary` color shadow: `0px 12px 32px rgba(0, 107, 27, 0.15)`. This mimics natural light reflecting off a colored surface.
+*   **The Ghost Border Fallback:** If accessibility requires a stroke, use `outline-variant` at 15% opacity. Never use 100% opaque lines.
+
+## 5. Components: The Kinetic Suite
+
+### Progress Bars (The Core Vital)
+*   **Style:** Horizontal, `12px` height, `full` roundedness. 
+*   **Container:** `surface-container-highest`.
+*   **Fill:** A linear gradient from `primary-fixed` to `primary`.
+*   **Animation:** Always use a "Spring" ease-out (0.6s) to make progress feel energetic.
+
+### Cards & Modules
+*   **Rule:** Forbid divider lines. Use `1.5rem (xl)` corner radius for main dashboard cards and `1rem (lg)` for nested items.
+*   **Spacing:** Use `24px` vertical padding to provide significant breathing room.
+
+### Buttons
+*   **Primary:** `primary` background, `on-primary` text. No shadow. `full` roundedness.
+*   **Secondary (Energy):** `secondary-container` background, `on-secondary-container` text. Use for "Add Calories" or "High Energy" actions.
+
+### Input Fields
+*   **Style:** Minimalist. No bottom line. Use a `surface-container-low` background with a `0.5rem (sm)` radius. On focus, transition background to `surface-container-highest`.
+
+### Contextual Components: "The Macro-Donut"
+*   Use a large-scale, thin-stroke (4px) ring for Macronutrient breakdowns. Overlap the donut slightly with the `display-lg` calorie title to create a sense of depth and custom-fit design.
+
+## 6. Do's and Don'ts
+
+### Do:
+*   **Do** use asymmetrical margins. For example, give the "Main Kcal" title a larger left-hand gutter (32px) than the body text (16px) to create a rhythmic, magazine-style layout.
+*   **Do** use `secondary` (Energy Orange) sparingly for high-motivation moments only (e.g., reaching a streak).
+*   **Do** prioritize "Breathing Room." If a screen feels crowded, increase the `surface-container` spacing rather than adding lines.
+
+### Don't:
+*   **Don't** use Material Icons in their "Filled" state if they feel too heavy. Use "Outlined" or "Two-Tone" with `outline` color to maintain the "Clean" mood.
+*   **Don't** ever use #000000 for text. Always use `on-background` or `on-surface` (#2d2f2f) to keep the look premium and soft.
+*   **Don't** use standard 4px "Card Shadows." If it doesn't look like it's floating in a real-world space, don't shadow it.