/* ============================================================
   CSS Custom Properties — BuyLink Design Tokens
   ============================================================ */

:root {
  /* === Color System: Teal Cyan === */
  --color-primary:        #00b3bc;
  --color-primary-dark:   #009099;
  --color-primary-darker: #006d75;
  --color-primary-light:  #E0F7F9;
  --color-primary-rgb:    0, 179, 188;

  --color-accent:         #F59E0B;
  --color-accent-dark:    #D97706;

  --color-dark:           #0A2540;
  --color-dark-gray:      #2D3748;
  --color-medium-gray:    #718096;
  --color-light-gray:     #A0AEC0;
  --color-bg-light:       #F7FAFC;
  --color-bg-alt:         #EDF2F7;
  --color-bg-card:        #FFFFFF;
  --color-border:         #E2E8F0;

  --color-white:          #FFFFFF;
  --color-success:        #38A169;
  --color-warning:        #DD6B20;
  --color-error:          #E53E3E;

  /* === Typography === */
  --font-family:          'PingFang SC', 'Microsoft YaHei', 'Helvetica Neue', Arial, 'Hiragino Sans GB', sans-serif;
  --font-mono:            'SF Mono', 'Menlo', 'Consolas', monospace;

  --fs-hero:              clamp(2.25rem, 5vw, 3.5rem);
  --fs-h1:                clamp(1.5rem, 3vw, 2.25rem);
  --fs-h2:                clamp(1.25rem, 2.5vw, 1.75rem);
  --fs-h3:                1.125rem;
  --fs-body:              1rem;
  --fs-sm:                0.875rem;
  --fs-xs:                0.75rem;

  --fw-normal:            400;
  --fw-medium:            500;
  --fw-semibold:          600;
  --fw-bold:              700;

  --lh-tight:             1.25;
  --lh-normal:            1.6;
  --lh-relaxed:           1.8;

  /* === Spacing === */
  --container-max:        1200px;
  --container-padding:    1.25rem;

  --space-xs:   0.25rem;
  --space-sm:   0.5rem;
  --space-md:   1rem;
  --space-lg:   1.5rem;
  --space-xl:   2rem;
  --space-2xl:  3rem;
  --space-3xl:  4rem;
  --space-4xl:  5rem;
  --space-5xl:  6rem;

  /* === Border Radius === */
  --radius-sm:    4px;
  --radius-md:    8px;
  --radius-lg:    12px;
  --radius-xl:    20px;
  --radius-full:  9999px;

  /* === Shadows === */
  --shadow-sm:    0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md:    0 4px 12px rgba(0, 0, 0, 0.10);
  --shadow-lg:    0 8px 30px rgba(0, 0, 0, 0.12);
  --shadow-xl:    0 12px 40px rgba(0, 0, 0, 0.16);
  --shadow-primary: 0 4px 20px rgba(var(--color-primary-rgb), 0.35);

  /* === Navigation === */
  --nav-height: 68px;

  /* === Transitions === */
  --transition-fast:   0.15s ease;
  --transition-normal: 0.3s ease;
  --transition-slow:   0.5s ease;

  /* === Z-Index Layers === */
  --z-nav:      1000;
  --z-overlay:  2000;
  --z-modal:    3000;
}