/**
 * Design Tokens for cvety.kz
 * Single source of truth for colors, spacing, typography, and breakpoints.
 * Extends existing --ui-* tokens from ui-unify-wave1.css.
 */

:root {
  /* === Colors === */

  /* Brand */
  --color-primary: #ff6666;
  --color-primary-dark: #CE3A3A;
  --color-primary-light: #f8dfdf;
  --color-primary-bg: #fff5f5;
  --color-primary-50: rgba(255, 102, 102, 0.50);
  --color-primary-28: rgba(255, 102, 102, 0.28);

  /* Neutral */
  --color-black: #000;
  --color-white: #fff;
  --color-gray-900: #3b3b3b;
  --color-gray-600: #8f8f8f;
  --color-gray-400: #bcbcbc;
  --color-gray-300: #d9d9d9;
  --color-gray-200: #dfdfdf;
  --color-gray-150: #ececec;
  --color-gray-100: #f5f5f5;
  --color-gray-50: #fcfcfc;

  /* Semantic */
  --color-success: #01bc6f;
  --color-error: #fe0000;
  --color-info: #6183e4;
  --color-highlight: #E4EF7D;

  /* Overlay */
  --color-overlay: rgba(0, 0, 0, 0.50);
  --color-shadow-sm: rgba(0, 0, 0, 0.04);
  --color-shadow-md: rgba(0, 0, 0, 0.12);
  --color-shadow-lg: rgba(0, 0, 0, 0.15);

  /* === Typography === */
  --font-family: "Open Sans", sans-serif;
  --font-size-xs: 11px;
  --font-size-sm: 12px;
  --font-size-base: 14px;
  --font-size-md: 16px;
  --font-size-lg: 20px;
  --font-size-xl: 24px;
  --font-size-2xl: 30px;

  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --line-height-tight: 1.15;
  --line-height-normal: 1.3;
  --line-height-relaxed: 1.4;

  /* === Spacing === */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;

  /* === Layout === */
  --container-max: 1360px;
  --container-padding: 16px;

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

  /* === Transitions === */
  --transition-fast: 150ms ease;
  --transition-normal: 250ms ease;
  --transition-slow: 350ms ease;

  /* === Z-Index === */
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-modal: 300;
  --z-toast: 400;
  --z-preloader: 500;
}

/* === Breakpoint Reference (for documentation, used via @media) ===
 * Mobile:     max-width: 552px
 * Tablet:     max-width: 992px
 * Desktop-sm: max-width: 1160px
 * Desktop:    max-width: 1360px
 * Wide:       min-width: 1360px
 */