/* GENERATED from shared/design/tokens.css by bin/build-tokens.php. DO NOT EDIT THIS COPY. */ /* ============================================================================ Yarn Topia Designs — design tokens. THE ONLY PLACE COLOURS ARE DEFINED. ---------------------------------------------------------------------------- Two sections, each defined once: - SHOP: "Roxann's pick" — purple and gold (approved by Roxann 2026-09-26). - ADMIN PANEL: the admin's own colours, kept exactly as they were when Roxann approved them (2026-09-26). Applies where . Rules (see CLAUDE.md): - No colour code (hex, rgb, hsl, named colour) may appear anywhere else on the platform. Everything else uses var(--color-…). bin/check-design.php enforces this. - Change a colour here, run `php bin/build-tokens.php`, and it changes on the shop and the admin panel at the same time. - Light only. No gradients. The shop has no green or teal. - Buttons never change colour on mouse-over or press; every state shows the gold ring (--color-focus-ring). No "pressed" colour exists on purpose. ============================================================================ */ :root { /* ======================= SHOP PALETTE (Roxann's pick) ======================= */ --color-white: #FFFFFF; --color-bg: #FFFFFF; /* page background, cards */ --color-surface: #F6F5F1; /* soft sections, admin page ground */ --color-ink: #1B2428; /* main text */ --color-muted: #56626A; /* small text */ --color-line: #E3E1DA; /* borders */ --color-primary: #7A1FA2; /* buttons & links (the butterfly's purple) */ --color-primary-soft: #F4E9FA; /* light purple areas */ --color-on-primary: #FFFFFF; /* words on purple */ --color-accent: #F5A524; /* gold highlights */ --color-accent-ink: #875400; /* gold-toned words on light backgrounds */ --color-accent-soft: #FFF2D6; /* light gold areas */ --color-on-accent: #1B2428; /* words on gold */ --color-danger: #B42318; /* error messages only */ --color-danger-soft: #FDECEA; --color-warn: var(--color-accent-ink); /* "only 1 left" style labels */ --color-warn-soft: var(--color-accent-soft); --color-info: var(--color-primary); --color-info-soft: var(--color-primary-soft); /* ---- Roles built from the palette (change the palette above, these follow) ---- */ --color-sale: var(--color-primary); --color-on-sale: var(--color-on-primary); --color-bar: var(--color-primary); /* shop top bar */ --color-on-bar: var(--color-on-primary); --color-success: var(--color-primary); /* "good news" labels, e.g. Shipped */ --color-success-soft: var(--color-primary-soft); --color-focus-ring: var(--color-accent); /* every button state + keyboard focus */ --color-line-strong: color-mix(in srgb, var(--color-muted) 35%, var(--color-bg)); --color-hover: color-mix(in srgb, var(--color-muted) 10%, var(--color-bg)); /* menu rows, not buttons */ --color-faint: color-mix(in srgb, var(--color-muted) 75%, var(--color-bg)); --color-overlay: color-mix(in srgb, var(--color-ink) 40%, transparent); --shadow-card: 0 1px 2px color-mix(in srgb, var(--color-ink) 8%, transparent); --shadow-pop: 0 12px 32px color-mix(in srgb, var(--color-ink) 18%, transparent); /* ---- Type and shape ---- */ /* ======================= PRINTED LABELS ======================= Barcode labels (PDF). Thermal label printers print black only, and scanners read black on white best. Read by shared/lib/Design/Tokens.php. */ --color-print-ink: #000000; --color-print-paper: #FFFFFF; --font-body: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; /* Shop fonts: Style 3 "Classic", chosen by Mike and Roxann 2026-09-28 ("bold and easy to read"). Stored on our own server (storefront/public/assets/fonts, SIL Open Font License). Admin keeps --font-body. */ --font-shop-display: "Lora", Georgia, "Times New Roman", serif; /* headings, shop name */ --font-shop-body: "Work Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --font-mono: ui-monospace, Menlo, Consolas, monospace; --radius-card: 12px; --radius-btn: 10px; --radius-pill: 999px; /* ---- Sizes every form uses (Mike 2026-09-30: all boxes and drop-downs the same, shop AND admin) ---- --control-height: every text box and drop-down (not the multi-line message boxes, which are taller): 44px on phones (narrower than 600px), 50px on tablets and computers (set in the block after :root). --tap-min: the smallest anything tappable may be (Apple / WCAG 2.2 guidance). bin/check-design.php and bin/test-devices.sh fail if a box or drop-down doesn't use these. Drop-downs are drawn by the site (.sel). */ --control-height: 44px; --tap-min: 44px; --ring-width: 3px; --ring-gap: 2px; color-scheme: light; } /* Tablets and computers (600px and wider): every text box and drop-down is 50px (Mike 2026-09-30: 44 on phones, 50 larger). */ @media (min-width: 600px) { :root { --control-height: 50px; } } /* ======================= ADMIN PANEL PALETTE ======================= Roxann: "leave the colours you have for the admin panel as they are." These are the admin's colours exactly as approved. The roles above (sale, bar, focus ring, shadows…) follow these automatically. */ :root[data-site="admin"] { --color-white: #FFFFFF; --color-bg: #FFFFFF; /* cards */ --color-surface: #F4F3F7; /* page ground, side menu */ --color-ink: #1E1530; --color-muted: #5F5873; --color-faint: #8A8398; --color-line: #E3E1EA; --color-line-strong: #CFCBD9; --color-hover: #ECEAF2; --color-primary: #7F05A1; --color-primary-soft: #F3E8F8; --color-on-primary: #FFFFFF; --color-accent: #FD6E00; /* orange: badges, focus ring */ --color-accent-ink: #A84400; --color-accent-soft: #FFEEDD; --color-on-accent: #1E1530; --color-success: #137A3F; /* e.g. "Google Authenticator on" */ --color-success-soft: #E6F5EC; --color-warn: #8A5A00; /* e.g. "Setup link sent" */ --color-warn-soft: #FFF4D6; --color-info: #1D4ED8; --color-info-soft: #E8EEFD; --color-danger: #B42318; --color-danger-soft: #FDECEA; }