feat: checkpoint API migration and dzikir UX updates

logo-luxury-theme-brief.md

@@ -0,0 +1,107 @@
+# Logo Palette + Luxury Active Menu Brief
+
+## 1) Objective
+Adopt the app's visual identity from the logo palette (teal + gold) and introduce a luxury-feel active menu state for both dark and light themes.
+
+Key intent:
+- Brand-consistent color system.
+- Premium, elegant active menu treatment.
+- Subtle animated gold shine (not flashy, not distracting).
+
+## 2) Design Direction
+
+### Brand mood
+- Calm spiritual base: teal tones.
+- Premium emphasis: gold used only for highlights/active states.
+- Minimal and clean surfaces, with controlled depth (soft shadow + thin stroke).
+
+### Usage rule
+- Teal = foundation color.
+- Gold = premium interaction color (active nav, selected/high-priority accents).
+- Avoid using gold as the global background.
+
+## 3) Proposed Color Tokens
+
+These are starting values to tune after visual QA:
+
+### Core brand tokens
+- `brand.teal.500`: `#118A8D`
+- `brand.teal.700`: `#0C676A`
+- `brand.teal.900`: `#0A4447`
+- `brand.gold.400`: `#D6A21D`
+- `brand.gold.300`: `#E9C75B`
+- `brand.gold.200`: `#F6DE96`
+- `brand.gold.700`: `#8B6415`
+
+### Dark theme base
+- `bg.dark`: `#0F1217`
+- `surface.dark`: `#171B22`
+- `surface.dark.elevated`: `#1D222B`
+- `text.dark.primary`: `#E8ECF2`
+- `text.dark.secondary`: `#9AA4B2`
+
+### Light theme base
+- `bg.light`: `#F3F4F6`
+- `surface.light`: `#FFFFFF`
+- `surface.light.elevated`: `#F9FAFB`
+- `text.light.primary`: `#1F2937`
+- `text.light.secondary`: `#6B7280`
+
+## 4) Active Menu Visual Spec
+
+### Shape and structure
+- Active menu item uses rounded-square container.
+- Ring consists of:
+  - Inner metallic gold stroke.
+  - Soft outer glow (stronger in dark mode, lighter in light mode).
+- Inactive items remain neutral gray/secondary text.
+
+### Gold ring treatment
+- Gradient on ring: dark-gold -> bright-gold -> pale-gold -> dark-gold.
+- Keep ring thin and crisp (avoid thick glowing halo).
+- Shine highlight should pass around the ring edge only.
+
+### Light mode adaptation
+- Reduce glow blur and opacity by ~35-45% vs dark mode.
+- Add subtle neutral shadow to preserve depth on bright surfaces.
+
+## 5) Motion Spec (Shine Animation)
+
+- Animation target: active menu ring only.
+- Loop duration: `2.8s-3.6s`.
+- Shine pass visibility: short burst (`~700-900ms`) then calm period.
+- Easing: smooth in/out (no linear harsh movement).
+- Keep animation subtle enough to avoid drawing attention from content.
+
+Reduced motion behavior:
+- If reduced motion is enabled, disable moving shine and keep static gold ring.
+
+## 6) Accessibility & Quality Constraints
+
+- Maintain icon/text contrast minimum:
+  - Non-text UI/icon target: at least `3:1`.
+  - Small text target: at least `4.5:1`.
+- Gold accents must not reduce legibility.
+- Active state must remain distinguishable in both themes without relying only on color.
+
+## 7) Product Rules
+
+- Apply luxury active style only to active navigation state (not every component).
+- Keep one source of truth for tokens across screens.
+- Preserve current interaction speed and perceived responsiveness.
+
+## 8) Rollout Plan
+
+1. Approve token palette on static mockups (dark + light).
+2. Apply to one pilot component: bottom navigation active item.
+3. Validate contrast and motion comfort.
+4. Roll out to other selected active states (tabs/chips), not all controls.
+
+## 9) Acceptance Criteria
+
+- Brand identity clearly reflects logo colors.
+- Active menu looks premium in dark and light mode.
+- Shine animation feels elegant and subtle, never distracting.
+- No readability regressions.
+- Reduced-motion path is supported.
+