/* ========================================================================== tokens.css — Design Tokens za ChapChakula (V10, CHANZO KIMOJA) Hii ndiyo faili ya tokens ya mfumo mzima. Inalingana na search.css, business.css na auth.css: thamani ni zile zile. TABAKA 1. Primitive rangi ghafi (--green-900, --chili-500 ...) 2. Foundation scales zisizobadilika (spacing, type, radius, motion) 3. Semantic maana (--text-muted, --action-bg, --card-shadow ...) 4. Dark hiari: 5. Legacy majina ya zamani (--jiko-*, --sp-*, --dist-*) yanaelekezwa kwenye tokens mpya ili CSS/PHP ya zamani isivunjike. MATUMIZI - Pakia tokens.css KWANZA, kisha search.css / business.css / auth.css. - Kila ukurasa unaweza kubadilisha --content-width yake tu. - Kubadilisha rangi ya brand ni sehemu moja: primitives. ========================================================================== */ /* ========================================================================== 1. PRIMITIVE TOKENS ========================================================================== */ :root { --green-950: #041711; --green-900: #072B20; --green-800: #0B3A2B; --green-700: #14512F; --green-300: #B4D0C0; --green-200: #CFE3D8; --green-100: #E6EFEA; --green-50: #F4F8F6; --chili-700: #A82715; --chili-600: #C8321F; --chili-500: #E0452E; --chili-100: #FCE4DE; --fry-700: #7A4E0C; --fry-600: #B87614; --fry-500: #E3A008; --fry-300: #F7D57A; --fry-100: #FBEBB8; --gold-700: #7A5B14; --gold-600: #B89020; --gold-300: #F1D98A; --gold-100: #FBF3DA; --blue-700: #0A57C9; --blue-600: #0A6EF0; --blue-500: #1877F2; --blue-400: #2E87FB; --blue-100: #E6F0FF; --cream-50: #FFF6E6; --cream-100: #FBF3E4; --cream-200: #F4E7CF; --cream-300: #E9D6B5; --espresso-900: #2A1810; --espresso-600: #5F463A; --espresso-500: #7A6153; --espresso-400: #8C7566; --ink-900: #1B1A17; --ink-600: #56635D; --ink-500: #4A5852; --ink-400: #7E8A85; --white: #FFFFFF; } /* ========================================================================== 2. FOUNDATION TOKENS ========================================================================== */ :root { /* Spacing — 4px base */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 32px; --space-8: 48px; /* Type */ --font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Manrope", system-ui, "Segoe UI", sans-serif; --text-2xs: 11px; --text-xs: 12px; --text-sm: 13px; --text-base: 15px; --text-md: 16px; --text-lg: 18px; --text-xl: 22px; --text-2xl: 26px; --text-3xl: 30px; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-heavy: 800; --leading-tight: 1.2; --leading-snug: 1.35; --leading-body: 1.5; --tracking-tight: -0.5px; --tracking-brand: -1px; --tracking-caps: 0.3px; /* Radius */ --radius-xs: 8px; --radius-sm: 12px; --radius-md: 16px; --radius-lg: 24px; --radius-xl: 28px; --radius-full: 999px; /* Sizes */ --tap: 44px; --field-height: 48px; --icon-sm: 14px; --icon-md: 18px; --icon-lg: 24px; --content-width: 720px; /* kila ukurasa unaibadilisha yake */ --gutter: 28px; /* Motion */ --ease: cubic-bezier(0.2, 0.8, 0.2, 1); --ease-spring: cubic-bezier(0.34, 1.25, 0.64, 1); --ease-slide: cubic-bezier(0.25, 1, 0.5, 1); --dur-fast: 0.15s; --dur-base: 0.3s; --dur-slow: 0.4s; /* Z-index */ --z-raised: 10; --z-sticky: 50; --z-nav: 1000; --z-skeleton: 9998; --z-modal: 9999; /* Glass */ --blur-glass: none; --blur-bar: blur(30px) saturate(200%); --blur-overlay: blur(12px); } /* ========================================================================== 3. SEMANTIC TOKENS — LIGHT (default) ========================================================================== */ :root { color-scheme: light; /* Canvas: nyeupe safi + mwanga wa njano */ --bg-canvas: radial-gradient(circle 320px at 92% 4%, rgba(255,205,70,0.32), transparent 70%), radial-gradient(circle 260px at 0% 30%, rgba(255,205,70,0.14), transparent 70%), linear-gradient(180deg, #FFFFFF 0%, #FBF8F2 100%); /* Surfaces */ --surface-glass: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 100%); --surface-bar: rgba(255,255,255,0.88); --surface-chip: #FFFFFF; --surface-field: #FFFFFF; --surface-modal: #FFFFFF; --surface-panel: rgba(30,25,15,0.035); --surface-overlay: rgba(30,14,6,0.62); --surface-skeleton-base: rgba(243,229,204,0.88); --surface-skeleton: #F1EEE8; --surface-modal-tint: #FFF6E0; --edge-highlight: inset 0 1px 0 #FFFFFF; --border-glass: 1px solid rgba(30,25,15,0.06); --border-subtle: 1px solid rgba(74,40,20,0.12); /* Cards */ --surface-card: linear-gradient(180deg, #FFFFFF 0%, #FFFDFA 100%); --border-card: 1px solid rgba(30,25,15,0.05); --border-card-hover: rgba(30,25,15,0.10); --card-shadow: 0 2px 6px rgba(40,25,10,0.05), 0 12px 32px rgba(40,25,10,0.08), 0 30px 60px rgba(40,25,10,0.06); --card-shadow-hover: 0 4px 10px rgba(40,25,10,0.06), 0 18px 40px rgba(40,25,10,0.11), 0 36px 70px rgba(40,25,10,0.09); /* Text */ --text-primary: var(--ink-900); --text-secondary: #4A453E; --text-muted: #6F6A63; --text-subtle: #9A948B; --text-brand: var(--green-900); --text-on-selected: var(--white); --text-on-action: #FFFFFF; /* Lines */ --divider: rgba(30,25,15,0.08); --divider-dashed: rgba(30,25,15,0.14); --border-strong: rgba(30,25,15,0.12); --border-control: 1.5px solid rgba(30,25,15,0.18); --border-control-hover: rgba(30,25,15,0.34); --focus-ring: rgba(7,43,32,0.40); --hover-tint: rgba(30,25,15,0.04); /* ACTION (CTA kuu) — kijani */ --action-bg: linear-gradient(180deg, #43976B 0%, #2F7F55 100%); --action-bg-hover: linear-gradient(180deg, #3B8A61 0%, #286F49 100%); --action-border: transparent; --action-shadow: inset 0 1px 0 rgba(255,255,255,0.25), 0 8px 18px rgba(47,127,85,0.30); /* SELECTED — pilipili */ --selected-bg: linear-gradient(180deg, #EE5A3F 0%, #D93F27 100%); --selected-shadow: 0 8px 20px rgba(217,63,39,0.30); /* CALL — bluu (piga simu) */ --call-bg: linear-gradient(180deg, var(--blue-500) 0%, var(--blue-600) 100%); --call-bg-hover: linear-gradient(180deg, #4A9BFF 0%, #1479FF 100%); --call-shadow: inset 0 1px 0 rgba(255,255,255,0.28), 0 8px 18px rgba(10,110,240,0.32); /* Controls */ --control-track: rgba(30,25,15,0.06); --control-thumb: #FFFFFF; --control-thumb-text: var(--green-900); --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='6' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%232A1810' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); /* Tints */ --tint-brand-bg: #E8F3EC; --tint-brand-text: var(--green-900); /* Status */ --status-success-bg: #D7EEDF; --status-success-text: var(--green-700); --status-success-soft-bg: #E6F1EA; --status-success-soft-text: #2C5B43; --status-warning-bg: var(--fry-100); --status-warning-text: var(--fry-700); --status-warning-strong-bg: #FBE4A8; --status-neutral-bg: #EDE6DA; --status-neutral-text: #6B5A4E; --status-danger-bg: #F7DDD7; --status-danger-text: #9A3324; --status-info: var(--blue-500); --danger-solid: var(--chili-600); /* Food accents */ --price-bg: transparent; --price-text: var(--ink-900); --hot-bg: var(--chili-100); --hot-text: var(--chili-700); /* Skeleton */ --skeleton-a: #EFE3CE; --skeleton-b: #FBF5E9; /* Icon tiles */ --tile-bg: linear-gradient(145deg, #FFD866 0%, #F5B92E 100%); --tile-fg: #7A2E10; --tile-brand-bg: linear-gradient(145deg, var(--green-800) 0%, var(--green-950) 100%); --tile-brand-fg: var(--gold-300); /* Elevation */ --shadow-rgb: 40, 25, 10; --elev-1: 0 1px 2px rgba(var(--shadow-rgb), 0.06), 0 4px 12px rgba(var(--shadow-rgb), 0.06); --elev-2: 0 2px 6px rgba(var(--shadow-rgb), 0.06), 0 14px 34px rgba(var(--shadow-rgb), 0.10); --elev-3: 0 2px 6px rgba(var(--shadow-rgb), 0.06), 0 12px 30px rgba(var(--shadow-rgb), 0.09); --elev-4: 0 4px 10px rgba(var(--shadow-rgb), 0.07), 0 18px 40px rgba(var(--shadow-rgb), 0.12); --elev-5: 0 10px 30px rgba(30,14,6,0.10), 0 40px 100px rgba(30,14,6,0.28); --elev-nav: 0 -12px 40px rgba(var(--shadow-rgb), 0.16); --nav-shadow: var(--elev-nav); --sheet-shadow: var(--elev-5); --elev-nav-float: 0 20px 56px rgba(var(--shadow-rgb), 0.30), 0 0 0 1px rgba(var(--shadow-rgb), 0.07); } /* ========================================================================== 4. SEMANTIC TOKENS — DARK (hiari: ) ========================================================================== */ :root[data-theme="dark"] { color-scheme: dark; --bg-canvas: radial-gradient(900px 500px at 10% -5%, rgba(232,163,23,0.14), transparent 60%), radial-gradient(800px 600px at 100% 15%, rgba(200,50,31,0.12), transparent 60%), linear-gradient(180deg, #1B110B 0%, #120A06 100%); --surface-glass: linear-gradient(160deg, rgba(62,43,33,0.92) 0%, rgba(44,30,23,0.80) 100%); --surface-bar: rgba(30,19,13,0.76); --surface-chip: rgba(72,51,40,0.82); --surface-field: rgba(72,51,40,0.82); --surface-modal: rgba(46,31,24,0.97); --surface-panel: rgba(255,235,210,0.04); --surface-overlay: rgba(12,6,3,0.68); --surface-skeleton-base: rgba(20,12,8,0.88); --surface-skeleton: rgba(255,235,210,0.08); --surface-modal-tint: rgba(255,235,210,0.05); --edge-highlight: inset 0 1px 0 rgba(255,235,210,0.08), inset 0 -1px 0 rgba(0,0,0,0.25); --border-glass: 1px solid rgba(255,235,210,0.10); --border-subtle: 1px solid rgba(255,235,210,0.10); --surface-card: linear-gradient(145deg, #3E2B21 0%, #33231B 100%); --border-card: 1px solid rgba(255,235,210,0.12); --border-card-hover: rgba(255,235,210,0.20); --card-shadow: 0 2px 4px rgba(0,0,0,0.35), 0 10px 24px rgba(0,0,0,0.40), 0 24px 48px rgba(0,0,0,0.35); --card-shadow-hover: 0 3px 6px rgba(0,0,0,0.38), 0 14px 30px rgba(0,0,0,0.44), 0 30px 60px rgba(0,0,0,0.40); --text-primary: #F7EBDD; --text-secondary: #D9C7B4; --text-muted: #BBA592; --text-subtle: #94826F; --text-brand: var(--green-200); --text-on-action: #F1FAF5; --text-on-selected: var(--green-950); --divider: rgba(255,235,210,0.10); --divider-dashed: rgba(255,235,210,0.20); --border-strong: rgba(255,235,210,0.16); --border-control: 1.5px solid rgba(255,235,210,0.22); --border-control-hover: rgba(255,235,210,0.40); --focus-ring: rgba(207,227,216,0.65); --hover-tint: rgba(255,235,210,0.06); --action-bg: linear-gradient(180deg, #3A6B56 0%, #2C5443 100%); --action-bg-hover: linear-gradient(180deg, #437A62 0%, #326149 100%); --action-border: rgba(255,255,255,0.14); --action-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 6px 16px rgba(0,0,0,0.40); --selected-bg: linear-gradient(180deg, var(--green-200) 0%, var(--green-300) 100%); --selected-shadow: 0 8px 22px rgba(0,0,0,0.45); --call-shadow: inset 0 1px 0 rgba(255,255,255,0.20), 0 8px 18px rgba(0,0,0,0.45); --control-track: rgba(255,235,210,0.08); --control-thumb: #5A4234; --control-thumb-text: #F7EBDD; --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='6' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23F7EBDD' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); --tint-brand-bg: rgba(255,235,210,0.08); --tint-brand-text: var(--green-200); --status-success-bg: rgba(74,180,120,0.20); --status-success-text: #8FDDB0; --status-success-soft-bg: rgba(74,180,120,0.12); --status-success-soft-text: #7CCB9C; --status-warning-bg: rgba(247,213,122,0.16); --status-warning-text: var(--fry-300); --status-warning-strong-bg: rgba(247,213,122,0.24); --status-neutral-bg: rgba(255,235,210,0.08); --status-neutral-text: #BBA592; --status-danger-bg: rgba(224,69,46,0.20); --status-danger-text: #F5A79B; --danger-solid: #F5A79B; --price-text: #F7EBDD; --hot-bg: rgba(224,69,46,0.20); --hot-text: #F5A79B; --skeleton-a: rgba(255,235,210,0.06); --skeleton-b: rgba(255,235,210,0.14); --shadow-rgb: 0, 0, 0; --elev-5: 0 10px 30px rgba(0,0,0,0.35), 0 40px 100px rgba(0,0,0,0.55); } /* ========================================================================== 5. LEGACY ALIASES Majina ya zamani yanaelekezwa kwenye tokens mpya. Usiongeze rangi mpya hapa. Code mpya itumie tokens za tabaka 1–3, si hizi. TAHADHARI: --radius-sm/md/lg zimekua (8/12/20 -> 12/16/24) na --radius-pill sasa ni --radius-full. ========================================================================== */ :root { /* Brand: green */ --jiko-green: var(--green-900); --jiko-green-deep: var(--green-950); --jiko-green-mid: var(--green-800); --jiko-green-soft: var(--green-100); --jiko-green-tint: var(--green-50); /* Brand: orange/gold */ --jiko-flame: var(--fry-500); --jiko-flame-deep: var(--fry-600); --jiko-flame-soft: var(--fry-100); --jiko-flame-tint: var(--cream-50); /* "Earth" = alias ya green */ --jiko-earth: var(--jiko-green); --jiko-earth-deep: var(--jiko-green); --jiko-earth-soft: var(--jiko-green-soft); --jiko-earth-tint: var(--jiko-green-tint); /* CTA (solid, ya zamani). CTA mpya ni --action-bg */ --jiko-cta: var(--green-800); --jiko-cta-hover: var(--green-900); --jiko-cta-ink: var(--white); /* Danger + "Chili" = chanzo kimoja */ --jiko-danger: var(--chili-600); --jiko-danger-soft: var(--chili-100); --jiko-chili: var(--jiko-danger); --jiko-chili-deep: var(--chili-700); --jiko-chili-soft: var(--jiko-danger-soft); --jiko-chili-tint: var(--jiko-danger-soft); /* Neutrals */ --jiko-paper: var(--white); --jiko-cream: var(--cream-100); --jiko-cream-deep: var(--cream-200); --jiko-ink: var(--text-primary); --jiko-muted: var(--text-muted); --jiko-faint: var(--text-subtle); --jiko-line: var(--divider); --jiko-line-soft: var(--divider); --jiko-border: var(--border-strong); --jiko-tab-bg: var(--control-track); /* Semantic */ --jiko-success: var(--status-success-text); --jiko-success-soft: var(--status-success-bg); --jiko-warning: var(--fry-500); --jiko-warning-soft: var(--status-warning-bg); /* Distance pills */ --dist-near-bg: var(--status-success-bg); --dist-near-ink: var(--status-success-text); --dist-near-line: var(--green-300); --dist-mod-bg: var(--status-neutral-bg); --dist-mod-ink: var(--status-neutral-text); --dist-mod-line: var(--divider); --dist-far-bg: var(--status-warning-strong-bg); --dist-far-ink: var(--status-warning-text); --dist-far-line: var(--fry-300); --dist-vfar-bg: var(--status-danger-bg); --dist-vfar-ink: var(--status-danger-text); --dist-vfar-line: var(--chili-100); /* Spacing */ --sp-1: var(--space-1); --sp-2: var(--space-2); --sp-3: var(--space-3); --sp-4: var(--space-4); --sp-5: var(--space-5); --sp-6: var(--space-6); --sp-7: var(--space-7); --sp-8: var(--space-8); /* Radius */ --radius-pill: var(--radius-full); /* Shadows */ --shadow-xs: var(--elev-1); --shadow-sm: var(--elev-3); --shadow-md: var(--elev-4); --shadow-lg: var(--elev-5); /* Motion */ --ease-out: var(--ease); }