/* ============================================================
   Морские Штучки — CSS Custom Properties
   ============================================================ */

:root {
  /* === Цветовая палитра === */
  --ms-ocean-deep:    #071629;
  --ms-ocean-dark:    #0d2137;
  --ms-ocean-mid:     #163456;
  --ms-ocean:         #1e5f8e;
  --ms-ocean-light:   #2e86c1;
  --ms-ocean-pale:    #d6eaf8;

  --ms-seafoam:       #17a589;
  --ms-seafoam-light: #1abc9c;

  --ms-sand:          #fdf6ec;
  --ms-sand-dark:     #f0d9b5;
  --ms-gold:          #c89b2a;
  --ms-coral:         #e74c3c;

  --ms-pearl:         #f8fafc;
  --ms-white:         #ffffff;

  /* === Текст === */
  --ms-text:          #1a2a3a;
  --ms-text-muted:    #5d7a8a;
  --ms-text-light:    #8da6b4;

  /* === Типографика === */
  --ms-font-heading:  'Playfair Display', Georgia, serif;
  --ms-font-body:     'Inter', system-ui, -apple-system, sans-serif;
  --ms-font-display:  'Cinzel', 'Times New Roman', serif;

  /* === Размеры === */
  --ms-navbar-height: 68px;

  /* === Тени === */
  --ms-shadow-xs:  0 1px 4px  rgba(7, 22, 41, 0.08);
  --ms-shadow-sm:  0 2px 10px rgba(7, 22, 41, 0.12);
  --ms-shadow-md:  0 6px 24px rgba(7, 22, 41, 0.16);
  --ms-shadow-lg:  0 12px 48px rgba(7, 22, 41, 0.22);

  /* === Переходы === */
  --ms-ease:       cubic-bezier(0.4, 0, 0.2, 1);
  --ms-duration:   0.28s;
  --ms-transition: var(--ms-duration) var(--ms-ease);

  /* === Радиусы === */
  --ms-r-xs:  4px;
  --ms-r-sm:  8px;
  --ms-r-md:  14px;
  --ms-r-lg:  20px;
  --ms-r-xl:  28px;

  /* === Волновой SVG для псевдоэлементов === */
  --ms-wave-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60' preserveAspectRatio='none'%3E%3Cpath d='M0,60 C200,18 400,58 600,28 C800,0 1000,40 1200,22 L1200,60 Z' fill='%23f8fafc'/%3E%3C/svg%3E");
  --ms-wave-dark:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60' preserveAspectRatio='none'%3E%3Cpath d='M0,60 C200,18 400,58 600,28 C800,0 1000,40 1200,22 L1200,60 Z' fill='%230d2137'/%3E%3C/svg%3E");
}