/* ============================================================================ * @gap/tokens — GAP Design System token layer (v1.0.0) * ---------------------------------------------------------------------------- * Source of truth: ~/GAP-Industries/specs/gap-design-system-spec-2026-06-02.md * Evolved (NOT redesigned) from production website/css/style.css + * marketplace.css. The brand anchors here are the REAL production hex values. * * Architecture: * 1. Primitive ramps (--gds-color--50..900) — raw scale, never used * directly by components. * 2. Semantic aliases (--gds-color-bg / --ink / --action / ...) — what * components consume. Re-pointed per surface. * 3. Surface switch — data-gds-surface="dark" on / re-points * the semantic aliases. ONE attribute flips the cockpit dark; no * component knows which surface it's on. * 4. Legacy alias shim — --navy / --orange / --radius / --shadow-* etc. keep * resolving so existing style.css / marketplace.css never break. We * deprecate-and-alias, we do not remove (delete-law). * ==========================================================================*/ :root { /* ── 1. PRIMITIVE COLOR RAMPS ───────────────────────────────────────────── * Anchors (production): navy #0B2447, steel #19376D, sky #576CBC, * pale #A5D7E8, orange #FF6B35, green #2EC4B6, ink #1A1A1A, offwhite #F5F7FA. * Ramps generated around those anchors; the anchor value is preserved at its * named stop so production color does not drift. */ /* Navy (primary brand). 900 = production --navy. */ --gds-color-navy-50: #EAF0F7; --gds-color-navy-100: #C9D8EB; --gds-color-navy-200: #A5BCDB; --gds-color-navy-300: #7C9BC8; --gds-color-navy-400: #576CBC; /* = production --sky */ --gds-color-navy-500: #3A5497; --gds-color-navy-600: #28406F; /* approaches --steel */ --gds-color-navy-700: #19376D; /* = production --steel */ --gds-color-navy-800: #122A52; --gds-color-navy-900: #0B2447; /* = production --navy (primary brand) */ /* Accent (pale sky — light-surface accents, dark-surface highlights). */ --gds-color-accent-50: #F0FAFD; --gds-color-accent-100: #D6EFF6; --gds-color-accent-200: #A5D7E8; /* = production --pale */ --gds-color-accent-300: #7FC4DC; --gds-color-accent-400: #57AECE; --gds-color-accent-500: #3492BA; --gds-color-accent-600: #2A7799; --gds-color-accent-700: #205B76; --gds-color-accent-800: #173F52; --gds-color-accent-900: #0E2530; /* Orange (action / price). 500 = production --orange. */ --gds-color-orange-50: #FFF1EB; --gds-color-orange-100: #FFDBCB; --gds-color-orange-200: #FFC0A5; --gds-color-orange-300: #FF9F78; --gds-color-orange-400: #FF854E; --gds-color-orange-500: #FF6B35; /* = production --orange (action/price) */ --gds-color-orange-600: #E5551F; --gds-color-orange-700: #C04316; --gds-color-orange-800: #93330F; --gds-color-orange-900: #5E2008; /* Success (teal-green). 500 = production --green. */ --gds-color-success-50: #E6FAF7; --gds-color-success-100: #BFF1EA; --gds-color-success-200: #8EE5D9; --gds-color-success-300: #5AD7C7; --gds-color-success-400: #2EC4B6; /* = production --green */ --gds-color-success-500: #1FA89B; --gds-color-success-600: #18897E; --gds-color-success-700: #136B63; --gds-color-success-800: #0D4C47; --gds-color-success-900: #082E2B; /* Warning (amber). */ --gds-color-warning-50: #FFF7E6; --gds-color-warning-100: #FFE9B8; --gds-color-warning-200: #FFD680; --gds-color-warning-300: #FFC04D; --gds-color-warning-400: #FBA92A; --gds-color-warning-500: #E8920F; --gds-color-warning-600: #C0760A; --gds-color-warning-700: #945A08; --gds-color-warning-800: #663E05; --gds-color-warning-900: #3D2503; /* Danger (red). */ --gds-color-danger-50: #FDECEC; --gds-color-danger-100: #F9CACA; --gds-color-danger-200: #F2A0A0; --gds-color-danger-300: #E97373; --gds-color-danger-400: #DF4D4D; --gds-color-danger-500: #CF3636; --gds-color-danger-600: #B02929; --gds-color-danger-700: #8A2020; --gds-color-danger-800: #611717; --gds-color-danger-900: #3A0D0D; /* Ink / neutral (text + surfaces). 900 = production --charcoal, * 50 = production --offwhite. */ --gds-color-ink-50: #F5F7FA; /* = production --offwhite */ --gds-color-ink-100: #E6EAF0; --gds-color-ink-200: #CDD4DF; --gds-color-ink-300: #AAB4C4; --gds-color-ink-400: #7E899B; --gds-color-ink-500: #5C6678; --gds-color-ink-600: #434C5C; --gds-color-ink-700: #2F3744; --gds-color-ink-800: #21262F; --gds-color-ink-900: #1A1A1A; /* = production --charcoal */ --gds-color-white: #FFFFFF; /* ── 2. TYPE ──────────────────────────────────────────────────────────── */ --gds-font-display: "Inter Tight", "Inter", system-ui, -apple-system, sans-serif; --gds-font-body: "Inter", system-ui, -apple-system, sans-serif; --gds-font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; --gds-text-xs: 0.75rem; --gds-text-sm: 0.875rem; --gds-text-base: 1rem; --gds-text-lg: 1.125rem; --gds-text-xl: 1.375rem; --gds-text-2xl: 1.75rem; --gds-text-3xl: 2.25rem; --gds-text-4xl: 3rem; --gds-leading-xs: 1.4; --gds-leading-sm: 1.45; --gds-leading-base: 1.55; --gds-leading-lg: 1.5; --gds-leading-xl: 1.35; --gds-leading-2xl: 1.25; --gds-leading-3xl: 1.15; --gds-leading-4xl: 1.05; --gds-weight-regular: 400; --gds-weight-medium: 500; --gds-weight-semibold: 600; --gds-weight-bold: 700; --gds-tracking-tight: -0.02em; /* display/headings */ --gds-tracking-normal: 0; /* ── 3. SPACING (8px base) ────────────────────────────────────────────── */ --gds-space-1: 4px; --gds-space-2: 8px; --gds-space-3: 12px; --gds-space-4: 16px; --gds-space-5: 24px; --gds-space-6: 32px; --gds-space-7: 48px; --gds-space-8: 64px; --gds-space-9: 96px; /* ── 4. RADIUS (evolved from --radius:12px / --radius-lg:20px) ─────────── */ --gds-radius-sm: 6px; --gds-radius-md: 10px; --gds-radius-12: 12px; /* legacy production tier — anchors style.css --radius */ --gds-radius-lg: 14px; --gds-radius-xl: 20px; --gds-radius-full: 9999px; /* ── 5. SHADOW — LIGHT surface (evolved from the three production --shadow-*) */ --gds-shadow-sm: 0 1px 2px rgba(11, 36, 71, 0.05); --gds-shadow-md: 0 4px 12px rgba(11, 36, 71, 0.08); --gds-shadow-lg: 0 12px 40px rgba(11, 36, 71, 0.12); --gds-shadow-xl: 0 24px 64px rgba(11, 36, 71, 0.18); /* ── 6. MOTION (premium band, no bounce) ──────────────────────────────── */ --gds-motion-fast: 150ms; --gds-motion-base: 180ms; --gds-motion-slow: 220ms; --gds-ease-out: cubic-bezier(0.16, 1, 0.3, 1); --gds-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* ── 7. Z-INDEX ───────────────────────────────────────────────────────── */ --gds-z-base: 0; --gds-z-raised: 10; --gds-z-sticky: 100; --gds-z-overlay: 1000; --gds-z-modal: 1100; --gds-z-toast: 1200; /* ── 8. SEMANTIC ALIASES — LIGHT MARKETING SURFACE (default) ────────────── * Components reference ONLY these, never the raw ramps above. */ --gds-color-bg: var(--gds-color-white); --gds-color-bg-subtle: var(--gds-color-ink-50); --gds-color-surface: var(--gds-color-white); --gds-color-surface-raised: var(--gds-color-white); --gds-color-surface-sunken: var(--gds-color-ink-50); --gds-color-ink: var(--gds-color-navy-900); --gds-color-ink-muted: var(--gds-color-ink-600); --gds-color-ink-subtle: var(--gds-color-ink-400); --gds-color-ink-inverse: var(--gds-color-white); --gds-color-border: rgba(11, 36, 71, 0.12); /* = production --border */ --gds-color-border-strong: rgba(11, 36, 71, 0.22); --gds-color-action: var(--gds-color-orange-500); --gds-color-action-hover: var(--gds-color-orange-600); --gds-color-action-ink: var(--gds-color-white); --gds-color-success: var(--gds-color-success-500); --gds-color-success-bg: var(--gds-color-success-50); --gds-color-warning: var(--gds-color-warning-500); --gds-color-warning-bg: var(--gds-color-warning-50); --gds-color-danger: var(--gds-color-danger-500); --gds-color-danger-bg: var(--gds-color-danger-50); --gds-color-neutral-bg: var(--gds-color-ink-100); --gds-color-focus-ring: var(--gds-color-orange-500); /* Effective shadow set, re-pointed per surface. */ --gds-shadow-card: var(--gds-shadow-md); --gds-shadow-card-hover: var(--gds-shadow-lg); --gds-shadow-overlay: var(--gds-shadow-xl); } /* ── 9. SEMANTIC ALIASES — DARK COCKPIT SURFACE ──────────────────────────── * The salesman lives here all day. Reads like a pro tool (Linear dark), not a * bright marketing page. ONE attribute flips it; no component is surface-aware. */ :root[data-gds-surface="dark"], [data-gds-surface="dark"] { --gds-color-bg: #081A33; /* deeper than navy-900 */ --gds-color-bg-subtle: #0B2447; /* navy-900 */ --gds-color-surface: #0F2B50; --gds-color-surface-raised: #143461; --gds-color-surface-sunken: #061427; --gds-color-ink: #EAF0F7; /* navy-50 */ --gds-color-ink-muted: #A5BCDB; /* navy-200 */ --gds-color-ink-subtle: #7C9BC8; /* navy-300 */ --gds-color-ink-inverse: var(--gds-color-navy-900); --gds-color-border: rgba(165, 188, 219, 0.16); --gds-color-border-strong: rgba(165, 188, 219, 0.30); --gds-color-action: var(--gds-color-orange-500); --gds-color-action-hover: var(--gds-color-orange-400); --gds-color-action-ink: #1A1208; --gds-color-success: var(--gds-color-success-400); --gds-color-success-bg: rgba(46, 196, 182, 0.14); --gds-color-warning: var(--gds-color-warning-400); --gds-color-warning-bg: rgba(251, 169, 42, 0.14); --gds-color-danger: var(--gds-color-danger-400); --gds-color-danger-bg: rgba(223, 77, 77, 0.16); --gds-color-neutral-bg: rgba(165, 188, 219, 0.10); --gds-color-focus-ring: var(--gds-color-orange-400); /* Dark shadows: lower-alpha black + subtle top inner highlight. */ --gds-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.40); --gds-shadow-md: 0 4px 14px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.04); --gds-shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.05); --gds-shadow-xl: 0 28px 72px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.06); --gds-shadow-card: var(--gds-shadow-md); --gds-shadow-card-hover: var(--gds-shadow-lg); --gds-shadow-overlay: var(--gds-shadow-xl); } /* ── 10. LEGACY ALIAS SHIM ───────────────────────────────────────────────── * Existing website/css/style.css + marketplace.css reference these names. They * now resolve THROUGH the new token layer, so the production site keeps working * verbatim during migration. DEPRECATED — do not author new code against these. * Removal requires Skippy GO (delete-law). Until then: deprecate, never break. * * NOTE: this block is the canonical alias source. The migration plan is to * delete the duplicate :root declarations from style.css/marketplace.css ONLY * after every surface links tokens.css first — a future, Skippy-gated step. */ :root { /* style.css legacy vars */ --navy: var(--gds-color-navy-900); --steel: var(--gds-color-navy-700); --sky: var(--gds-color-navy-400); --pale: var(--gds-color-accent-200); --offwhite: var(--gds-color-ink-50); --charcoal: var(--gds-color-ink-900); --orange: var(--gds-color-orange-500); --green: var(--gds-color-success-400); --border: var(--gds-color-border); --shadow-sm: var(--gds-shadow-sm); --shadow-md: var(--gds-shadow-md); --shadow-lg: var(--gds-shadow-lg); --radius: var(--gds-radius-12); /* legacy production 12px tier — exact, no regression */ --radius-lg: var(--gds-radius-xl); /* legacy 20px → xl */ --max: 1200px; /* marketplace.css legacy --mp-* vars, re-expressed as semantic aliases */ --mp-card-bg: var(--gds-color-surface); --mp-card-radius: var(--gds-radius-lg); --mp-card-shadow: var(--gds-shadow-sm); --mp-card-shadow-hover: var(--gds-shadow-card-hover); --mp-card-border: 1px solid var(--gds-color-border); --mp-card-img-ratio: 4 / 3; --mp-placeholder-bg: linear-gradient(145deg, var(--gds-color-navy-900) 0%, var(--gds-color-navy-700) 100%); --mp-price-color: var(--gds-color-action); --mp-price-size: var(--gds-text-lg); --mp-badge-featured-bg: var(--gds-color-action); --mp-badge-featured-text: var(--gds-color-action-ink); --mp-badge-licensed-bg: rgba(11, 36, 71, 0.85); --mp-badge-licensed-text: var(--gds-color-white); --mp-badge-radius: var(--gds-radius-sm); --mp-filter-bg: rgba(255, 255, 255, 0.75); --mp-filter-blur: 12px; --mp-filter-border: 1px solid var(--gds-color-border); --mp-filter-radius: var(--radius); /* production inherits --radius (12px) — track it exactly */ --mp-gallery-thumb-ratio: 4 / 3; --mp-gallery-primary-ratio: 16 / 9; --mp-max: 1280px; --mp-trust-bg: var(--gds-color-ink-50); --mp-trust-border: var(--gds-color-border); --mp-badge-sample-bg: var(--gds-color-navy-700); --mp-badge-sample-text: var(--gds-color-white); --mp-disclosure-bg: rgba(11, 36, 71, 0.045); --mp-disclosure-border: var(--gds-color-border); --mp-page-pad: var(--gds-space-6) var(--gds-space-5); --mp-card-gap: var(--gds-space-5); --mp-card-pad: var(--gds-space-4); --mp-section-gap: var(--gds-space-6); }