/* ============================================================================
   BAHAR HALI — Design Tokens (tokens.css)
   Sivas · Halı & Ev Döşeme Showroom
   ----------------------------------------------------------------------------
   Konsept: "Gece Vitrini × Bahar Günü"
   - Gece Lacivert cephe + Işıldayan tabela mavisi (modern showroom)
   - Kök boya kırmızısı, safran, gül kurusu, adaçayı (Anadolu halı ruhu / bahar)
   Prefix: --bh-  (Bahar Halı)
   Namespace düzeni: primitive → semantic → component-ready aliases
   ============================================================================ */

:root {
  /* ==========================================================================
     1. RENK PRİMİTİFLERİ (raw palette)
     Poetik isim / açıklama comment'te; token keyleri İngilizce.
     ========================================================================== */

  /* — Gece Lacivert (facade / midnight navy) — */
  --bh-navy-50:  #eaeef6;
  --bh-navy-100: #cbd6e9;
  --bh-navy-200: #9fb1d2;
  --bh-navy-300: #6e86b0;
  --bh-navy-400: #42598b;
  --bh-navy-500: #26406f;
  --bh-navy-600: #172c50;
  --bh-navy-700: #0f1d38;  /* cephe / brand base */
  --bh-navy-800: #0a1428;
  --bh-navy-900: #060d1b;

  /* — Işık Mavi (luminous sign / azure) — */
  --bh-azure-50:  #eef4ff;
  --bh-azure-100: #d8e6ff;
  --bh-azure-200: #b4ceff;
  --bh-azure-300: #8db4ff;  /* glow */
  --bh-azure-400: #6a9af6;
  --bh-azure-500: #4f86e8;  /* primary */
  --bh-azure-600: #3a6bcb;
  --bh-azure-700: #2e549e;
  --bh-azure-800: #233f74;
  --bh-azure-900: #1a2e54;

  /* — Kök Kırmızı (madder / classic carpet red) — */
  --bh-madder-50:  #fbecea;
  --bh-madder-100: #f3ccc6;
  --bh-madder-200: #e4a59b;
  --bh-madder-300: #d67f71;
  --bh-madder-400: #c55a49;
  --bh-madder-500: #b23a2e;  /* base */
  --bh-madder-600: #932f24;
  --bh-madder-700: #74251d;
  --bh-madder-800: #561c16;
  --bh-madder-900: #391210;

  /* — Safran (saffron / brass warmth) — */
  --bh-saffron-50:  #fcf4e1;
  --bh-saffron-100: #f7e4b7;
  --bh-saffron-200: #f0cd80;
  --bh-saffron-300: #e7b551;
  --bh-saffron-400: #dca23c;
  --bh-saffron-500: #cb8e2c;  /* base */
  --bh-saffron-600: #a67122;
  --bh-saffron-700: #80561b;
  --bh-saffron-800: #5c3e14;
  --bh-saffron-900: #3b280d;

  /* — Gül Kurusu (rose / spring blossom) — */
  --bh-rose-50:  #fbedee;
  --bh-rose-100: #f5d6d9;
  --bh-rose-200: #eab0b6;
  --bh-rose-300: #dc8b93;  /* blossom base */
  --bh-rose-400: #cc6873;
  --bh-rose-500: #b94e5b;
  --bh-rose-600: #993e49;
  --bh-rose-700: #75303a;
  --bh-rose-800: #52222a;
  --bh-rose-900: #33161b;

  /* — Adaçayı (sage / botanical green) — */
  --bh-sage-50:  #f0f2e9;
  --bh-sage-100: #dee4cb;
  --bh-sage-200: #c3cda2;
  --bh-sage-300: #a6b47b;
  --bh-sage-400: #8b9b5f;
  --bh-sage-500: #6f7f4a;  /* base */
  --bh-sage-600: #57653a;
  --bh-sage-700: #414c2c;
  --bh-sage-800: #2c331e;
  --bh-sage-900: #1a1f13;

  /* — Ceviz (walnut / wood) — */
  --bh-walnut-50:  #f3ede6;
  --bh-walnut-100: #e1d2c1;
  --bh-walnut-200: #c6a98c;
  --bh-walnut-300: #a87f58;
  --bh-walnut-400: #8a6242;
  --bh-walnut-500: #6b4a2e;  /* base */
  --bh-walnut-600: #533a25;
  --bh-walnut-700: #3d2b1c;
  --bh-walnut-800: #281d13;
  --bh-walnut-900: #17110b;

  /* — Warm Neutral (kum / krem / taş) — */
  --bh-warm-50:  #fcfaf4;  /* paper */
  --bh-warm-100: #f6f0e3;  /* cream base (bukle / mermer) */
  --bh-warm-200: #ece1cd;
  --bh-warm-300: #dacbab;
  --bh-warm-400: #c1af89;
  --bh-warm-500: #9f8d68;
  --bh-warm-600: #7a6a4d;
  --bh-warm-700: #574b37;
  --bh-warm-800: #362e22;
  --bh-warm-900: #1e1912;

  /* — Mutlaklar — */
  --bh-white: #ffffff;
  --bh-black: #000000;
  --bh-ink:   #14203a;  /* sıcak-lacivert derin metin */

  /* ==========================================================================
     2. TİPOGRAFİ
     ========================================================================== */
  --bh-font-display: "Fraunces", "Playfair Display", "Georgia", serif;
  --bh-font-body:    "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --bh-font-accent:  "Fraunces", serif;              /* italic pull-quote */
  --bh-font-mono:    "IBM Plex Mono", "SFMono-Regular", ui-monospace, monospace;

  /* Type scale (1rem = 16px) */
  --bh-text-xs:   0.75rem;   /* 12 */
  --bh-text-sm:   0.875rem;  /* 14 */
  --bh-text-base: 1rem;      /* 16 */
  --bh-text-lg:   1.125rem;  /* 18 */
  --bh-text-xl:   1.25rem;   /* 20 */
  --bh-text-2xl:  1.5rem;    /* 24 */
  --bh-text-3xl:  1.875rem;  /* 30 */
  --bh-text-4xl:  2.5rem;    /* 40 */
  --bh-text-5xl:  3.25rem;   /* 52 */
  --bh-text-6xl:  4.25rem;   /* 68 */
  --bh-text-display: clamp(3.5rem, 6vw + 1rem, 5.75rem); /* hero wordmark */

  /* Weights */
  --bh-weight-light:    300;
  --bh-weight-regular:  400;
  --bh-weight-medium:   500;
  --bh-weight-semibold: 600;
  --bh-weight-bold:     700;
  --bh-weight-black:    900;

  /* Line height */
  --bh-leading-none:    1;
  --bh-leading-tight:   1.1;
  --bh-leading-snug:    1.25;
  --bh-leading-normal:  1.5;
  --bh-leading-relaxed: 1.7;

  /* Letter spacing */
  --bh-tracking-tight:  -0.02em;
  --bh-tracking-normal: 0em;
  --bh-tracking-wide:   0.04em;
  --bh-tracking-wider:  0.12em;   /* tabela / uppercase eyebrow */
  --bh-tracking-widest: 0.24em;   /* "BAHAR HALI" wordmark spacing */

  /* ==========================================================================
     3. SPACING (4px temel)
     ========================================================================== */
  --bh-space-0:   0;
  --bh-space-px:  1px;
  --bh-space-0-5: 0.125rem;  /* 2 */
  --bh-space-1:   0.25rem;   /* 4 */
  --bh-space-1-5: 0.375rem;  /* 6 */
  --bh-space-2:   0.5rem;    /* 8 */
  --bh-space-3:   0.75rem;   /* 12 */
  --bh-space-4:   1rem;      /* 16 */
  --bh-space-5:   1.25rem;   /* 20 */
  --bh-space-6:   1.5rem;    /* 24 */
  --bh-space-7:   1.75rem;   /* 28 */
  --bh-space-8:   2rem;      /* 32 */
  --bh-space-10:  2.5rem;    /* 40 */
  --bh-space-12:  3rem;      /* 48 */
  --bh-space-14:  3.5rem;    /* 56 */
  --bh-space-16:  4rem;      /* 64 */
  --bh-space-20:  5rem;      /* 80 */
  --bh-space-24:  6rem;      /* 96 */
  --bh-space-28:  7rem;      /* 112 */
  --bh-space-32:  8rem;      /* 128 */
  --bh-space-40:  10rem;     /* 160 */
  --bh-space-48:  12rem;     /* 192 */

  /* ==========================================================================
     4. RADII — "kemer / göbek / madalyon" formları
     ========================================================================== */
  --bh-radius-xs:     4px;
  --bh-radius-sm:     8px;
  --bh-radius-md:     14px;
  --bh-radius-lg:     20px;
  --bh-radius-xl:     28px;
  --bh-radius-2xl:    36px;
  --bh-radius-pill:   999px;
  --bh-radius-circle: 50%;
  --bh-radius-arch:   200px 200px 0 0;  /* kemerli showroom sırtı */

  /* ==========================================================================
     5. BORDER — "bordür / kilim çerçevesi"
     ========================================================================== */
  --bh-border-hair:  1px;
  --bh-border-thin:  1.5px;
  --bh-border-base:  2px;
  --bh-border-thick: 3px;
  --bh-border-frame: 6px;   /* halı bordürü / kalın çerçeve */

  /* ==========================================================================
     6. GÖLGE / ELEVATION (sıcak-lacivert tonlu)
     ========================================================================== */
  --bh-shadow-xs: 0 1px 2px rgba(20, 32, 58, 0.06);
  --bh-shadow-sm: 0 2px 6px rgba(20, 32, 58, 0.08);
  --bh-shadow-md: 0 8px 20px -6px rgba(20, 32, 58, 0.14);
  --bh-shadow-lg: 0 18px 40px -12px rgba(20, 32, 58, 0.20);
  --bh-shadow-xl: 0 32px 64px -20px rgba(20, 32, 58, 0.28);
  --bh-shadow-inset-frame: inset 0 0 0 1px rgba(20, 32, 58, 0.08);

  /* Işıltı gölgeleri (tabela / vitrin hissi) */
  --bh-glow-azure:   0 0 0 1px rgba(79, 134, 232, 0.35), 0 10px 34px -6px rgba(79, 134, 232, 0.50);
  --bh-glow-saffron: 0 0 30px -4px rgba(203, 142, 44, 0.50);
  --bh-glow-sign:    0 0 2px rgba(141, 180, 255, 0.9), 0 0 22px rgba(79, 134, 232, 0.65);

  /* ==========================================================================
     7. GRADIENTLER — imza yüzeyler
     ========================================================================== */
  /* Gece showroom zemini */
  --bh-grad-night: radial-gradient(120% 90% at 50% -10%, #26406f 0%, #0f1d38 46%, #0a1428 100%);
  /* Işıklı tabela mavisi */
  --bh-grad-sign: linear-gradient(180deg, #8db4ff 0%, #4f86e8 55%, #2e549e 100%);
  /* Bahar çiçeklenmesi (safran → gül kurusu → kök boya) */
  --bh-grad-bahar: linear-gradient(135deg, #f7e4b7 0%, #dc8b93 52%, #b23a2e 100%);
  /* Klasik kilim (kırmızı → altın) */
  --bh-grad-heritage: linear-gradient(135deg, #b23a2e 0%, #cb8e2c 100%);
  /* Merkez madalyon parıltısı */
  --bh-grad-medallion: radial-gradient(closest-side, rgba(203,142,44,0.35), rgba(203,142,44,0) 70%);
  /* Tezgah / warp iplikleri (ince dikey çizgiler) */
  --bh-grad-loom: repeating-linear-gradient(90deg, rgba(255,255,255,0.05) 0 1px, transparent 1px 14px);
  /* Işık süpürmesi (loom shimmer için) */
  --bh-grad-shimmer: linear-gradient(115deg, transparent 30%, rgba(141,180,255,0.35) 50%, transparent 70%);

  /* ==========================================================================
     8. MOTION — "dokuma / açılma / ışık"
     ========================================================================== */
  --bh-duration-instant: 80ms;
  --bh-duration-fast:    150ms;
  --bh-duration-base:    260ms;
  --bh-duration-slow:    480ms;
  --bh-duration-slower:  720ms;
  --bh-duration-weave:   900ms;   /* dokuma / weave-in stagger */
  --bh-duration-shimmer: 2600ms;  /* tabela ışık süpürmesi */

  --bh-ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
  --bh-ease-entrance: cubic-bezier(0.16, 1, 0.3, 1);   /* expo-out: weave-in */
  --bh-ease-exit:     cubic-bezier(0.4, 0, 1, 1);
  --bh-ease-bloom:    cubic-bezier(0.34, 1.56, 0.64, 1); /* hafif overshoot: açılma */
  --bh-ease-loom:     cubic-bezier(0.45, 0, 0.55, 1);    /* sürekli ışık akışı */

  /* ==========================================================================
     9. Z-INDEX
     ========================================================================== */
  --bh-z-base:     0;
  --bh-z-raised:   10;
  --bh-z-dropdown: 1000;
  --bh-z-sticky:   1100;
  --bh-z-overlay:  1200;
  --bh-z-modal:    1300;
  --bh-z-popover:  1400;
  --bh-z-toast:    1500;
  --bh-z-tooltip:  1600;

  /* ==========================================================================
     10. LAYOUT
     ========================================================================== */
  --bh-container-max:   1200px;
  --bh-container-wide:  1440px;
  --bh-prose-max:       68ch;
  --bh-breakpoint-sm:   480px;
  --bh-breakpoint-md:   768px;
  --bh-breakpoint-lg:   1024px;
  --bh-breakpoint-xl:   1280px;
  --bh-breakpoint-2xl:  1536px;

  /* Motif / pattern kontrol */
  --bh-pattern-opacity: 0.06;
  --bh-pattern-scale:   28px;

  /* ==========================================================================
     11. SEMANTİK TOKENLAR — Varsayılan tema: "BAHAR GÜNÜ" (light / cream)
     ========================================================================== */
  --bh-bg:              var(--bh-warm-50);
  --bh-bg-subtle:       var(--bh-warm-100);
  --bh-bg-inset:        var(--bh-warm-200);
  --bh-surface:         var(--bh-white);
  --bh-surface-raised:  var(--bh-white);
  --bh-surface-sunken:  var(--bh-warm-100);

  --bh-border:          var(--bh-warm-200);
  --bh-border-strong:   var(--bh-warm-300);
  --bh-border-frame-c:  var(--bh-walnut-300);   /* bordür rengi */

  --bh-text:            var(--bh-ink);
  --bh-text-muted:      var(--bh-warm-600);
  --bh-text-subtle:     var(--bh-warm-500);
  --bh-text-inverse:    var(--bh-warm-50);

  --bh-primary:         var(--bh-azure-500);
  --bh-primary-hover:   var(--bh-azure-600);
  --bh-primary-active:  var(--bh-azure-700);
  --bh-on-primary:      var(--bh-white);
  --bh-primary-soft:    var(--bh-azure-50);

  --bh-accent:          var(--bh-madder-500);   /* kök boya kırmızı */
  --bh-accent-hover:    var(--bh-madder-600);
  --bh-on-accent:       var(--bh-warm-50);
  --bh-accent-soft:     var(--bh-madder-50);

  --bh-gold:            var(--bh-saffron-500);   /* safran / brass */
  --bh-blossom:         var(--bh-rose-300);      /* bahar / gül kurusu */
  --bh-botanical:       var(--bh-sage-500);      /* adaçayı */
  --bh-wood:            var(--bh-walnut-500);    /* ceviz */

  --bh-highlight:       var(--bh-saffron-400);
  --bh-focus-ring:      var(--bh-azure-400);
  --bh-selection-bg:    var(--bh-azure-100);
  --bh-selection-text:  var(--bh-navy-800);

  /* Durum renkleri */
  --bh-success: var(--bh-sage-500);
  --bh-warning: var(--bh-saffron-500);
  --bh-danger:  var(--bh-madder-500);
  --bh-info:    var(--bh-azure-500);

  /* Yüzey gradient alias (tema-duyarlı) */
  --bh-surface-hero: var(--bh-grad-bahar);
  --bh-shadow-card:  var(--bh-shadow-md);
  --bh-glow-brand:   var(--bh-glow-saffron);

  color-scheme: light;
}

/* ============================================================================
   TEMA: "GECE VİTRİNİ" (dark / navy) — data-theme="night"
   Cephe lacivertinde ışıldayan showroom
   ============================================================================ */
:root[data-theme="night"],
.bh-theme-night {
  --bh-bg:              var(--bh-navy-800);
  --bh-bg-subtle:       var(--bh-navy-700);
  --bh-bg-inset:        var(--bh-navy-900);
  --bh-surface:         var(--bh-navy-700);
  --bh-surface-raised:  var(--bh-navy-600);
  --bh-surface-sunken:  var(--bh-navy-900);

  --bh-border:          rgba(159, 177, 210, 0.16);
  --bh-border-strong:   rgba(159, 177, 210, 0.28);
  --bh-border-frame-c:  var(--bh-saffron-600);

  --bh-text:            var(--bh-warm-100);
  --bh-text-muted:      var(--bh-navy-200);
  --bh-text-subtle:     var(--bh-navy-300);
  --bh-text-inverse:    var(--bh-ink);

  --bh-primary:         var(--bh-azure-400);   /* daha parlak, glow için */
  --bh-primary-hover:   var(--bh-azure-300);
  --bh-primary-active:  var(--bh-azure-200);
  --bh-on-primary:      var(--bh-navy-900);
  --bh-primary-soft:    rgba(79, 134, 232, 0.16);

  --bh-accent:          var(--bh-madder-400);
  --bh-accent-hover:    var(--bh-madder-300);
  --bh-on-accent:       var(--bh-navy-900);
  --bh-accent-soft:     rgba(178, 58, 46, 0.18);

  --bh-gold:            var(--bh-saffron-300);
  --bh-blossom:         var(--bh-rose-300);
  --bh-botanical:       var(--bh-sage-300);
  --bh-wood:            var(--bh-walnut-300);

  --bh-highlight:       var(--bh-saffron-300);
  --bh-focus-ring:      var(--bh-azure-300);
  --bh-selection-bg:    rgba(79, 134, 232, 0.35);
  --bh-selection-text:  var(--bh-warm-50);

  --bh-success: var(--bh-sage-300);
  --bh-warning: var(--bh-saffron-300);
  --bh-danger:  var(--bh-madder-300);
  --bh-info:    var(--bh-azure-300);

  --bh-surface-hero: var(--bh-grad-night);
  --bh-shadow-card:  0 18px 44px -12px rgba(0, 0, 0, 0.55);
  --bh-glow-brand:   var(--bh-glow-sign);

  color-scheme: dark;
}

/* Sistem tercihine göre otomatik gece modu (isteğe bağlı; data-theme her zaman kazanır) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="day"]):not([data-theme="night"]) {
    --bh-bg:             var(--bh-navy-800);
    --bh-bg-subtle:      var(--bh-navy-700);
    --bh-surface:        var(--bh-navy-700);
    --bh-surface-raised: var(--bh-navy-600);
    --bh-text:           var(--bh-warm-100);
    --bh-text-muted:     var(--bh-navy-200);
    --bh-primary:        var(--bh-azure-400);
    --bh-surface-hero:   var(--bh-grad-night);
    --bh-glow-brand:     var(--bh-glow-sign);
    color-scheme: dark;
  }
}

/* ============================================================================
   ERİŞİLEBİLİRLİK — hareketi azalt
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
  :root {
    --bh-duration-instant: 0ms;
    --bh-duration-fast:    0ms;
    --bh-duration-base:    0ms;
    --bh-duration-slow:    0ms;
    --bh-duration-slower:  0ms;
    --bh-duration-weave:   0ms;
    --bh-duration-shimmer: 0ms;
  }
}