:root {

  /* =========================================
     COLOR — CORE
  ========================================= */

  --color-white: #ffffff;
  --color-black: #000000;

  --color-neutral-0: #ffffff;
  --color-neutral-25: #fcfcfc;
  --color-neutral-50: #f8f8f8;
  --color-neutral-75: #f3f3f3;
  --color-neutral-100: #efefef;
  --color-neutral-150: #e6e6e6;
  --color-neutral-200: #dddddd;
  --color-neutral-300: #c7c7c7;
  --color-neutral-400: #a0a0a0;
  --color-neutral-500: #7a7a7a;
  --color-neutral-600: #5c5c5c;
  --color-neutral-700: #404040;
  --color-neutral-800: #262626;
  --color-neutral-900: #171717;
  --color-neutral-950: #0d0d0d;

  /* =========================================
     COLOR — SEMANTIC
  ========================================= */

  --color-bg-body: #ffffff;
  --color-bg-surface: #ffffff;
  --color-bg-surface-secondary: #fafafa;
  --color-bg-surface-tertiary: #f5f5f5;
  --color-bg-elevated: rgba(255,255,255,0.92);
  --color-bg-inverse: #111111;

  --color-text-strong: #111111;
  --color-text-primary: #171717;
  --color-text-secondary: #404040;
  --color-text-muted: #6a6a6a;
  --color-text-soft: #959595;
  --color-text-inverse: #ffffff;

  --color-border-soft: #efefef;
  --color-border-default: #e4e4e4;
  --color-border-strong: #d5d5d5;
  --color-border-inverse: rgba(255,255,255,0.14);

  --color-border-soft-black: rgba(0, 0, 0, 0.14);
  --color-border-strong-black: rgba(0, 0, 0, 0.32);

  /* =========================================
     WHITE VARIANTS
  ========================================= */

  --color-white-strong: rgba(255,255,255,0.92);
  --color-white-soft: rgba(255,255,255,0.68);
  --color-white-subtle: rgba(255,255,255,0.04);
  --color-white-hover: rgba(255,255,255,0.08);
  --color-white-active: rgba(255,255,255,0.14);

  /* =========================================
     OVERLAY
  ========================================= */

  --color-overlay-soft: rgba(15,15,16,0.04);
  --color-overlay-medium: rgba(15,15,16,0.08);
  --color-overlay-strong: rgba(15,15,16,0.16);

  /* =========================================
     ACCENT
  ========================================= */

  --color-accent-soft: rgba(59,130,246,0.9);
  --color-accent-muted: rgba(59,130,246,0.6);

  /* =========================================
     SURFACE
  ========================================= */

  --color-surface-subtle: rgba(0,0,0,0.02);
  --color-surface-soft: rgba(0,0,0,0.04);
  --color-surface-muted: rgba(0,0,0,0.06);

  /* =========================================
     TYPOGRAPHY
  ========================================= */

  --font-heading: "Inter", "SF Pro Display", sans-serif;
  --font-body: "Inter", "SF Pro Text", sans-serif;

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semi-bold: 600;
  --font-weight-bold: 700;

  /* =========================================
     TEXT SCALE
  ========================================= */

  --text-2xs: 0.6875rem;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-md: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-4xl: 2.25rem;

  /* FLUID */

  --text-fluid-2xs: clamp(0.6rem, 0.7vw, 0.7rem);
  --text-fluid-xs: clamp(0.7rem, 0.85vw, 0.8rem);
  --text-fluid-sm: clamp(0.8rem, 1vw, 0.95rem);
  --text-fluid-md: clamp(0.95rem, 1.2vw, 1.1rem);
  --text-fluid-lg: clamp(1.1rem, 1.6vw, 1.5rem);
  --text-fluid-xl: clamp(1.4rem, 2.5vw, 2.5rem);

  /* =========================================
     LINE HEIGHT
  ========================================= */

  --line-height-tight: 1.04;
  --line-height-snug: 1.18;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.7;

  /* =========================================
     TRACKING
  ========================================= */

  --tracking-tight: -0.03em;
  --tracking-wide: 0.03em;
  --tracking-wider: 0.08em;
  --tracking-widest: 0.14em;

  /* =========================================
     SPACING
  ========================================= */

  --space-0: 0;
  --space-2: clamp(0.4rem, 0.6vw, 0.5rem);
  --space-3: clamp(0.6rem, 0.8vw, 0.75rem);
  --space-4: clamp(0.8rem, 1vw, 1rem);
  --space-5: clamp(1rem, 1.4vw, 1.25rem);
  --space-6: clamp(1.2rem, 1.8vw, 1.5rem);
  --space-8: clamp(1.6rem, 2.5vw, 2rem);
  --space-10: clamp(2rem, 3vw, 2.5rem);
  --space-12: clamp(2.5rem, 4vw, 3rem);
  --space-14: clamp(3rem, 4.5vw, 3.5rem);
  --space-16: clamp(3rem, 5vw, 4rem);
  --space-20: clamp(4rem, 6vw, 5rem);
  --space-24: clamp(5rem, 8vw, 6rem);
  --space-28: clamp(6rem, 10vw, 7rem);

  /* =========================================
     SIZE
  ========================================= */

  --size-2xs: 16px;
  --size-sm: 24px;
  --size-md: 32px;
  --size-lg: 40px;
  --size-xl: 48px;
  --size-2xl: 64px;

  /* =========================================
     BORDER
  ========================================= */
  --border-0: 0;
  --border-1: 1px;

  /* =========================================
     BUTTON
  ========================================= */

  --btn-height-md: 3.5rem;
  --btn-height-lg: 4rem;

  /* =========================================
     BRAND LOGO
  ========================================= */

  --brand-logo-max-size: 72%;
  --brand-logo-max-size-mobile: 70%;
  --brand-card-button-width: 280px;

  /* =========================================
     SCALE
  ========================================= */

  --scale-hover-sm: 1.05;

  /* =========================================
     SHADOW
  ========================================= */

  --shadow-xs: 0 1px 2px rgba(0,0,0,0.03);
  --shadow-sm: 0 4px 14px rgba(0,0,0,0.05);

  /* =========================================
     GLASS / BLUR
  ========================================= */

  --glass-header: rgba(20,20,20,0.2);
  --glass-dark: rgba(20,20,20,0.24);

  --backdrop-blur-lg: blur(28px);

  /* =========================================
     MOTION
  ========================================= */

  --duration-fast: 120ms;
  --duration-normal: 180ms;
  --duration-slow: 260ms;
  --duration-header: 650ms;

  --ease-smooth: cubic-bezier(0.22,1,0.36,1);
  --ease-header: cubic-bezier(0.22, 1, 0.36, 1);

  /* =========================================
     OPACITY
  ========================================= */

  --opacity-soft: 0.88;
  --opacity-muted: 0.72;
  --opacity-disabled: 0.5;
  --opacity-subtle: 0.36;

  /* =========================================
     Z INDEX
  ========================================= */

  --z-base: 1;
  --z-content: 10;
  --z-overlay: 30;
  --z-header: 50;
  --z-modal: 400;
  --z-max: 999;

  /* =========================================
     HEADER SYSTEM
  ========================================= */

  --header-height: 84px;
  --header-height-mobile: 72px;

  --header-logo-height: 32px;
  --header-logo-height-mobile: 24px;

  --header-icon-btn-size: 34px;
  --header-icon-size: 22px;

  --header-menu-line-width: 18px;
  --header-menu-line-gap: 5px;

  --panel-height-large: 420px;
  --panel-height-search: 220px;

  --panel-padding-x: 48px;
  --panel-padding-x-mobile: 16px;

  --nav-font-size: var(--text-xs);
  --nav-underline-offset: -5px;

  --nav-search-width: 360px;

  --opacity-header-link: 0.92;


  /* =========================================
    SCROLLBAR
  ========================================= */

  --scrollbar-size: 4px;
  --scrollbar-track: transparent;
  --scrollbar-thumb: rgba(17, 17, 17, 0.14);
  --scrollbar-thumb-hover: rgba(17, 17, 17, 0.28);

  /* =========================================
    SELECTION
  ========================================= */

  --selection-bg: rgba(36, 86, 199, 0.18);

  /* =========================================
    LINKS PAGE
  ========================================= */

  --links-text-width: min(520px, 92vw);
  --links-text-width-tablet: 620px;
  --links-text-width-desktop: 760px;

  --links-content-padding: clamp(1rem, 4vw, 1.5rem);
  --links-content-gap: clamp(0.875rem, 2vw, 1.5rem);

  --links-brand-space: clamp(0.25rem, 1vw, 0.75rem);
  --links-logo-height: clamp(1.625rem, 3vw, 2rem);
  --links-logo-height-compact: 1.5rem;

  --links-text-width: min(420px, 92vw);
  --links-text-gap: clamp(0.125rem, 0.5vw, 0.25rem);

  --links-title-size: clamp(0.9rem, 1.8vw, 1.25rem);
  --links-title-tracking: clamp(0.08em, 0.9vw, 0.14em);

  --links-desc-size: clamp(0.625rem, 1vw, 0.75rem);
  --links-desc-tracking: clamp(0.04em, 0.5vw, 0.08em);

  --links-stack-width: min(100%, 320px);
  --links-stack-width-compact: min(100%, 300px);

  --links-actions-gap: clamp(0.625rem, 1.4vw, 0.75rem);
  --links-button-height: clamp(3rem, 6vw, 3.5rem);
  --links-button-text-size: clamp(0.625rem, 0.9vw, 0.75rem);
  --links-button-tracking: clamp(0.1em, 0.8vw, 0.14em);

  --links-social-gap: clamp(0.625rem, 1.6vw, 1rem);
  --links-social-space: clamp(0.75rem, 2vw, 1.5rem);
  --links-icon-size: clamp(1.25rem, 2vw, 1.375rem);

  --links-footer-space: clamp(1rem, 2vw, 2rem);
  --links-footer-size: clamp(0.625rem, 0.9vw, 0.75rem);
  --links-footer-tracking: clamp(0.04em, 0.5vw, 0.08em);

  --color-white-border: rgba(255, 255, 255, 0.28);
  --backdrop-blur-menu: blur(6px);
  --opacity-icon: 0.9;

  /* =========================================
    LEGAL
  ========================================= */

  --legal-content-width: 680px;
  --legal-title-size: clamp(var(--text-2xl), 3vw, var(--text-4xl));

  /* =========================================
    LEGAL
  ========================================= */

  --mobile-panel-width: 420px;
  --mobile-menu-icon-button-size: 28px;
  --mobile-menu-arrow-size: 16px;
  --mobile-menu-close-size: 18px;
  --mobile-menu-row-height: 56px;
  --mobile-menu-row-padding-y: 2px;
  --mobile-menu-media-icon-size: 22px;
  --mobile-menu-brand-logo-max: 76%;


  /* =========================================
    CART
  ========================================= */
  --cart-drawer-width: 420px;
  --cart-thumb-size: 64px;
  --cart-close-size: 28px;
  --cart-close-icon-size: 16px;


  /* =========================================
    MOBILE SEARCH
  ========================================= */
  --mobile-search-padding-y: 12px;
  --mobile-search-padding-bottom: 18px;
  --mobile-search-head-height: 34px;

}