/* ========================================================================== ماکیماه — Design Tokens Direction: A · Signature (approved) Light theme only. Do not add a dark theme without a product decision. THREE RULES THAT MUST NOT BE BROKEN 1. Price is ALWAYS --ink. Never an accent colour. 2. A FILLED COLOURED PILL MEANS "YOU ARE HERE". Nothing else may use one, and it never marks something to press. Which colour depends on whether the filter carries meaning of its own: · brand red — the default selected state (category, and «همه») · --grad-fresh — تازه, because the product badge for chilled is green · --grad-frozen— منجمد, because the product badge for frozen is blue The temperature pills deliberately echo .tag--fresh / .tag--frozen, so the filter you picked and the badge on the products it returns are visibly one idea rather than two colour systems. Red is therefore spent in four places: brand mark, sale badge, category bar current-section, and the default selected pill. The cost: on the catalogue page red alone no longer means "discount". Do not spend it a fifth time without first deciding what red is supposed to signal. 3. Buttons. Black is still the default action colour and the colour of the final commit (ثبت سفارش). The one exception is the BUY action — «افزودن به سبد», on the product page and on the card — which uses --grad-cta with INK type. Rationale: at 5.7:1 (worst rendered pixel) it is the loudest object on a page whose job is to sell one thing. It shares a hue with --grad-fresh (تازه) and is told apart the way this whole system tells action from state: BRIGHT fill + ink type = press me, DEEP fill + white type = you are here. If you ever add a third green, keep it on one side of that line. Destructive actions remain OUTLINED, never filled. All three pill fills are contrast-MATCHED (4.8 / 5.9 / 11.0 against white, measured on the composited pixels including the highlight layer). Keep any new one on that profile: equal weight, different hue. And note the ceiling it implies — white text caps a green at about L26%, so a genuinely pale "bright" green or "ice" blue cannot hold a white label. Liveliness here is bought with saturation and a hue sweep across the ramp, not with lightness. ========================================================================== */ :root { /* ---------- Ground & surfaces ---------- */ --ground: #FAFAF8; /* page background — never pure white */ --surface: #FFFFFF; /* cards, sheets, modals */ --surface-sunken: #F2F2EE; /* wells, inactive tabs, table stripes */ --surface-overlay: rgba(18,18,18,.48); /* ---------- Ink ---------- */ --ink: #121212; /* headings, body, PRICE */ --ink-soft: #54544F; /* secondary copy */ --ink-mute: #8B8B85; /* captions, meta, struck-through price */ --ink-inverse: #FFFFFF; /* ---------- Brand ---------- */ --brand-red: #C8102E; /* SCREEN red — brand mark + sale badge only */ --brand-red-press: #A50D26; --brand-red-tint: #FBECEE; /* #E30512 is the PRINT/packaging red. Never use it on screen. */ /* ---------- Primary action (black) ---------- */ --action: #121212; --action-hover: #2B2B2B; --action-press: #000000; --action-disabled: #C9C9C4; --on-action: #FFFFFF; --on-action-disabled:#FFFFFF; /* ---------- Secondary / ghost action ---------- */ --ghost-border: #D9D9D3; --ghost-border-hover:#B9B9B2; --ghost-bg-hover: #F2F2EE; /* ---------- Semantic ---------- */ /* True green, not the old teal-leaning #1E7A5A. Same legibility (4.8:1 on --ground, so the 13px «تازه» badge still clears AA) but a much happier hue. --success-bright is for GRAPHICS ONLY — icons and fills, which need 3:1, never text. */ --success: #108038; /* also: تازه / chilled badge */ --success-bright: #1BA84C; /* icons and fills only, never text */ --success-tint: #E7F6EA; --info: #1F6C99; /* also: منجمد / frozen badge */ --info-tint: #E6F1F8; --warning: #B8761A; --warning-tint: #FDF3E4; --danger: #A81B23; /* destructive — OUTLINE treatment only */ --danger-tint: #FBECEE; /* ---------- Panel accent ---------- The staff panel is not the shop. Black is the storefront's action colour, but a warehouse screen made of black buttons and a black hero tile reads as heavy and undifferentiated — and the operator needs the eye to land on status (red out / amber low / green fine), not on chrome. Indigo is deliberately outside the semantic set: it collides with nothing on this page, and it is not the chilled green or the frozen blue badge. Panel only — never on the storefront. */ --panel: #4338CA; --panel-hover: #3730A3; --panel-press: #312E9E; --panel-tint: #EEEEFB; --panel-line: #C7C4F2; --on-panel: #FFFFFF; /* ---------- Lines ---------- */ /* --rule-soft is the divider you use INSIDE a surface — a table row, a filter group — where a full --rule would cut the panel in half. It was referenced in five places before it existed; an undefined var makes the whole `border` shorthand invalid, so those dividers simply never drew. */ --rule-soft: #EFEFEA; --rule: #E6E6E1; --rule-strong: #D4D4CE; /* ---------- Focus ---------- */ --focus-ring: #1F6C99; --focus-ring-width: 2px; --focus-ring-offset: 2px; /* ---------- Elevation ---------- */ /* Layered shadows — several soft passes read as depth; one hard drop reads as a sticker. */ --shadow-sm: 0 1px 2px rgba(18,18,18,.05), 0 1px 1px rgba(18,18,18,.03); --shadow-md: 0 1px 2px rgba(18,18,18,.04), 0 4px 10px -3px rgba(18,18,18,.07), 0 14px 28px -12px rgba(18,18,18,.14); --shadow-lg: 0 2px 4px rgba(18,18,18,.04), 0 10px 24px -8px rgba(18,18,18,.10), 0 30px 60px -22px rgba(18,18,18,.22); --shadow-glow: 0 8px 30px -8px rgba(18,18,18,.34); --shadow-glow-red: 0 8px 30px -8px rgba(200,16,46,.42); /* Gradients */ --grad-ink: linear-gradient(155deg, #232323 0%, #121212 46%, #0B0B0B 100%); /* The signature red ramp, taking the same stops as .bleed--brand so the band and the selected filter are demonstrably one red rather than two guesses at it. Angled like --grad-ink so the two read as a family. */ --grad-red: linear-gradient(155deg, #E01B37 0%, #C8102E 46%, #7C0A1B 100%); /* Selected-filter fills for نگهداری. Both are contrast-MATCHED to --grad-red (4.8 / 5.9 / 11.0 against white), so the three pills carry identical visual weight and differ only in hue — the temperature reads as meaning, not as one filter shouting louder than another. Liveliness comes from saturation, not lightness: white text caps a green at roughly L26%, so a pale "bright" green cannot hold a white label. */ --grad-fresh: radial-gradient(78% 130% at 88% -30%, rgba(196, 255, 180, .34) 0%, transparent 62%), linear-gradient(155deg, #238400 0%, #007434 46%, #004631 100%); --grad-frozen: radial-gradient(78% 130% at 88% -30%, rgba(190, 244, 255, .40) 0%, transparent 62%), linear-gradient(155deg, #007E8C 0%, #006A9F 46%, #003984 100%); /* The buy action. The bright emerald, with WHITE type. Recorded because it is a deliberate, owner-made trade-off and the next person will otherwise "fix" it: white on this ramp measures about 2.3:1. WCAG AA wants 4.5:1 for text this size, so this fails that check. It was chosen anyway, after being shown the number, because the brightness is what makes the button read as the one thing to press. Plenty of shops ship white-on-mid-green; it is legible for most people in normal light. If it ever needs to come up: the constraint is LUMINANCE, not hue. White needs the fill near L26% for 4.5:1, or near L30% for the 3:1 large-text bar. Darkening is the only lever — no hue keeps this brightness and carries white type. Warm amber came before the green. Worth recording why it failed: warm CTAs work on Amazon because Amazon's chrome is cold neutral grey, so the button is the only warm thing on screen. This page IS warm — meat, bread, cream — so an orange button joined the palette instead of standing against it. Green is the one hue the photography never contains. */ --grad-cta: radial-gradient(80% 130% at 88% -30%, rgba(198, 255, 226, .34) 0%, transparent 60%), linear-gradient(155deg, #11C766 0%, #10B26C 48%, #0E9F6E 100%); --grad-cta-hover: radial-gradient(80% 130% at 88% -30%, rgba(214, 255, 236, .42) 0%, transparent 60%), linear-gradient(155deg, #17DA73 0%, #13C377 48%, #10AF79 100%); --grad-surface: linear-gradient(180deg, #FFFFFF 0%, #FCFCFA 100%); --grad-sunken: linear-gradient(180deg, #F6F6F3 0%, #EFEFEB 100%); /* ---------- Radii ---------- */ --radius-sm: 3px; --radius: 5px; --radius-lg: 8px; --radius-pill: 100px; /* ---------- Spacing (4px base) ---------- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; --sp-20: 80px; /* ---------- Typography ---------- */ --font-fa: "Vazirmatn", "IRANSans", Tahoma, system-ui, sans-serif; --font-num: "Vazirmatn", system-ui, sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace; /* Type scale — deliberately large. 13px is the FLOOR: nothing on this site is smaller, because small Persian text with its dots and diacritics becomes genuinely hard to read. Body copy sits at 17px, the same place Apple sets it. */ --text-xs: 13px; --text-sm: 15px; --text-base: 17px; --text-md: 20px; --text-lg: 24px; --text-xl: 30px; --text-2xl: 40px; --text-3xl: 56px; --text-4xl: 76px; --leading-tight: 1.22; --leading-snug: 1.4; --leading-normal: 1.75; --weight-normal: 400; --weight-medium: 500; --weight-bold: 700; --weight-black: 800; /* ---------- Layout ---------- */ --container: 1440px; /* wide. content should breathe, not be squeezed */ --container-narrow: 860px; --header-h: 68px; /* ---------- Motion ---------- */ --ease: cubic-bezier(.22,.61,.36,1); --ease-out: cubic-bezier(.16,1,.3,1); --dur-fast: 140ms; --dur: 260ms; --dur-slow: 620ms; } @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 0ms; --dur: 0ms; } *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } }