/* ============================================================ Squeegee Panel design tokens. Two layers: universal skeleton defaults, then a per-shop skin. Brand lives in the skin, never in block markup. Adapted from the FCS design handoff (references/.../tokens.css). Fonts ship with the app; nothing is pulled from a third-party CDN. ============================================================ */ /* ---- Brand fonts, shipped locally (all OFL-licensed) ---- */ @font-face { font-family: 'Barrio'; src: url('../fonts/Barrio.ttf') format('truetype'); font-display: swap; } @font-face { font-family: 'Allerta Stencil'; src: url('../fonts/AllertaStencil.ttf') format('truetype'); font-display: swap; } @font-face { font-family: 'Road Rage'; src: url('../fonts/RoadRage.ttf') format('truetype'); font-display: swap; } :root { /* ---- Universal skeleton defaults (neutral, shared by every shop) ---- */ --surface: #ffffff; --surface-raised: #f6f6f6; --surface-sunken: #eeeeee; /* Accent bands: neutral shops render them as a plain raised surface; a skin recolors them. Brand lives in the skin, never in the block markup. */ --band-pink: #f6f6f6; --band-yellow: #f6f6f6; --on-band: #1a1a1a; --ink: #1a1a1a; --on-ink: #1a1a1a; --muted: #5a5a5a; --border-color: #d9d9d9; --accent: #3e6ae1; --on-accent: #ffffff; --emphasis: #1a1a1a; --success: #3e8e52; --error: #d64545; --error-text: #b02a2a; --radius: 8px; --border-w: 1px; --shadow-offset: 0 1px 3px rgba(0, 0, 0, .12); --grain: none; --font-display: system-ui, sans-serif; --font-label: system-ui, sans-serif; --font-body: system-ui, sans-serif; --font-annotation: system-ui, sans-serif; --motion: 150ms ease; /* ---- Spacing scale (universal) ---- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 44px; --sp-8: 56px; --sp-9: 64px; --sp-10: 80px; --page-max: 1200px; --tap-min: 44px; } /* ============================================================ FanClubShirts skin. Apply on a wrapper: . Storefront only; the back office uses .theme-sp (defined but not built this slice). ============================================================ */ .theme-fcs { --surface: #22162B; /* ink base surface */ --surface-raised: #2D1F3A; /* cards / panels */ --surface-sunken: #1A0F22; /* alternating bands, footer */ --ink: #22162B; --on-ink: #FAE1DF; /* cream body text on ink (11.9:1) */ --muted: #C9AEC6; --border-color: #46335A; --accent: #F8C630; /* yellow: primary actions, emphasis (9.3:1) */ --on-accent: #22162B; --emphasis: #F8C630; --purple: #A45FCC; /* accent + hard-offset shadows; UI/large only */ --green: #63B143; /* annotations, success (6.9:1) */ --band-pink: #F7D9E3; /* light pink band, carries dark text */ --band-yellow: #F8C630; /* yellow band, carries dark text (dark on yellow 9.3:1) */ --on-band: #22162B; /* ink text on the light pink/yellow bands (>12:1) */ --success: #63B143; --error: #E2604A; /* system feedback: borders / stamps */ --error-text: #FF9D8A; /* error copy on dark (5.2:1) */ --cream: #FAE1DF; --font-display: 'Barrio', cursive; --font-label: 'Allerta Stencil', sans-serif; --font-body: 'Helvetica Neue', Helvetica, Arial, sans-serif; --font-annotation: 'Road Rage', cursive; --radius: 0px; --border-w: 2px; --shadow-offset: 5px 5px 0 var(--purple); /* hard offset, never blurred */ /* SVG fractal-noise grain, ~30% opacity, over ink surfaces only. Encoded inline so nothing loads from a third party. Never over body copy or fields. */ --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.3'/%3E%3C/svg%3E"); } /* ============================================================ Squeegee Panel back office skin (clean tool UI). Defined for the later staff-UI slices; NOT built or used on the public site. Shop brand must never leak in here. ============================================================ */ .theme-sp { --accent: #4F9D69; --ink: #1B1B1E; --surface: #F1F5F2; --surface-raised: #FFFFFF; --border-color: #E2E8E3; --radius: 8px; --border-w: 1px; --shadow-offset: 0 1px 3px rgba(0, 0, 0, .08); --grain: none; --font-display: ui-sans-serif, system-ui, 'Segoe UI', sans-serif; --font-label: ui-sans-serif, system-ui, 'Segoe UI', sans-serif; --font-body: ui-sans-serif, system-ui, 'Segoe UI', sans-serif; }