/* =============================================================
   Okyanus Petshop — Design Tokens
   Tek doğruluk kaynağı. Tüm renk/tipografi/boşluk/hareket buradan.
   Bkz: BRAND_IDENTITY.md, BRAND_THEME.md
   ============================================================= */

:root {
  /* ---------- RENK: Deniz kesiti (yüzeyden dibe) ---------- */
  --color-sky:        #8FD6F2;  /* gökyüzü / en açık mavi */
  --color-wave:       #1B9BD8;  /* BİRİNCİL marka mavisi, link/interaktif */
  --color-sea:        #0E5A8A;  /* derin okyanus, koyu bölümler */
  --color-deep:       #06263D;  /* dip / en koyu */

  /* Köpük & nötrler */
  --color-foam:       #EAF7FD;  /* sayfa arka planı */
  --color-surf:       #FFFFFF;  /* kart yüzeyi / köpük */
  --color-ink:        #0B2A3D;  /* ana metin (lacivert-mürekkep) */
  --color-ink-soft:   #3E5A6E;  /* ikincil metin */
  --color-line:       #CFE6F2;  /* ince çizgi / kenarlık */

  /* Sıcak aksanlar (soğuğu dengeler) */
  --color-sand:       #F5E3BE;  /* kum tonu, ılık blok */
  --color-coral:      #FF7A5C;  /* VURGU / eylem — yalnız buton & önemli CTA */
  --color-coral-deep: #E85C3E;  /* coral hover/pressed */
  --color-seafoam:    #2FBFB0;  /* ikincil aksan / başarı */

  /* Kanal renkleri (marka dışı — yalnız tanınırlık için) */
  --color-whatsapp:      #25D366;  /* WhatsApp yeşili */
  --color-whatsapp-deep: #1DA851;  /* WhatsApp hover */

  /* Anlamsal eşlemeler (semantic) */
  --bg:               var(--color-foam);
  --surface:          var(--color-surf);
  --surface-warm:     var(--color-sand);
  --surface-deep:     var(--color-sea);
  --text:             var(--color-ink);
  --text-muted:       var(--color-ink-soft);
  --text-on-dark:     var(--color-surf);
  --border:           var(--color-line);
  --brand:            var(--color-wave);
  --brand-strong:     var(--color-sea);
  --link:             var(--color-wave);
  --action:           var(--color-coral);
  --action-hover:     var(--color-coral-deep);
  --accent:           var(--color-seafoam);

  /* ---------- TİPOGRAFİ ---------- */
  --font-display: "Fredoka", "Baloo 2", system-ui, sans-serif; /* başlık */
  --font-body:    "Nunito", system-ui, -apple-system, sans-serif; /* gövde */

  --weight-regular: 400;
  --weight-medium:  600;
  --weight-bold:    700;

  /* Akıcı ölçek (1.20 oranı, clamp ile responsive) */
  --text-xs:   0.75rem;                              /* 12px */
  --text-sm:   0.875rem;                             /* 14px */
  --text-base: 1rem;                                 /* 16px */
  --text-md:   clamp(1.125rem, 1.05rem + 0.4vw, 1.25rem);
  --text-lg:   clamp(1.35rem, 1.2rem + 0.7vw, 1.6rem);
  --text-xl:   clamp(1.7rem, 1.4rem + 1.4vw, 2.25rem);
  --text-2xl:  clamp(2.2rem, 1.7rem + 2.4vw, 3.25rem);
  --text-3xl:  clamp(2.8rem, 2rem + 3.6vw, 4.5rem);

  --leading-tight:  1.15;
  --leading-snug:   1.35;
  --leading-normal: 1.6;
  --tracking-tight: -0.01em;
  --tracking-wide:  0.04em;

  /* ---------- BOŞLUK (4px tabanlı) ---------- */
  --space-1:  0.25rem;   /* 4  */
  --space-2:  0.5rem;    /* 8  */
  --space-3:  0.75rem;   /* 12 */
  --space-4:  1rem;      /* 16 */
  --space-5:  1.5rem;    /* 24 */
  --space-6:  2rem;      /* 32 */
  --space-8:  3rem;      /* 48 */
  --space-10: 4rem;      /* 64 */
  --space-12: 6rem;      /* 96 */
  --space-16: 8rem;      /* 128 — bölümler arası ferah nefes */

  --container-max: 1160px;
  --container-pad: clamp(1rem, 0.5rem + 3vw, 3rem);

  /* ---------- ŞEKİL: köşe & gölge (yumuşak, mavi tonlu) ---------- */
  --radius-sm:   8px;
  --radius-md:   14px;
  --radius-lg:   20px;
  --radius-xl:   28px;
  --radius-full: 999px;

  /* Gölgeler = su altı ışık dağılımı (mavi, siyah değil) */
  --shadow-sm:    0 2px 6px rgba(6, 38, 61, 0.06);
  --shadow-md:    0 8px 22px rgba(14, 90, 138, 0.12);
  --shadow-lg:    0 18px 44px rgba(14, 90, 138, 0.16);
  --shadow-coral: 0 10px 26px rgba(255, 122, 92, 0.28); /* coral buton parıltısı */
  --ring:         0 0 0 3px rgba(27, 155, 216, 0.35);   /* focus halkası */

  /* ---------- HAREKET (imza salınım) ---------- */
  --dur-fast:   180ms;
  --dur-base:   300ms;
  --dur-slow:   600ms;

  --ease-out:      cubic-bezier(0.22, 1, 0.36, 1);
  --ease-buoyant:  cubic-bezier(0.37, 0, 0.24, 1.4);  /* suda yaylanan salınım */
  --ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);

  --bob-amplitude: 6px;      /* su üstü salınım yüksekliği */
  --bob-duration:  4s;
  --wave-speed:    14s;      /* dalga hattı kayış hızı */
  --bubble-rise:   6s;       /* baloncuk yükseliş süresi */

  /* ---------- KATMAN (z-index) ---------- */
  --z-base:    1;
  --z-waves:   5;   /* dekoratif dalga/baloncuk (içeriğin altında) */
  --z-header: 100;
  --z-overlay:200;
}

/* Erişilebilirlik: hareketi azalt → tüm imza animasyonlar kapanır */
@media (prefers-reduced-motion: reduce) {
  :root {
    --bob-amplitude: 0px;
    --bob-duration:  0s;
    --wave-speed:    0s;
    --bubble-rise:   0s;
  }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}