/** * Shop v2 — Circuit Atelier design tokens * Scope: .shop-v2 on * Load first via manifest.json */ @import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&display=swap"); .shop-v2 { /* ── Color: surfaces ─────────────────────────────────────────────── */ --ms-void: #1a1d24; --ms-void: oklch(0.14 0.02 250); --ms-surface: #f9f9fa; --ms-surface: oklch(0.98 0.004 250); --ms-surface-elevated: rgba(255, 255, 255, 0.72); --ms-surface-elevated: oklch(1 0 0 / 0.72); --ms-surface-sunken: #f0f1f3; --ms-surface-sunken: oklch(0.95 0.006 250); /* ── Color: text ─────────────────────────────────────────────────── */ --ms-ink: #353535; --ms-ink: oklch(0.22 0.01 250); --ms-ink-muted: #63666d; --ms-ink-muted: oklch(0.48 0.02 250); --ms-ink-on-dark: #f2f2f3; --ms-ink-on-dark: oklch(0.95 0 0); --ms-ink-muted-on-dark: #b4b8c0; --ms-ink-muted-on-dark: oklch(0.75 0.01 250); /* ── Color: brand & accents ──────────────────────────────────────── */ --ms-brand: #0e80c3; --ms-brand: oklch(0.55 0.18 250); --ms-brand-hover: #0a6aa3; --ms-brand-hover: oklch(0.48 0.16 250); --ms-brand-muted: rgba(14, 128, 195, 0.12); --ms-brand-muted: oklch(0.55 0.18 250 / 0.12); --ms-brand-glow: rgba(14, 128, 195, 0.45); --ms-brand-glow: oklch(0.65 0.22 250 / 0.45); --ms-spark: #c9a227; --ms-spark: oklch(0.72 0.14 85); --ms-spark-muted: rgba(201, 162, 39, 0.15); --ms-spark-muted: oklch(0.72 0.14 85 / 0.15); --ms-urgent: #c62828; --ms-urgent-hover: #a31f1f; --ms-link: #0e80c3; --ms-link: oklch(0.55 0.18 250); --ms-link-hover: #0a6aa3; --ms-link-hover: oklch(0.48 0.16 250); /* ── Color: borders & overlays ───────────────────────────────────── */ --ms-border: rgba(0, 0, 0, 0.08); --ms-border: oklch(0.88 0.01 250 / 0.6); --ms-border-strong: rgba(0, 0, 0, 0.14); --ms-border-strong: oklch(0.78 0.01 250 / 0.75); --ms-border-on-dark: rgba(255, 255, 255, 0.12); --ms-border-on-dark: oklch(1 0 0 / 0.12); --ms-overlay: rgba(10, 12, 18, 0.55); --ms-overlay: oklch(0.14 0.02 250 / 0.55); --ms-scrim-top: linear-gradient(to bottom, var(--ms-void) 0%, transparent 100%); --ms-scrim-bottom: linear-gradient(to top, var(--ms-void) 0%, transparent 55%); /* ── Color: focus & states ───────────────────────────────────────── */ --ms-focus-ring: 0 0 0 2px var(--ms-surface), 0 0 0 4px var(--ms-brand); --ms-focus-ring-on-dark: 0 0 0 2px var(--ms-void), 0 0 0 4px var(--ms-brand-glow); /* ── Legacy aliases (global.css, future partials) ────────────────── */ --ms-color-ink: var(--ms-ink); --ms-color-ink-muted: var(--ms-ink-muted); --ms-color-surface: var(--ms-surface); --ms-color-border: var(--ms-border); --ms-color-brand: var(--ms-brand); --ms-color-brand-hover: var(--ms-brand-hover); --ms-color-link: var(--ms-link); /* ── Typography: families ────────────────────────────────────────── */ --ms-font-display: MyWebFont, "Roboto Condensed", sans-serif; --ms-font-ui: "DM Sans", "Roboto", Helvetica, Arial, sans-serif; --ms-font-mono: "SF Mono", "Cascadia Code", "Segoe UI Mono", Consolas, monospace; /* ── Typography: scale ───────────────────────────────────────────── */ --ms-text-xs: 0.75rem; --ms-text-sm: 0.8125rem; --ms-text-base: 1rem; --ms-text-lg: 1.125rem; --ms-text-xl: 1.25rem; --ms-text-2xl: 1.5rem; --ms-text-3xl: 1.875rem; --ms-text-display: clamp(2rem, 4vw, 3.5rem); --ms-text-hero: clamp(2.5rem, 6vw, 5.5rem); --ms-leading-none: 1.1; --ms-leading-tight: 1.25; --ms-leading-snug: 1.375; --ms-leading-normal: 1.6; --ms-leading-relaxed: 1.75; --ms-tracking-tighter: -0.04em; --ms-tracking-tight: -0.03em; --ms-tracking-normal: 0; --ms-tracking-wide: 0.08em; --ms-tracking-wider: 0.12em; --ms-weight-normal: 400; --ms-weight-medium: 500; --ms-weight-semibold: 600; --ms-weight-bold: 700; --ms-prose-max: 70ch; --ms-content-max: 1280px; --ms-gutter-inline: clamp(1.25rem, 5vw, 4rem); /* ── Spacing ─────────────────────────────────────────────────────── */ --ms-space-2xs: 0.125rem; --ms-space-xs: 0.25rem; --ms-space-sm: 0.5rem; --ms-space-md: 1rem; --ms-space-lg: 1.5rem; --ms-space-xl: 2rem; --ms-space-2xl: 3rem; --ms-space-3xl: 5rem; --ms-space-4xl: 7.5rem; /* Legacy spacing aliases */ --ms-space-xs-legacy: 4px; --ms-space-sm-legacy: 8px; --ms-space-md-legacy: 16px; --ms-space-lg-legacy: 24px; /* ── Radius ──────────────────────────────────────────────────────── */ --ms-radius-xs: 4px; --ms-radius-sm: 6px; --ms-radius-md: 12px; --ms-radius-lg: 16px; --ms-radius-xl: 24px; --ms-radius-pill: 9999px; /* ── Shadows (layered: hairline + ambient + contact) ─────────────── */ --ms-shadow-xs: 0 0 0 1px oklch(0 0 0 / 0.04), 0 1px 2px oklch(0 0 0 / 0.04); --ms-shadow-sm: 0 0 0 1px oklch(0 0 0 / 0.04), 0 2px 4px oklch(0 0 0 / 0.04), 0 1px 2px oklch(0 0 0 / 0.03); --ms-shadow-md: 0 0 0 1px oklch(0 0 0 / 0.05), 0 8px 24px oklch(0 0 0 / 0.08), 0 2px 6px oklch(0 0 0 / 0.04); --ms-shadow-lg: 0 0 0 1px oklch(0 0 0 / 0.06), 0 16px 48px oklch(0 0 0 / 0.12), 0 4px 12px oklch(0 0 0 / 0.06); --ms-shadow-xl: 0 0 0 1px oklch(0 0 0 / 0.08), 0 24px 64px oklch(0 0 0 / 0.16), 0 8px 20px oklch(0 0 0 / 0.08); --ms-shadow-glow-brand: 0 0 0 1px var(--ms-brand-glow), 0 8px 32px var(--ms-brand-glow); --ms-shadow-glow-brand-strong: 0 0 0 1px oklch(0.65 0.22 250 / 0.55), 0 12px 40px oklch(0.55 0.18 250 / 0.45); --ms-shadow-elevated: 0 -8px 40px oklch(0 0 0 / 0.18), 0 0 0 1px oklch(0 0 0 / 0.06); --ms-shadow-glow-spark: 0 0 0 1px oklch(0.72 0.14 85 / 0.25), 0 8px 28px oklch(0.72 0.14 85 / 0.35); --ms-shadow-inner: inset 0 1px 2px oklch(0 0 0 / 0.06); /* ── Glass & depth ───────────────────────────────────────────────── */ --ms-glass-blur: 20px; --ms-glass-saturate: 1.4; --ms-backdrop: blur(var(--ms-glass-blur)) saturate(var(--ms-glass-saturate)); --ms-glass-bg-light: rgba(255, 255, 255, 0.75); --ms-glass-bg-light: oklch(1 0 0 / 0.75); --ms-glass-bg-dark: rgba(255, 255, 255, 0.08); --ms-glass-bg-dark: oklch(1 0 0 / 0.08); --ms-glass-border-light: rgba(255, 255, 255, 0.55); --ms-glass-border-light: oklch(1 0 0 / 0.55); --ms-glass-border-dark: rgba(255, 255, 255, 0.14); --ms-glass-border-dark: oklch(1 0 0 / 0.14); --ms-glow-orb-size: min(60vw, 480px); --ms-glow-orb-blur: 80px; --ms-glow-orb-opacity: 0.45; --ms-noise-opacity: 0.035; --ms-noise-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E"); --ms-depth-parallax: 0.15; /* Glass usage: background: var(--ms-glass-bg-light); backdrop-filter: var(--ms-backdrop); border: 1px solid var(--ms-glass-border-light); */ /* ── Motion ──────────────────────────────────────────────────────── */ --ms-ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ms-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ms-ease-linear: linear; --ms-duration-instant: 1ms; --ms-duration-fast: 180ms; --ms-duration-base: 280ms; --ms-duration-reveal: 680ms; --ms-duration-slow: 800ms; --ms-stagger-step: 60ms; --ms-stagger-max: 400ms; --ms-transition-fast: var(--ms-duration-fast) var(--ms-ease-out); --ms-transition-base: var(--ms-duration-base) var(--ms-ease-out); --ms-transition-reveal: var(--ms-duration-reveal) var(--ms-ease-out); /* Multiplier: 0 in reduced-motion block below */ --ms-motion-scale: 1; /* ── Z-index ─────────────────────────────────────────────────────── */ --ms-z-dropdown: 100; --ms-z-sticky: 200; --ms-z-fab: 300; --ms-z-modal-backdrop: 400; --ms-z-modal: 500; --ms-z-toast: 600; --ms-z-dev: 99990; } /* ── Reduced motion ──────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .shop-v2 { --ms-duration-fast: var(--ms-duration-instant); --ms-duration-base: var(--ms-duration-instant); --ms-duration-reveal: var(--ms-duration-instant); --ms-duration-slow: var(--ms-duration-instant); --ms-stagger-step: 0ms; --ms-stagger-max: 0ms; --ms-motion-scale: 0; --ms-ease-out: var(--ms-ease-linear); --ms-ease-in-out: var(--ms-ease-linear); --ms-transition-fast: var(--ms-duration-instant) var(--ms-ease-linear); --ms-transition-base: var(--ms-duration-instant) var(--ms-ease-linear); --ms-transition-reveal: var(--ms-duration-instant) var(--ms-ease-linear); --ms-depth-parallax: 0; --ms-glow-orb-blur: 0px; } } @media (prefers-reduced-motion: reduce) { .shop-v2 *, .shop-v2 *::before, .shop-v2 *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }