File size: 2,385 Bytes
542c765
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
// lib/tokens.ts
// ─────────────────────────────────────────────
// Extracted from NutritionPage β€” single source of truth.
// Every page imports from here. Change once, updates everywhere.
// ─────────────────────────────────────────────

export const colors = {
    // Core backgrounds
    bg: "#0d0d1a",
    bgCard: "rgba(255,255,255,0.025)",
    bgCardHover: "rgba(255,255,255,0.05)",
    bgSubtle: "rgba(255,255,255,0.04)",

    // Borders
    border: "rgba(255,255,255,0.07)",
    borderStrong: "rgba(255,255,255,0.12)",

    // Text hierarchy (matches your existing opacity ladder)
    textPrimary: "#FFFFFF",
    textSecondary: "rgba(255,255,255,0.60)",
    textMuted: "rgba(255,255,255,0.40)",
    textFaint: "rgba(255,255,255,0.25)",
    textTiny: "rgba(255,255,255,0.15)",

    // Brand accent β€” saffron
    accent: "#FF9933",
    accentBg: "rgba(255,153,51,0.10)",
    accentBorder: "rgba(255,153,51,0.20)",

    // Semantic
    ok: "#22C55E",
    okBg: "rgba(34,197,94,0.10)",
    warn: "#EF4444",
    warnBg: "rgba(239,68,68,0.10)",
    caution: "#F59E0B",
    cautionBg: "rgba(245,158,11,0.10)",
} as const;

// Severity config β€” used for badges, card accents, borders
export const severity = {
    normal: { label: "Normal", color: "#22C55E", bg: "rgba(34,197,94,0.10)" },
    monitor: { label: "Monitor", color: "#F59E0B", bg: "rgba(245,158,11,0.10)" },
    urgent: { label: "See doctor", color: "#EF4444", bg: "rgba(239,68,68,0.10)" },
} as const;

export type SeverityLevel = keyof typeof severity;

// Standard Framer Motion presets β€” spread these on motion.div
export const motionPresets = {
    fadeUp: {
        initial: { opacity: 0, y: 12 },
        animate: { opacity: 1, y: 0 },
        transition: { duration: 0.3 },
    },
    fadeIn: {
        initial: { opacity: 0 },
        animate: { opacity: 1 },
        transition: { duration: 0.3 },
    },
    scaleIn: {
        initial: { opacity: 0, scale: 0.97 },
        animate: { opacity: 1, scale: 1 },
        transition: { duration: 0.3 },
    },
} as const;

// Section label style β€” reused across every page
export const sectionLabelClass =
    "text-white/40 text-xs font-medium uppercase tracking-widest mb-3";