/* Fresh Market — design tokens (warm orange theme) */ :root { /* Brand — orange primary, green accent (#CC4500 keeps white button text at 4.75:1 AA; vivid #E65100 stays for decorative surfaces like hero banners where only 3:1 applies) */ --color-primary: #CC4500; --color-primary-dark: #A63A00; --color-accent: #2E7D32; --color-accent-dark: #1B5E20; --color-emphasis: #D32F2F; /* Surfaces — bg sits well below card-white so cards pop in light mode */ --color-bg: #F0EDE4; --color-surface: #FFFFFF; --color-surface-alt: #EAE6DB; /* Text */ --color-text: #212121; --color-text-muted: #666666; /* 4.8:1 on the #F0EDE4 bg (AA for small text) */ --color-text-inverse: #FFFFFF; /* readable ink on bright fills in dark mode (bright orange/green + white fails AA) */ --color-on-primary: #FFFFFF; --color-on-accent: #FFFFFF; /* State */ --color-success: #43A047; --color-error: #E53935; --color-warning: #F57C00; /* Borders */ --color-border: #E2DDD2; --color-border-soft: #EAE6DC; /* Space */ --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; /* Radius */ --r-sm: 6px; --r-md: 12px; --r-lg: 16px; --r-xl: 24px; --r-full: 999px; /* Elevation — warm-tinted, 4 tiers (sm cards · md panels · lg popovers · xl overlays). Light mode needs clearly visible depth: bg and card are only ~3 shades apart. NOTE: max bottom extent (offset+blur ≈ 18px) must fit the .rail bottom padding. */ --sh-sm: 0 1px 3px rgb(93 64 55 / .14), 0 6px 18px rgb(93 64 55 / .18); --sh-md: 0 2px 5px rgb(93 64 55 / .13), 0 12px 30px rgb(93 64 55 / .22); --sh-lg: 0 6px 16px rgb(121 85 72 / .14), 0 22px 50px rgb(93 64 55 / .26); --sh-xl: 0 12px 26px rgb(121 85 72 / .16), 0 32px 70px rgb(93 64 55 / .34); /* Type */ --font: "Vazirmatn", system-ui, sans-serif; --fs-xs: 12px; --fs-sm: 14px; --fs-md: 16px; --fs-lg: 18px; --fs-xl: 22px; --fs-2xl: 28px; --fs-3xl: 36px; /* Motion */ --ease-out: cubic-bezier(.22, 1, .36, 1); --dur-fast: 150ms; --dur-base: 250ms; } /* Dark mode is opt-in via — light is the default. (Set data-theme="light" to pin light mode on a dark OS.) */ [data-theme="dark"] { --color-bg: #121212; --color-surface: #1E1E1E; --color-surface-alt: #252525; --color-text: #ECEFF1; --color-text-muted: #9E9E9E; --color-border: #2E2E2E; --color-primary: #FF9800; --color-accent: #66BB6A; --color-emphasis: #EF5350; /* dark mode lifts fills to bright shades: use dark ink for AA contrast */ --color-on-primary: #212121; --color-on-accent: #10310F; /* shadows need more strength+opacity to read on dark surfaces */ --sh-sm: 0 1px 2px rgb(0 0 0 / .45); --sh-md: 0 6px 16px rgb(0 0 0 / .5); --sh-lg: 0 14px 34px rgb(0 0 0 / .55); --sh-xl: 0 24px 56px rgb(0 0 0 / .65); }