/* ============================================
   YOU1S — Design Tokens v3
   Premium Streetwear — Inter Only
   ============================================ */

:root {
  /* — Colors — */
  --c-white: #FFFFFF;
  --c-black: #111111;
  --c-bg: #FFFFFF;
  --c-bg-alt: #F7F7F7;
  --c-bg-dark: #111111;
  --c-text: #111111;
  --c-text-secondary: #767676;
  --c-text-muted: #AAAAAA;
  --c-text-inverse: #FFFFFF;
  --c-border: #E0E0E0;
  --c-border-dark: #111111;
  --c-cta: #111111;
  --c-cta-hover: #333333;
  --c-overlay: rgba(17, 17, 17, 0.45);
  --c-success: #2D7D46;
  --c-error: #C13515;

  /* — Typography — */
  --font-display: 'Montserrat', 'Gotham', 'Helvetica Neue', sans-serif;
  --font-body: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
  --font: var(--font-body);

  /* Logo / brand colors */
  --c-logo-1: #111111;
  --c-logo-2: #1B5E20;
  --c-green: #1B5E20;
  --c-green-light: #2E7D32;

  --fs-10: 0.625rem;
  --fs-11: 0.6875rem;
  --fs-12: 0.75rem;
  --fs-13: 0.8125rem;
  --fs-14: 0.875rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-28: 1.75rem;
  --fs-32: 2rem;
  --fs-40: 2.5rem;
  --fs-48: 3rem;
  --fs-hero: clamp(2rem, 5vw, 3.5rem);

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;

  --lh-tight: 1.15;
  --lh-snug: 1.3;
  --lh-body: 1.6;
  --lh-relaxed: 1.8;

  --ls-title: -0.02em;
  --ls-nav: 0.12em;
  --ls-body: 0;
  --ls-wide: 0.08em;

  /* — Spacing (4px base) — */
  --sp-2: 0.125rem;
  --sp-4: 0.25rem;
  --sp-6: 0.375rem;
  --sp-8: 0.5rem;
  --sp-10: 0.625rem;
  --sp-12: 0.75rem;
  --sp-14: 0.875rem;
  --sp-16: 1rem;
  --sp-20: 1.25rem;
  --sp-24: 1.5rem;
  --sp-32: 2rem;
  --sp-40: 2.5rem;
  --sp-48: 3rem;
  --sp-56: 3.5rem;
  --sp-64: 4rem;
  --sp-80: 5rem;
  --sp-96: 6rem;
  --sp-120: 7.5rem;

  /* — Layout — */
  --container: 1320px;
  --page-px: var(--sp-24);
  --header-h-bar: 32px;
  --header-h-main: 56px;
  --header-h: 110px;

  /* — Transitions — */
  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --dur: 300ms;
  --dur-fast: 200ms;
  --dur-slow: 400ms;

  /* — Z-index — */
  --z-header: 100;
  --z-mega: 90;
  --z-overlay: 200;
  --z-drawer: 300;
  --z-modal: 400;
  --z-toast: 500;
  --z-chat: 600;
}

@media (min-width: 768px) {
  :root { --page-px: var(--sp-40); }
}
@media (min-width: 1200px) {
  :root { --page-px: var(--sp-64); }
}