/* OMEGA — design tokens, dark direction ("Workshop Dark") Source of truth for the storefront theme. Mirror the palette and type scale into theme.json so the block editor offers the same set. Every value below is direction-agnostic — use logical properties downstream so dir="rtl" mirrors without a second stylesheet. */ :root { /* ---- ground: dark, warm, three steps ---- */ --omega-bark: #14150F; /* the page */ --omega-olive: #1A1B17; /* input wells, sunk surfaces */ --omega-raise: #22231C; /* cards, panels, summary boxes */ --omega-linen: #2B2C24; /* the one alternate band (process section) */ /* ---- information ---- */ --omega-stone: #DCD7CA; /* all primary text, and the primary button ground */ --omega-sand: #A8A395; /* secondary text — 7.3:1 on bark */ --omega-paper: #F6F3EC; /* emphasis text, active nav */ --omega-ink: #171714; /* text ON stone/paper grounds only */ /* ---- accents ---- */ --omega-bronze: #AE8C51; /* prices, lead times, figures — 5.8:1 on bark */ --omega-ember: #B4562C; /* rules, active underlines, focus rings, and ERROR borders — an ember border means invalid, and nothing else. Required fields must not use it, or the two states become indistinguishable. 3.8:1 on bark — NEVER text, including the required asterisk (that is stone). Also never a ground for text: paper on --ember is 4.4:1, which fails AA. Use --ember-badge instead. */ --omega-ember-badge: #AC5028; /* the ONLY ember that may sit behind text. Paper on this is 4.8:1, so it passes AA at any size — the size of the badge is irrelevant, since the 4.5:1 threshold only relaxes at 24px. Visually indistinguishable from --ember at badge scale. */ /* ---- lines ---- */ --omega-hair: rgba(220,215,202,.14); /* every divider and inactive border */ --omega-edge: var(--omega-stone); /* selected/active border */ --omega-radius: 0; /* nothing is rounded, anywhere */ /* ---- texture: replaces the old vertical hairline grid ---- Two layers on the page element, in this order, with background-blend-mode: overlay, normal, normal */ --omega-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E"); --omega-plaster: radial-gradient(120% 80% at 20% 0%, rgba(220,215,202,.05), transparent 60%), radial-gradient(100% 70% at 90% 100%, rgba(174,140,81,.05), transparent 55%); /* photograph scrims — the only way text sits on an image */ --omega-scrim-hero: linear-gradient(180deg, rgba(20,21,15,.68) 0%, rgba(20,21,15,.12) 40%, rgba(20,21,15,.82) 100%); --omega-scrim-flat: rgba(20,21,15,.55); --omega-caption-bg: rgba(20,21,15,.9); /* captions get their own ground, never bare */ /* ---- type: three Latin faces + two Arabic, fixed roles ---- */ --omega-display: "Cormorant Garamond", Georgia, serif; /* headings, product names, ≥22px ONLY */ --omega-sans: "Inter", system-ui, sans-serif; /* all prose, labels, nav, chips */ --omega-mono: "IBM Plex Mono", ui-monospace, monospace; /* dimension lines, reference numbers, and uppercase button/nav labels. Nothing else. */ /* Arabic. Amiri is a revival of the Bulaq Press Naskh cut in Cairo in 1905 — high stroke contrast, so it carries the display role the way Cormorant does, and it is locally correct. IBM Plex Sans Arabic is drawn to match Plex, so it covers BOTH the sans and the mono role (Plex Mono has no Arabic; a monospaced Arabic would be wrong anyway). Amiri has no 300 weight — use 400 and size up ~6%, and never below 24px. */ --omega-display-ar: "Amiri", serif; --omega-sans-ar: "IBM Plex Sans Arabic", sans-serif; /* display — always weight 300 at 40px and above (reversed type gains weight) */ --omega-fs-h1: clamp(2.75rem, 1.4rem + 6vw, 4.5rem); /* 44 → 72 · lh 1.0 · ls -.015em */ --omega-fs-h2: clamp(2.125rem, 1.3rem + 3.6vw, 4rem); /* 34 → 64 · lh 1.0 · ls -.015em */ --omega-fs-h3: clamp(1.75rem, 1.4rem + 1.5vw, 2.375rem);/* 28 → 38 · lh 1.05 · ls -.012em */ --omega-fs-h4: 1.5rem; /* 24 · card and panel titles */ --omega-fs-caption: 1.25rem; /* 20 · image captions */ /* prose — Inter, never the serif */ --omega-fs-lead: 1.1875rem; /* 19 · lh 1.6 */ --omega-fs-body: 1.0625rem; /* 17 · lh 1.62 */ --omega-fs-body-sm: 1rem; /* 16 · lh 1.6 */ --omega-fs-label: 0.9375rem; /* 15 · form labels, secondary lines */ --omega-fs-note: 0.875rem; /* 14 · helper text, required note */ /* prices — Inter 500, tabular figures, .01em. Not mono, not the serif: mono reads as a spec sheet, the serif reads as a menu. */ --omega-fs-price: 1.125rem; /* 18 · product page, totals */ --omega-fs-price-sm: 0.9375rem; /* 15 · cards, summary rows */ --omega-fs-price-xs: 0.8125rem; /* 13 · mobile cards */ --omega-fw-price: 500; --omega-ls-price: .01em; /* mono — dimensions and references, two tracking values */ --omega-fs-fig: 0.8125rem; /* 13 · dimensions, references */ --omega-fs-fig-sm: 0.75rem; /* 12 · table figures */ --omega-fs-badge: 0.625rem; /* 10 · uppercase badges */ --omega-ls-fig: .06em; --omega-ls-badge: .16em; /* ---- spacing: 4px base, no in-between values ---- */ --omega-s-1: .25rem; --omega-s-2: .5rem; --omega-s-3: .75rem; --omega-s-4: 1rem; --omega-s-5: 1.5rem; --omega-s-6: 2rem; --omega-s-7: 3rem; --omega-s-8: 3.5rem; --omega-s-9: 4.5rem; --omega-s-10: 5.5rem; --omega-s-11: 8rem; --omega-gutter-desktop: 3.5rem; /* 56 — every 1440 screen */ --omega-gutter-mobile: 1.25rem; /* 20 — every 390 screen */ /* The reference is drawn at 1440 with two 56 gutters, so the column it actually composes is 1328. Past that width the extra space belongs to the gutters, not to the content — otherwise a 2560 monitor gets a 2448px-wide line of text. Below 1440 this collapses back to a flat 56 and nothing changes. */ --omega-max: 1328px; --omega-gutter: max(var(--omega-gutter-desktop), (100% - var(--omega-max)) / 2); --omega-band: 5.5rem; /* 88 — band-to-band, desktop */ --omega-band-mobile: 2.25rem; /* 36 */ --omega-measure: 62ch; --omega-hit: 44px; /* minimum touch target */ /* ---- motion ---- */ --omega-dur-fast: 140ms; /* state change */ --omega-dur: 260ms; /* entrance */ --omega-ease: cubic-bezier(.22,.61,.36,1); --omega-rise: 18px; /* the only travel distance */ } /* Below the mobile breakpoint the gutter is 20, not 56. The per-section rules already hardcode 20; this makes the token itself honest so anything that aligns to --omega-gutter lands on the same edge at every width. */ @media (max-width: 700px) { :root { --omega-gutter-desktop: var(--omega-gutter-mobile); } } @media (prefers-reduced-motion: reduce) { :root { --omega-dur-fast: 0ms; --omega-dur: 0ms; --omega-rise: 0px; } } /* Arabic neutralises Latin tracking. Cormorant has no Arabic face — the display role falls back to a serif Arabic (set --omega-display per locale). */ [lang="ar"], [dir="rtl"] { letter-spacing: 0 !important; } /* ---- Arabic locale: swap the three roles, kill Latin tracking ---- */ [dir="rtl"], [lang="ar"] { --omega-display: var(--omega-display-ar); --omega-sans: var(--omega-sans-ar); --omega-mono: var(--omega-sans-ar); /* The re-declaration is REQUIRED. Redefining the variable alone does nothing: font-family inherits as an already-computed value from outside the subtree, so it must be declared again here for the new variable to resolve. */ font-family: var(--omega-sans-ar); } [dir="rtl"] *, [lang="ar"] * { letter-spacing: 0 !important; } /* Amiri sits lower and smaller on the line than Cormorant. Arabic headings need more leading and a little more size to hold the same optical weight. */ [dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3 { font-weight: 400; line-height: 1.25; } /* Numerals stay Eastern Arabic (٠١٢٣٤٥٦٧٨٩) — client decision, see HANDOFF §0. Prices keep tabular figures; Plex Sans Arabic has them. */ [dir="rtl"] { font-variant-numeric: tabular-nums; }