/** Shopify CDN: Minification failed Line 34:20 Unexpected "*" **/ /* ============================================================================ THE ROSTER — DESIGN TOKENS The single source of visual truth. Liquid (theme/) consumes these custom properties; it MUST NOT hardcode color, type, spacing, radius, or shadow values anywhere. Re-derived from the Art for Frame export (references/aff-theme/, read-only) for DECISIONS ONLY — numeric type ratios, spacing units, fluid clamps, breakpoints, touch-target sizing. No vendor rulesets were copied. Where AfF reads as a loud contemporary gallery (hot-pink #d81b60 / electric- blue #0d26ff accents, uppercase everywhere), The Roster is its restrained, menswear-coded sibling: warm paper neutrals, ink text, a single quiet brass accent, an editorial serif/grotesk pairing, generous whitespace. Quiet luxury — presentation IS the premium. Naming contract (stable; liquid-dev builds against these prefixes): --color-* palette --font-* families + weights --fs-* font sizes (type scale, fluid) --lh-* line heights --ls-* letter spacing --space-* spacing scale --radius-* corner radii --shadow-* elevation --bp-* breakpoints (reference only; @media can't read vars) --container-* max content widths --ratio-* aspect ratios for media --ease-*/--dur-* motion --focus-* focus ring ========================================================================== */ :root { /* ------------------------------------------------------------------ COLOR Warm-neutral paper-and-ink system. AfF's gallery palette is deliberately rejected; the only chromatic note is a muted brass used sparingly for emphasis, links, and the authenticity mark. Contrast pairs are AA-checked (see design-tokens.md). */ /* Surfaces (light, paper-warm — not stark Dawn white) */ --color-bg: #faf8f4; /* page paper */ --color-surface: #ffffff; /* cards / raised media */ --color-surface-sunken: #f1ece3; /* wells, intake/condition blocks */ --color-surface-inverse: #1a1817; /* near-black ink panels, footer */ /* Text / ink */ --color-text: #1a1817; /* primary ink (warm near-black) */ --color-text-secondary: #4d4944; /* secondary copy, captions */ --color-text-muted: #8a857c; /* meta, timestamps, helper */ --color-text-on-inverse: #f4f1ea; /* text on inverse surfaces */ --color-text-on-accent: #faf8f4; /* text on accent fills */ /* Lines / borders (1px hairline system, per AfF border_thickness:1) */ --color-border: #e3ddd2; /* default hairline */ --color-border-strong: #c9c1b3; /* emphasized divider */ --color-border-inverse: #322e2a; /* hairline on inverse surfaces */ /* Accent — muted brass / antique gold. The one chromatic voice. */ --color-accent: #8c6a3f; --color-accent-hover: #74542f; --color-accent-soft: #efe7d8; /* accent tint for quiet fills/badges */ --color-accent-contrast: #faf8f4; /* text/icon on accent fills */ /* Status — desaturated, editorial (no alarmist primaries) */ --color-success: #4a6149; /* verified / authenticated */ --color-success-soft: #e6ece2; --color-attention: #8a5a2b; /* low-stock / final-piece note */ --color-danger: #7a3b34; /* errors only */ /* Focus ring color (see --focus-* below) */ --color-focus: #8c6a3f; /* ------------------------------------------------- DARK "COVER" SURFACE A dedicated near-black editorial ground for full-screen "cover" moments: the locked / coming-soon password page first and foremost. This is NOT a dark theme — it is a deliberate, framed cover treatment (fashion-house pre-launch register). The accent brass is LIFTED from the light-mode #8c6a3f to #c9a063 so it clears WCAG AA against the near-black ground; #8c6a3f would fail there. Token-only contract; liquid-dev consumes these names verbatim. Contrast pairs cited in design-tokens.md and the spec. Surface --color-cover-bg #141210 warm near-black ground --color-cover-bg-deep #0e0c0a vignette / deepest pool Type --color-cover-text #f2ece0 warm ivory (hero/body) --color-cover-text-soft #c4baa8 secondary ivory (positioning sub) --color-cover-text-muted#9a9080 meta / footer / store-owner link Accent --color-cover-accent #c9a063 brass-on-dark (rule, underline, →) --color-cover-accent-hi #ddb87e brass hover/active lift Lines --color-cover-hairline #3a342c frame + divider hairline on dark --color-cover-hairline-soft #2a2620 quietest rule (store-owner sep) Status --color-cover-success #9bb38f on-list confirmation on dark --color-cover-danger #d98a7e error text on dark (AA-safe) */ --color-cover-bg: #141210; --color-cover-bg-deep: #0e0c0a; --color-cover-text: #f2ece0; --color-cover-text-soft: #c4baa8; --color-cover-text-muted: #9a9080; --color-cover-accent: #c9a063; --color-cover-accent-hi: #ddb87e; --color-cover-hairline: #3a342c; --color-cover-hairline-soft: #2a2620; --color-cover-success: #9bb38f; --color-cover-danger: #d98a7e; /* Focus ring color when on the dark cover ground (brass reads, ivory-white would glare). Used as --color-focus's override within .cover scope. */ --color-cover-focus: #c9a063; /* Soft brass glow for focus on dark (replaces --shadow-focus's pale tint, which disappears on near-black). rgba of --color-cover-accent. */ --shadow-cover-focus: 0 0 0 3px rgba(201, 160, 99, 0.28); /* ------------------------------------------------------------- TYPOGRAPHY Two families only (restraint). An editorial serif for display/headlines and a neutral grotesk for UI and body. System stacks are the fallback; liquid-dev may map --font-serif / --font-sans onto Shopify font_picker settings in theme.liquid as a one-time :root override of these tokens. AfF reached for Shippori Mincho / Playfair (serif), Inter (sans), Anonymous Pro (mono). We keep the serif/sans *pairing decision* but choose a quieter transitional serif voice and a calmer grotesk. */ --font-serif: "Canela", "Spectral", Georgia, "Times New Roman", serif; --font-sans: "Söhne", "Inter", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; --font-mono: "Söhne Mono", ui-monospace, "SF Mono", Menlo, monospace; /* Roles */ --font-display: var(--font-serif); /* hero + section headlines */ --font-heading: var(--font-serif); /* h2–h4 */ --font-body: var(--font-sans); /* paragraphs, UI */ --font-meta: var(--font-sans); /* labels, eyebrows, specs */ /* Weights (kept narrow; serif stays light, sans stays regular/medium) */ --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; /* Type scale — fluid clamps re-derived from AfF's clamp() approach (h1 clamp(1.75rem,6vw,3rem); h2 clamp(1.5rem,5vw,2.25rem)) and extended into a Major-Third-ish editorial ramp. Mobile-first: min values are the phone sizes, max values the desktop sizes. */ --fs-eyebrow: 0.75rem; /* 12px — labels/eyebrows */ --fs-meta: 0.8125rem; /* 13px — specs, captions */ --fs-sm: 0.875rem; /* 14px — fine print */ --fs-base: 1rem; /* 16px — body (AfF mobile base) */ --fs-md: clamp(1.0625rem, 0.6vw + 0.95rem, 1.1875rem); /* 17–19px lead body */ --fs-lg: clamp(1.25rem, 1.2vw + 1rem, 1.5rem); /* 20–24px h4/subhead */ --fs-xl: clamp(1.5rem, 2vw + 1.1rem, 2.25rem); /* 24–36px h3 */ --fs-2xl: clamp(1.875rem, 3.2vw + 1.1rem, 3rem); /* 30–48px h2 */ --fs-3xl: clamp(2.25rem, 5vw + 1rem, 4rem); /* 36–64px h1 */ --fs-display: clamp(2.75rem, 7vw + 1rem, 5.5rem); /* 44–88px hero */ /* Cover wordmark — the oversized editorial hero for the locked/cover page. Larger and more present than --fs-display: this IS the page. Scales from a commanding phone size up to a full fashion-cover desktop size. Min set so "The Roster" sits comfortably within the framed insets on a 360px phone. */ --fs-cover-wordmark: clamp(3.25rem, 11vw + 0.5rem, 8rem); /* 52–128px */ /* Line heights — AfF runs tight on display (0.9–1.0), open on body (1.4). We soften display slightly for serif legibility. */ --lh-display: 1.02; --lh-heading: 1.1; --lh-snug: 1.25; --lh-body: 1.6; /* editorial reading measure */ --lh-relaxed: 1.75; /* long-form story blocks */ /* Letter spacing — AfF used tight headings (-25/-50 = -0.025/-0.05em) and uppercase UI. We keep tight display but reserve uppercase + positive tracking strictly for small eyebrow/meta labels. */ --ls-display: -0.02em; --ls-heading: -0.01em; --ls-body: 0; --ls-eyebrow: 0.14em; /* uppercase labels only */ --ls-meta: 0.04em; /* Reading measure (max line length for body copy) */ --measure: 68ch; --measure-narrow: 54ch; /* ---------------------------------------------------------------- SPACING 8px base unit (AfF grid/section rhythm resolves to multiples of 4/8/12). Section vertical rhythm derived from AfF vertical_space_between_sections:60 and content gaps; we scale it fluidly for editorial breathing room. */ --space-3xs: 0.25rem; /* 4px */ --space-2xs: 0.5rem; /* 8px */ --space-xs: 0.75rem; /* 12px */ --space-sm: 1rem; /* 16px */ --space-md: 1.5rem; /* 24px (AfF grid_column_gap small) */ --space-lg: 2rem; /* 32px (AfF desktop margin) */ --space-xl: 3rem; /* 48px (AfF grid gap large) */ --space-2xl: 4rem; /* 64px */ --space-3xl: 6rem; /* 96px */ --space-4xl: 8rem; /* 128px */ /* Page gutters — fluid, from AfF mobile-gutter clamp(16px,4vw,24px) widened for desktop editorial margins. */ --gutter: clamp(1rem, 5vw, 2.5rem); /* page side padding */ --gutter-narrow: clamp(1rem, 4vw, 1.5rem); /* Section vertical spacing — fluid replacement for AfF's fixed 60px */ --section-y: clamp(3rem, 8vw, 7rem); --section-y-tight: clamp(2rem, 5vw, 4rem); /* Cover frame inset — the distance the hairline "framed cover" rule sits in from the viewport edge on the locked page. Tight on phones so the frame still reads without crowding the wordmark; generous on desktop for the magazine-cover margin. The frame and the content gutter share this scale. */ --cover-frame-inset: clamp(0.875rem, 4vw, 3rem); /* 14–48px from edge */ --cover-frame-pad: clamp(1.25rem, 5vw, 4rem); /* content inset inside frame */ /* Grid gaps */ --grid-gap: clamp(1rem, 2.5vw, 2rem); /* product/edit grids */ --grid-gap-media: clamp(0.5rem, 1vw, 0.75rem);/* tight media mosaics (AfF media gap 4–12) */ /* ----------------------------------------------------------------- RADII AfF used pill buttons (9999px) + small 4–8px media corners. We keep the pill ONLY for the primary CTA, and otherwise stay near-square for an architectural, gallery-frame feel. */ --radius-none: 0; --radius-sm: 2px; /* inputs, small chips */ --radius-md: 4px; /* cards, media (AfF media radius) */ --radius-lg: 8px; /* modals, large surfaces */ --radius-pill: 9999px;/* primary button + status pills only */ /* ------------------------------------------------------------- ELEVATION Whisper-soft, warm-tinted shadows. Quiet luxury favors hairline borders over heavy drop shadows; reserve shadow for genuinely floating UI. */ --shadow-none: none; --shadow-sm: 0 1px 2px rgba(26, 24, 23, 0.04); --shadow-md: 0 4px 16px rgba(26, 24, 23, 0.06); --shadow-lg: 0 12px 40px rgba(26, 24, 23, 0.10); --shadow-focus: 0 0 0 3px var(--color-accent-soft); /* ----------------------------------------------------------- CONTAINERS AfF disabled a hard max-site-width; we cap content for editorial line control while letting hero media bleed full-width. */ --container-full: 100%; --container-wide: 90rem; /* 1440px — galleries, full layouts */ --container-page: 75rem; /* 1200px — standard page max */ --container-text: 44rem; /* 704px — long-form reading column */ --container-narrow: 34rem; /* 544px — forms, single-column blocks */ /* ------------------------------------------------------------- MEDIA RATIO Photo presentation standard. Portrait 4:5 is the house crop for garments (see photo standards in specs); 1:1 for detail/flat-lay, 3:2 for hero. */ --ratio-portrait: 4 / 5; /* primary garment crop */ --ratio-square: 1 / 1; /* detail, flat, swatch */ --ratio-hero: 3 / 2; /* editorial hero / banner */ --ratio-wide: 16 / 9; /* video / wide banner */ /* ----------------------------------------------------------------- MOTION Restrained, slow-ish easing. No bounce. */ --dur-fast: 120ms; --dur-base: 220ms; --dur-slow: 400ms; --ease-out: cubic-bezier(0.2, 0.6, 0.2, 1); --ease-in-out:cubic-bezier(0.4, 0, 0.2, 1); /* --------------------------------------------------------- FOCUS & TOUCH Accessibility is part of the spec. Visible focus ring + AfF's 44px touch minimum. */ --focus-width: 2px; --focus-offset: 2px; --focus-ring: var(--focus-width) solid var(--color-focus); --touch-min: 2.75rem; /* 44px — AfF touch-target-min */ /* ----------------------------------------------------- BREAKPOINTS (ref) Documented for liquid-dev; CSS @media cannot consume custom properties, so these MUST be hardcoded identically in media queries. Derived from AfF's 375 / 768 / 769 / 1024(lg) / 1280 stops. */ --bp-xs: 23.4375em; /* 375px small phones */ --bp-sm: 40em; /* 640px large phones */ --bp-md: 48em; /* 768px tablet — AfF mobile cutoff */ --bp-lg: 64em; /* 1024px desktop — AfF lg: */ --bp-xl: 80em; /* 1280px wide desktop */ } /* ------------------------------------------------------- REDUCED MOTION Honor user preference; collapse durations. */ @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; } }