/**
 * Supersteps Design System — Color Tokens
 * Palette locked for e-commerce sneaker/fashion storefront.
 *
 * Usage rules:
 * - --color-accent: CTA, badges, active/selected, link hover ONLY (never large fills)
 * - --color-bg: default page / product surfaces (photos need clean contrast)
 * - --color-primary: body text on light + header/footer backgrounds
 * - --color-primary-text: text/icons on dark (--color-primary) surfaces
 */
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700&family=Oswald:wght@500;600;700&display=swap");

:root {
  /* ===== Official brand palette ===== */
  --color-primary: #111111;
  --color-primary-text: #ffffff;
  --color-bg: #ffffff;
  --color-bg-secondary: #f5f5f3;
  --color-accent: #e4002b;
  --color-accent-hover: #c4001f;
  --color-border: #e5e5e3;
  --color-text-secondary: #6b6b68;

  /* ===== Semantic aliases ===== */
  --color-text: var(--color-primary);
  --color-focus: var(--color-accent);
  --color-sale: var(--color-accent);
  --color-badge: var(--color-accent);
  --color-link-hover: var(--color-accent);
  --color-cta: var(--color-accent);
  --color-cta-hover: var(--color-accent-hover);
  --color-header-bg: var(--color-bg);
  --color-footer-bg: var(--color-primary);
  --color-header-text: var(--color-primary);
  --color-footer-text: var(--color-primary-text);

  /* ===== Backward-compatible --ss-* aliases ===== */
  --ss-void: var(--color-primary);
  --ss-ink: var(--color-primary);
  --ss-black: var(--color-primary);
  --ss-white: var(--color-primary-text);
  --ss-cream: var(--color-bg-secondary);
  --ss-fog: var(--color-bg-secondary);
  --ss-red: var(--color-accent);
  --ss-red-deep: var(--color-accent-hover);
  --ss-red-hover: var(--color-accent-hover);
  --ss-red-glow: color-mix(in srgb, var(--color-accent) 45%, transparent);
  --ss-surface: var(--color-bg-secondary);
  --ss-surface-2: #ecece8;
  --ss-elevated: var(--color-bg);
  --ss-border: var(--color-border);
  --ss-border-strong: #d0d0cc;
  --ss-mist: var(--color-text-secondary);
  --ss-muted: var(--color-text-secondary);
  --ss-font: var(--font-primary);

  /* Typography */
  --ss-display: "Oswald", "Noto Sans Georgian Condensed", sans-serif;
  --ss-body: "Noto Sans Georgian Condensed", var(--font-primary), sans-serif;
  --ss-tracking-display: 0.04em;
  --ss-tracking-label: 0.16em;

  /* Space */
  --ss-1: 4px;
  --ss-2: 8px;
  --ss-3: 12px;
  --ss-4: 16px;
  --ss-5: 24px;
  --ss-6: 32px;
  --ss-7: 48px;
  --ss-8: 64px;
  --ss-9: 96px;

  /* Layout */
  --ss-max: 1200px;
  --ss-gutter: clamp(20px, 4vw, 40px);
  --ss-radius-sm: 2px;
  --ss-radius-pill: 999px;

  /* Motion */
  --ss-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ss-duration: 0.85s;
}

/**
 * Optional dark surface scope (e.g. header, footer, hero).
 * Do NOT set body text to --color-primary on these surfaces.
 */
.ss-surface-dark,
.footer,
.ss-hero {
  --on-dark-text: var(--color-primary-text);
  --on-dark-muted: color-mix(in srgb, var(--color-primary-text) 65%, transparent);
}