:root {
  /*
   * Yonexbutiken design tokens.
   * Direction: official Yonex clarity, catalog-like white space, blue CTA,
   * green/lime accents, and restrained technical product presentation.
   */

  /* Typography */
  --font-body-family: "Barlow", sans-serif;
  --font-heading-family: var(--font-body-family);
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Brand colors */
  --color-brand-blue: #006bb6;
  --color-brand-blue-dark: #00518a;
  --color-brand-blue-deep: #003f70;
  --color-brand-green: #00a651;
  --color-brand-lime: #9be000;
  --color-action: #0070f3;
  --color-action-hover: #0057b8;

  /* Neutral palette */
  --color-black: #000;
  --color-text: #111;
  --color-text-strong: #0a0a0a;
  --color-text-muted: #555;
  --color-text-soft: #6a727c;
  --color-text-subtle: #7a828c;
  --color-white: #fff;
  --color-surface: #f5f5f5;
  --color-surface-soft: #fafafa;
  --color-surface-cool: #f6f9fb;
  --color-surface-blue: #eef5fb;
  --color-border: #e7eaee;
  --color-border-subtle: #eee;
  --color-border-strong: #d1d1d1;

  /* Semantic colors */
  --color-success: #18a957;
  --color-success-dark: #087a37;
  --color-success-soft: rgba(24, 169, 87, .14);
  --color-overlay: rgba(0, 0, 0, .4);

  /* Layout */
  --site-container-width: 1440px;
  --site-container-gutter: clamp(18px, 3vw, 48px);
  --section-space-xs: clamp(32px, 4vw, 48px);
  --section-space-sm: clamp(48px, 6vw, 72px);
  --section-space-md: clamp(64px, 7vw, 96px);
  --section-space-lg: clamp(84px, 9vw, 128px);

  /* Spacing scale */
  --space-2xs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;

  /* Shape */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* Borders and shadows */
  --border-subtle: 1px solid var(--color-border-subtle);
  --border-default: 1px solid var(--color-border);
  --border-strong: 1px solid var(--color-border-strong);
  --shadow-xs: 0 8px 18px rgba(0, 0, 0, .06);
  --shadow-sm: 0 12px 30px rgba(0, 0, 0, .08);
  --shadow-md: 0 18px 40px rgba(0, 0, 0, .1);
  --shadow-lg: 0 24px 60px rgba(0, 35, 78, .14);

  /* Motion */
  --duration-fast: .18s;
  --duration-base: .25s;
  --ease-standard: cubic-bezier(.2, .8, .2, 1);
}