/* ==========================================================================
   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);
  /* **V4** (Cycle 323d): Kein reines Weiß auf GETAT-Primärbuttons; die
     Grundfarbe der Seite (#fdfbf6) ist auch die Inverse-Farbe im hellen Thema.
     Im dunklen Thema bleibt `--color-text-inverse` der dunkle Inkton. */
  --color-text-inverse: var(--sand-100);

  --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ı ------------------------------------- */

  /* **Orte tragen ihre Art** (Cycle 346, Nutzerregel 19.10.2026): GETAT-Merkez immer
     Petrol, Eczane Coral — der Sağlayıcı (kamu/özel) ändert den Kartenstreifen nicht.
     Der Honigton (`--color-pharmacy*`) bleibt für Badges und Punkte außerhalb der Karte. */
  --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);

  /* Eczane-Akzent (Kartenstreifen, Nadel, Legende): Logo-Coral, wie die Nadel. */
  --color-pharmacy-accent: var(--brand-500);
  --color-pharmacy-accent-soft: var(--brand-50);
  --color-pharmacy-accent-soft-border: var(--brand-100);

  /* --- 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;

  /* Höhe der sticky Kopfzeile. Der Wert wird auf jeder Seite von
     `layout/application.html.erb` an der tatsächlich gerenderten Kopfzeile
     gemessen (px) und bei Resize/Fontwechsel nachgeführt. Die Media Queries
     direkt nach diesem Block sind der Fallback ohne JavaScript und tragen
     jeweils die größte gemessene Höhe des Bereichs (360–1440 px), damit der
     Sprung zum Inhalt auch dann nicht unter der Kopfzeile landet. */
  --header-height: 145px;
  --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: 1100;

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

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

/* Fallback für die Kopfzeilenhöhe ohne JavaScript. Die Bereiche und Werte
   stammen aus einer Messung aller öffentlichen Seiten in fünf Sprachen
   (360–1440 px, Schritt 20 px); der gemessene Wert wird zur Laufzeit ersetzt. */
@media (min-width: 440px) { :root { --header-height: 149px; } }
@media (min-width: 620px) { :root { --header-height: 157px; } }
@media (min-width: 720px) { :root { --header-height: 129px; } }
@media (min-width: 1040px) { :root { --header-height: 69px; } }
@media (min-width: 1100px) { :root { --header-height: 129px; } }
@media (min-width: 1140px) { :root { --header-height: 69px; } }

/* ==========================================================================
   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-pharmacy-accent: var(--brand-400);
  --color-pharmacy-accent-soft: rgba(226, 105, 74, 0.14);
  --color-pharmacy-accent-soft-border: rgba(226, 105, 74, 0.3);

  --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);
}