/* mm-tokens.css: MadeMirror Liquid Mirror tokens. Linked ONLY by index.html, beauty.html (via mm-beauty.css), beauty-insights.html. Never link from fashion.html or signals.html. Everything is namespaced --mm-*. */ @property --mm-shade { syntax: ''; inherits: true; initial-value: #B93949; } @property --mm-shade-ink { syntax: ''; inherits: true; initial-value: #CE5761; } @property --mm-on-shade { syntax: ''; inherits: true; initial-value: #FFFFFF; } @layer mm.tokens { :root { /* ---- raw palette: ink (mirror) ---- */ --mm-ink-0: #0A0A0C; /* page canvas, theme-color. Never #000 */ --mm-ink-1: #111115; /* sheets, rails, sidebars */ --mm-ink-2: #18181D; /* raised: look cards, shade tiles, inputs */ --mm-ink-3: #212127; /* selected surface */ --mm-silver-1: #EDEDF1; /* primary text 16.94:1 on ink-0 */ --mm-silver-2: #A9A9B4; /* body/secondary 8.50:1 on ink-0, 7.60 on ink-2 */ --mm-silver-3: #8E8E99; /* captions, mono labels 6.10:1 on ink-0, 5.46 on ink-2 */ --mm-silver-4: #6A6A74; /* disabled/decorative only, 3.70:1, never text */ --mm-line-1: rgb(237 237 241 / .09); --mm-line-2: rgb(237 237 241 / .16); --mm-line-3: rgb(237 237 241 / .34); /* ---- raw palette: paper (commerce) ---- cool porcelain, never cream */ --mm-paper-0: #F2F2F4; /* page/slip ground */ --mm-paper-1: #FAFAFB; /* raised card on paper */ --mm-paper-2: #E4E4E8; /* inset, tile, selected */ --mm-graphite-1: #121216; /* text on paper 16.71:1 on paper-0 */ --mm-graphite-2: #4A4A54; /* secondary 7.83:1 */ --mm-graphite-3: #5E5E68; /* captions/mono 5.73:1 on paper-0, 5.05 on paper-2 */ --mm-rule-1: rgb(18 18 22 / .10); --mm-rule-2: rgb(18 18 22 / .18); --mm-rule-3: rgb(18 18 22 / .40); /* ---- chrome: rims only, never text, never large fills ---- */ --mm-chrome: linear-gradient(135deg,#F4F4F7 0%,#8B8B95 30%,#FBFBFD 48%,#56565F 66%,#D4D4DA 100%); --mm-chrome-soft: linear-gradient(135deg,rgb(244 244 247/.7),rgb(139 139 149/.35) 40%,rgb(251 251 253/.7) 55%,rgb(86 86 95/.35)); /* ---- semantic status ---- */ --mm-live: #7FE0A6; /* the camera-live dot only, always next to a word */ /* ---- shade: live accent (registered above). JS writes all four; these are Poppy defaults ---- */ --mm-shade: #B93949; --mm-shade-ink: #CE5761; /* shade lightened in OKLab to >= 4.6:1 on ink-0 */ --mm-shade-ink-paper: #B93949; /* shade darkened in OKLab to >= 4.6:1 on paper-0 */ --mm-on-shade: #FFFFFF; /* label on a shade fill: white or ink, whichever is higher */ /* ---- semantic aliases (redefined per theme scope, see .mm-paper) ---- */ --mm-bg: var(--mm-ink-0); --mm-surface-1: var(--mm-ink-1); --mm-surface-2: var(--mm-ink-2); --mm-surface-3: var(--mm-ink-3); --mm-fg-1: var(--mm-silver-1); --mm-fg-2: var(--mm-silver-2); --mm-fg-3: var(--mm-silver-3); --mm-fg-4: var(--mm-silver-4); --mm-hair-1: var(--mm-line-1); --mm-hair-2: var(--mm-line-2); --mm-hair-3: var(--mm-line-3); --mm-accent-text: var(--mm-shade-ink); --mm-focus: var(--mm-shade-ink); /* ---- type ---- */ --mm-f-display: 'Archivo', ui-sans-serif, system-ui, sans-serif; /* display + UI + numbers */ --mm-f-serif: 'Bodoni Moda', 'Didot', 'Bodoni 72', Georgia, serif; /* editorial: H2, H3, look names */ --mm-f-mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace; /* data labels only */ --mm-fs-display: clamp(46px, 7.4vw, 112px); /* Archivo --mm-w-display, wdth 125, UPPER, lh .92, ls .012em */ --mm-fs-leadin: clamp(20px, 2vw, 30px); /* Archivo --mm-w-leadin */ --mm-fs-h1: clamp(40px, 5vw, 72px); /* Bodoni --mm-w-serif, page titles (store hero, insights) */ --mm-fs-h2: clamp(34px, 4.2vw, 60px); /* Bodoni --mm-w-serif, lh 1.04, ls -.01em */ --mm-fs-h3: clamp(22px, 1.8vw, 28px); /* Bodoni --mm-w-serif, never below 20px */ --mm-fs-number: clamp(44px, 4.4vw, 68px); /* Archivo --mm-w-number, wdth 118, tabular */ --mm-fs-total: 44px; /* receipt total, Archivo --mm-w-number */ --mm-fs-lead: clamp(17px, 1.25vw, 19px); /* Archivo 400, fg-2 */ --mm-fs-body: 16px; /* Archivo 400, lh 1.55 */ --mm-fs-ui: 15px; /* Archivo 500: buttons, nav, chips, sentence case */ --mm-fs-small: 13px; /* Archivo 400, fg-3 */ --mm-fs-mono: 11px; /* Geist Mono 450, UPPER, ls .12em: data labels */ --mm-fs-mono-num: 13px; /* Geist Mono 450, tabular: prices + counts in rows */ /* Heading weights: one place for every display and editorial line. Sturdy enough to hold up on a phone screen (the first round used 200 to 300 Archivo and 400 Bodoni, which read as hairlines on a small display). */ --mm-w-display: 480; /* Archivo display (uppercase, wdth 125) */ --mm-w-leadin: 450; /* Archivo lead-in line above the display */ --mm-w-number: 400; /* Archivo large figures and totals */ --mm-w-serif: 600; /* Bodoni Moda headings, look names, editorial lines */ --mm-w-serif-em: 600; /* Bodoni Moda italic emphasis inside headings */ /* ---- space (4px base) ---- */ --mm-s-1: 4px; --mm-s-2: 8px; --mm-s-3: 12px; --mm-s-4: 16px; --mm-s-5: 24px; --mm-s-6: 32px; --mm-s-7: 48px; --mm-s-8: 80px; --mm-s-9: 128px; --mm-gutter: clamp(16px, 4.4vw, 64px); --mm-section: clamp(72px, 9vw, 136px); --mm-maxw: 1360px; /* ---- radii: interactive = pill, media/sheets = 20, inner = concentric ---- */ --mm-r-pill: 999px; --mm-r-sheet: 20px; --mm-r-media: 20px; --mm-r-card: 14px; --mm-r-inner: 12px; --mm-r-chip: 6px; /* ---- elevation: exactly three shadows ---- */ --mm-shadow-sheet: 0 -1px 0 var(--mm-line-2), 0 40px 80px -30px rgb(0 0 0/.8), 0 12px 24px -12px rgb(0 0 0/.6); --mm-shadow-product: 0 30px 60px -24px rgb(0 0 0/.75), 0 6px 14px -6px rgb(0 0 0/.6); --mm-shadow-shade: 0 10px 28px -10px color-mix(in oklab, var(--mm-shade) 70%, transparent); --mm-glass-edge: inset 0 1px 0 rgb(255 255 255/.14), inset 0 -1px 0 rgb(255 255 255/.04); /* ---- motion ---- */ --mm-ease-out: cubic-bezier(.23,1,.32,1); /* UI enter, press, state */ --mm-ease-in-out: cubic-bezier(.77,0,.175,1); /* on-screen travel (seam, signal dot) */ --mm-ease-drawer: cubic-bezier(.32,.72,0,1); /* sheets, receipt print */ --mm-ease-expo: cubic-bezier(.16,1,.3,1); /* focal entrances */ --mm-t-press: 140ms; --mm-t-state: 200ms; --mm-t-pop: 240ms; --mm-t-sheet: 420ms; --mm-t-shade: 520ms; --mm-t-layer: 600ms; --mm-t-focal: 1100ms; --mm-t-exit: 160ms; /* ---- z (page level; the drawer keeps its internal 0..12 stack) ---- */ --mm-z-sticky: 10; --mm-z-nav: 20; --mm-z-overlay: 20; --mm-z-sheet: 40; --mm-z-followup: 45; --mm-z-toast: 50; --mm-z-grain: 60; /* ---- breakpoints (documentation only; custom props cannot be used in @media) ---- phone <= 650 (studio/store contract) | single column < 900 | wide >= 1100 (hero callouts) studio rail >= 901 | phone height tiers 600 / 700 / 780 */ } /* Paper scope: storefront body, receipt slip, bag, follow-up, merchant feedback card, pour receipt */ .mm-paper { color-scheme: light; --mm-bg: var(--mm-paper-0); --mm-surface-1: var(--mm-paper-1); --mm-surface-2: var(--mm-paper-2); --mm-surface-3: #D9D9DF; --mm-fg-1: var(--mm-graphite-1); --mm-fg-2: var(--mm-graphite-2); --mm-fg-3: var(--mm-graphite-3); --mm-fg-4: #8A8A94; --mm-hair-1: var(--mm-rule-1); --mm-hair-2: var(--mm-rule-2); --mm-hair-3: var(--mm-rule-3); --mm-accent-text: var(--mm-shade-ink-paper); --mm-focus: var(--mm-graphite-1); } /* Ink scope: re-asserts the mirror inside a paper page (the studio overlay in beauty.html) */ .mm-ink { color-scheme: dark; --mm-bg: var(--mm-ink-0); --mm-surface-1: var(--mm-ink-1); --mm-surface-2: var(--mm-ink-2); --mm-surface-3: var(--mm-ink-3); --mm-fg-1: var(--mm-silver-1); --mm-fg-2: var(--mm-silver-2); --mm-fg-3: var(--mm-silver-3); --mm-fg-4: var(--mm-silver-4); --mm-hair-1: var(--mm-line-1); --mm-hair-2: var(--mm-line-2); --mm-hair-3: var(--mm-line-3); --mm-accent-text: var(--mm-shade-ink); --mm-focus: var(--mm-shade-ink); } }