/* ==========================================================================
   GETATBUL — tokens.css
   Tasarım belirteçleri. Bu dosya hiçbir kural üretmez; yalnızca özel
   değişken tanımlar. Sıra: ham palet → anlamsal roller → tipografi →
   boşluk → köşe → gölge → hareket → katman (z-index) → harita.

   Renk mantığı:
     · Coral  = eylem rengi (butonlar, bağlantılar, seçili çip).
     · Petrol = kamu ve üniversite yerleri.
     · Özel   = coral (eylem rengiyle aynı aile, ama farklı bağlamda).
     · Bal    = eczaneler; üçüncü aksan, coral eylemden açıkça ayrı.
     · Zemin  = sıcak, açık, düşük doygunluklu kırık beyaz.
   ========================================================================== */

:root {
  /* --- Ham palet ------------------------------------------------------- */

  /* Coral: logodaki pin rengi (#FF6B56). Tüm marka basamakları bu tondan
     türetilir. Beyaz metin logonun kendi korali üzerinde AA'yı geçmediği için
     (2.8) buton yazısı logonun mürekkep rengidir (6.6); açık zemin üzerinde
     coral *metin* gerektiğinde 700 basamağı kullanılır (4.7+). */
  --brand-50: #fff5f1;
  --brand-100: #ffe6dd;
  --brand-200: #ffcdbd;
  --brand-300: #ffab93;
  --brand-400: #ff8b6f;
  --brand-500: #ff6b56;
  --brand-600: #f0533c;
  /* Metin basamakları kehribar-kahve: kan kırmızısı kullanılmaz, ama beyaz
     üzerinde AA'yı geçer (5.0 / 7.1). */
  --brand-700: #b45309;
  --brand-800: #92400e;
  --brand-900: #78350f;

  /* Petrol: kamu ve üniversite (şablondaki şema). Marka turuncusu eylem rengi
     olarak kalır; kan kırmızısı hiçbir yerde kullanılmaz. */
  /* Referans görselden ölçüldü: kamu yeşili #209897. Rozet gibi beyaz metin
     taşıyan yüzeylerde bir basamak koyusu (4.57) kullanılır. */
  --petrol-50: #effaf9;
  --petrol-100: #d7f0ef;
  --petrol-300: #7ecbc8;
  --petrol-400: #45b0ad;
  --petrol-500: #209897;
  --petrol-600: #1b837f;
  --petrol-700: #177571;
  --petrol-800: #146662;

  /* Bal: eczaneler. Coral eylemden belirgin biçimde ayrı, sıcak bir aksan. */
  --honey-50: #fef6e9;
  --honey-100: #fce9c8;
  --honey-400: #e9a83c;
  --honey-600: #b4761b;
  --honey-700: #8f5c13;
  --honey-800: #6f470e;

  /* Sıcak nötr ölçek. Zemin şablondan (#FDFBF6), en koyu ton logodaki
     GETATBUL yazısının rengidir (#141414). */
  --sand-50: #fefcf9;
  --sand-100: #fdfbf6;
  --sand-200: #f5f0e9;
  --sand-300: #eae3da;
  --sand-400: #d8cfc4;
  --sand-500: #b5aa9e;
  --sand-600: #7c7268;
  --sand-700: #645c54;
  --sand-800: #403a34;
  --sand-900: #141414;

  /* Durum renkleri. */
  --red-50: #fdf1ee;
  --red-100: #fadcd4;
  --red-400: #d9584a;
  --red-600: #b8412f;
  --red-800: #8a2c1d;

  --green-50: #eef7f2;
  --green-100: #d6ecdf;
  --green-400: #3f9a72;
  --green-600: #2b7253;
  --green-800: #1c4c37;

  --amber-50: #fdf6e3;
  --amber-100: #f8e9bd;
  --amber-400: #c08c1f;
  --amber-600: #8a6118;
  --amber-800: #5e410d;

  /* --- Anlamsal roller: zemin ve metin -------------------------------- */

  --color-canvas: var(--sand-100);
  --color-surface: #ffffff;
  --color-surface-2: var(--sand-50);
  --color-surface-3: var(--sand-100);
  --color-surface-sunken: var(--sand-200);

  --color-text: var(--sand-900);
  --color-text-strong: var(--sand-900);
  --color-text-muted: var(--sand-700);
  --color-text-subtle: var(--sand-600);
  --color-text-inverse: #ffffff;

  --color-border: var(--sand-300);
  --color-border-strong: var(--sand-400);
  --color-border-faint: var(--sand-200);
  --color-rule: var(--sand-200);

  /* --- Anlamsal roller: eylem ----------------------------------------- */

  /* Eylem rengi şablondaki logo turuncusu. Koyu kırmızıya çekilmez. */
  /* Buton zemini marka coralı kalır; beyaz metin bu tonda AA'yı geçmediği için
     (2.55) buton yazısı koyu mürekkeple yazılır (6.2). Açık zemin üzerinde coral
     *metin* gerektiğinde --color-action-strong kullanılır. */
  --color-action: var(--brand-500);
  --color-action-hover: var(--brand-600);
  --color-action-active: var(--brand-600);
  --color-action-strong: var(--brand-700);
  /* Açık coral zemin üzerindeki metinler. */
  --color-on-tint: var(--brand-800);
  --color-action-text: var(--sand-900);
  --color-action-soft: var(--brand-50);
  --color-action-soft-border: var(--brand-200);
  --color-link: var(--brand-700);
  --color-link-hover: var(--brand-800);

  /* --- Anlamsal roller: sağlayıcı ------------------------------------- */

  /* Kamu/üniversite de marka ailesindedir: logodaki coralın koyu basamağı.
     Özel sağlayıcı açık coral, eczane bal kalır; böylece üç rol tek renk
     ailesinden okunur ve arayüz logoyla aynı dili konuşur. */
  --color-public: var(--petrol-500);
  --color-public-strong: var(--petrol-700);
  /* Etkin çip gibi **küçük beyaz metin** taşıyan yüzeyler: petrol-500 beyazla 3,5:1
     kalıyordu (WCAG AA 4,5 ister). Marka tonu değişmiyor, bir koyu ton kullanılıyor. */
  --color-public-stronger: var(--petrol-800);
  --color-public-soft: var(--petrol-50);
  --color-public-soft-border: var(--petrol-100);
  --color-public-mid: var(--petrol-400);

  --color-private: var(--brand-500);
  --color-private-strong: var(--brand-700);
  --color-private-soft: var(--brand-50);
  --color-private-soft-border: var(--brand-100);

  --color-pharmacy: var(--honey-600);
  --color-pharmacy-strong: var(--honey-800);
  --color-pharmacy-soft: var(--honey-50);
  --color-pharmacy-soft-border: var(--honey-100);
  --color-pharmacy-bright: var(--honey-400);

  /* --- Anlamsal roller: durum ----------------------------------------- */

  --color-info: var(--petrol-600);
  --color-info-soft: var(--petrol-50);
  --color-info-border: var(--petrol-100);

  --color-success: var(--green-600);
  --color-success-soft: var(--green-50);
  --color-success-border: var(--green-100);

  --color-warning: var(--amber-600);
  --color-warning-soft: var(--amber-50);
  --color-warning-border: var(--amber-100);

  --color-danger: var(--red-600);
  --color-danger-hover: var(--red-800);
  --color-danger-soft: var(--red-50);
  --color-danger-border: var(--red-100);

  /* --- Odak halkası ---------------------------------------------------- */

  --focus-ring-color: var(--brand-600);
  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;
  --focus-ring: var(--focus-ring-width) solid var(--focus-ring-color);
  --focus-shadow: 0 0 0 3px rgba(132, 46, 25, 0.16);

  /* --- Tipografi ------------------------------------------------------- */

  /* Sistem yığını: LAN'da web font indirmesi yok, ilk boyama gecikmesiz. */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace;

  --text-2xs: 0.6875rem; /* 11px — yalnızca etiket ve rozet */
  --text-xs: 0.75rem;    /* 12px */
  --text-sm: 0.8125rem;  /* 13px */
  --text-md: 0.875rem;   /* 14px */
  --text-base: 0.9375rem; /* 15px */
  --text-lg: 1.0625rem;  /* 17px */
  --text-xl: clamp(1.125rem, 0.3vw + 1.05rem, 1.25rem);
  --text-2xl: clamp(1.3rem, 0.6vw + 1.15rem, 1.5rem);
  --text-3xl: clamp(1.5rem, 1.4vw + 1.2rem, 1.95rem);
  --text-4xl: clamp(1.75rem, 2.4vw + 1.3rem, 2.5rem);

  --leading-tight: 1.2;
  --leading-snug: 1.35;
  --leading-normal: 1.55;
  --leading-relaxed: 1.7;

  --tracking-tight: -0.015em;
  --tracking-normal: 0;
  --tracking-wide: 0.02em;
  --tracking-caps: 0.08em;

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

  /* --- Boşluk ölçeği (4px tabanı) -------------------------------------- */

  --space-0: 0;
  --space-1: 0.25rem;  /*  4px */
  --space-2: 0.5rem;   /*  8px */
  --space-3: 0.75rem;  /* 12px */
  --space-4: 1rem;     /* 16px */
  --space-5: 1.25rem;  /* 20px */
  --space-6: 1.5rem;   /* 24px */
  --space-8: 2rem;     /* 32px */
  --space-10: 2.5rem;  /* 40px */
  --space-12: 3rem;    /* 48px */
  --space-16: 4rem;    /* 64px */
  --space-20: 5rem;    /* 80px */
  --space-24: 6rem;    /* 96px */

  /* Akışkan boşluklar. */
  --gutter: clamp(1rem, 3vw, 2rem);
  --section-gap: clamp(1.75rem, 4vw, 3rem);
  --stack-gap: clamp(1rem, 2vw, 1.5rem);

  /* --- Köşe yarıçapları ------------------------------------------------ */

  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-2xl: 28px;
  --radius-pill: 999px;
  --radius-circle: 50%;

  /* --- Gölgeler: yumuşak, düşük kontrastlı, sıcak --------------------------------- */

  --shadow-xs: 0 1px 2px rgba(47, 42, 37, 0.06);
  --shadow-sm: 0 1px 2px rgba(47, 42, 37, 0.06), 0 2px 6px rgba(47, 42, 37, 0.05);
  --shadow-md: 0 2px 4px rgba(47, 42, 37, 0.05), 0 8px 20px rgba(47, 42, 37, 0.07);
  --shadow-lg: 0 4px 8px rgba(47, 42, 37, 0.06), 0 18px 40px rgba(47, 42, 37, 0.1);
  --shadow-inset: inset 0 1px 2px rgba(47, 42, 37, 0.05);

  --ring-action: 0 0 0 3px rgba(200, 73, 44, 0.28);
  --ring-public: 0 0 0 3px rgba(15, 92, 99, 0.26);
  --ring-pharmacy: 0 0 0 3px rgba(154, 103, 22, 0.26);

  /* --- Kenarlıklar ----------------------------------------------------- */

  --border-width: 1px;
  --border-width-strong: 2px;
  --border-accent-width: 3px;

  /* --- Hareket --------------------------------------------------------- */

  --duration-instant: 90ms;
  --duration-fast: 140ms;
  --duration-base: 200ms;
  --duration-slow: 320ms;
  --ease-standard: cubic-bezier(0.2, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 0.84, 0.44, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  /* --- Yerleşim -------------------------------------------------------- */

  --layout-max: 1320px;
  --layout-narrow: 34rem;
  --layout-auth: 26rem;
  --layout-admin-sidebar: 15.5rem;
  --layout-aside: 25rem;

  --header-height: 4.25rem;
  --control-height: 2.75rem;      /* 44px — dokunma hedefi alt sınırı */
  --control-height-sm: 2.25rem;
  --touch-target: 2.75rem;        /* 44px */
  --chip-height: 2.25rem;
  --chip-height-touch: 2.75rem;
  --map-height-sm: 340px;
  --map-height-lg: 540px;

  /* --- Katmanlar (z-index) --------------------------------------------- */

  --z-base: 0;
  --z-sticky: 30;
  --z-dropdown: 50;
  --z-map: 60;
  /* Başlık haritanın ÜSTÜNDE olmalı: başlıktaki "Yer" açılır paneli harita
     alanına taşıyor. Leaflet kendi panellerinde 200-800 z-index kullanır, bu
     yüzden başlık onların da üstünde durur (harita ayrıca izole edilir). */
  --z-header: 900;
  --z-map-controls: 70;
  --z-overlay: 80;
  --z-modal: 90;
  --z-toast: 100;
  --z-skip-link: 200;

  /* --- Leaflet köprüsü ------------------------------------------------ */

  --map-canvas-bg: #e7e0d7;
  --map-control-bg: rgba(255, 255, 255, 0.94);
  --map-control-radius: var(--radius-sm);
}

/* ==========================================================================
   Karanlık mod: <html data-theme="dark"> ile açılır.
   Tema, ilk boyamadan önce layout'taki küçük script tarafından belirlenir:
   kayıtlı tercih varsa o, yoksa sistem tercihi (`prefers-color-scheme`).
   Kullanıcı başlıktaki anahtarla istediği zaman değiştirir. Renkler aynı anlamı
   korur, kontrast AA düzeyinde kalır.
   ========================================================================== */

html[data-theme="dark"] {
  --color-canvas: #17140f;
  --color-surface: #201c17;
  --color-surface-2: #262119;
  --color-surface-3: #2b251d;
  --color-surface-sunken: #14110d;

  --color-text: #f2ece3;
  --color-text-strong: #ffffff;
  --color-text-muted: #c2b8aa;
  --color-text-subtle: #a1968a;
  --color-text-inverse: #1c1814;

  --color-border: #3b3329;
  --color-border-strong: #4d4437;
  --color-border-faint: #2f2921;
  --color-rule: #2f2921;

  --color-action: var(--brand-400);
  --color-action-hover: #ef7d5e;
  --color-action-active: var(--brand-200);
  --color-action-text: #24100a;
  --color-action-soft: rgba(226, 105, 74, 0.16);
  --color-action-soft-border: rgba(226, 105, 74, 0.34);
  /* Koyu zeminde coral metin açık tona döner (AA). */
  --color-action-strong: var(--brand-300);
  --color-on-tint: var(--brand-200);
  --color-link: var(--brand-400);
  --color-link-hover: var(--brand-200);

  --color-public: #7cc4be;
  --color-public-strong: #a4dcd6;
  --color-public-soft: rgba(90, 169, 163, 0.16);
  --color-public-soft-border: rgba(90, 169, 163, 0.34);
  --color-public-mid: var(--petrol-400);

  --color-private: var(--brand-400);
  --color-private-strong: var(--brand-200);
  --color-private-soft: rgba(226, 105, 74, 0.14);
  --color-private-soft-border: rgba(226, 105, 74, 0.3);

  --color-pharmacy: #e0a945;
  --color-pharmacy-strong: #f0cd86;
  --color-pharmacy-soft: rgba(214, 149, 41, 0.16);
  --color-pharmacy-soft-border: rgba(214, 149, 41, 0.32);
  --color-pharmacy-bright: var(--honey-400);

  --color-info: #7cc4be;
  --color-info-soft: rgba(90, 169, 163, 0.14);
  --color-info-border: rgba(90, 169, 163, 0.3);

  --color-success: #7fc3a4;
  --color-success-soft: rgba(63, 143, 108, 0.16);
  --color-success-border: rgba(63, 143, 108, 0.32);

  --color-warning: #e0b45f;
  --color-warning-soft: rgba(176, 129, 39, 0.16);
  --color-warning-border: rgba(176, 129, 39, 0.32);

  --color-danger: #ef8f76;
  --color-danger-hover: #f6b3a0;
  --color-danger-soft: rgba(194, 85, 60, 0.18);
  --color-danger-border: rgba(194, 85, 60, 0.36);

  --focus-ring-color: var(--brand-400);
  --focus-shadow: 0 0 0 3px rgba(226, 105, 74, 0.24);

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 2px 6px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.35), 0 8px 20px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.4), 0 18px 40px rgba(0, 0, 0, 0.5);
  --shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.35);

  --ring-action: 0 0 0 3px rgba(226, 105, 74, 0.34);
  --ring-public: 0 0 0 3px rgba(124, 196, 190, 0.3);
  --ring-pharmacy: 0 0 0 3px rgba(224, 169, 69, 0.3);

  --map-canvas-bg: #2a251e;
  --map-control-bg: rgba(32, 28, 23, 0.94);
}