/* =========================================================================
   Tasarım belirteçleri (design tokens)
   Tüm renk/ölçü kararları burada tanımlanır; başka dosyada çıplak değer
   kullanılmaz. Açık tema kök seviyede, koyu tema iki koşulda yeniden
   tanımlanır (sistem tercihi + elle seçim).
   ========================================================================= */

:root {
    /* --- Marka: derin teal. Sağlık/güven çağrışımı, kırmızı tonlu ilaç
       sitelerinden ve ağdaki diğer sitelerden ayrışır. --- */
    --brand-50:  #eefbf9;
    --brand-100: #d3f4ef;
    --brand-200: #abe9e2;
    --brand-300: #74d8ce;
    --brand-400: #3cbdb4;
    --brand-500: #1fa199;
    --brand-600: #14807c;
    --brand-700: #136764;
    --brand-800: #145252;
    --brand-900: #144544;

    --accent-400: #f2994a;
    --accent-500: #e2811f;

    /* --- Nötrler: hafif sıcak gri, saf gri yerine --- */
    --n-0:   #ffffff;
    --n-25:  #fbfcfc;
    --n-50:  #f6f8f8;
    --n-100: #eef1f1;
    --n-200: #e0e5e5;
    --n-300: #c7cfcf;
    --n-400: #9aa5a5;
    --n-500: #6e7979;
    --n-600: #525c5c;
    --n-700: #3d4646;
    --n-800: #2a3131;
    --n-900: #1a1f1f;
    --n-950: #0f1313;

    /* --- Anlamsal yüzeyler --- */
    --bg:            var(--n-50);
    --bg-elevated:   var(--n-0);
    --bg-sunken:     var(--n-100);
    --bg-header:     rgba(255, 255, 255, 0.85);
    --surface-hover: var(--n-50);

    --text:          var(--n-900);
    --text-muted:    var(--n-600);
    --text-subtle:   var(--n-500);
    --text-onbrand:  #ffffff;

    --border:        var(--n-200);
    --border-strong: var(--n-300);

    --link:       var(--brand-700);
    --link-hover: var(--brand-800);

    /* --- Reçete renkleri: Türkiye'deki resmî reçete türlerinin gerçek
       renkleriyle eşleşir. Zeminler okunabilirlik için açıltılmıştır. --- */
    --rx-beyaz-bg:     var(--n-100);
    --rx-beyaz-fg:     var(--n-700);
    --rx-beyaz-edge:   var(--n-300);
    --rx-kirmizi-bg:   #fdeceb;
    --rx-kirmizi-fg:   #a32218;
    --rx-kirmizi-edge: #f3bdb8;
    --rx-yesil-bg:     #e8f6ec;
    --rx-yesil-fg:     #1d6b34;
    --rx-yesil-edge:   #b3ddbf;
    --rx-mor-bg:       #f2ecfa;
    --rx-mor-fg:       #5b3596;
    --rx-mor-edge:     #d3c0ee;
    --rx-turuncu-bg:   #fdf0e2;
    --rx-turuncu-fg:   #98530c;
    --rx-turuncu-edge: #f2cea4;

    /* --- Tipografi --- */
    --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
                 "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
                 "Liberation Mono", monospace;

    --text-xs:   0.75rem;
    --text-sm:   0.8125rem;
    --text-base: 0.9375rem;
    --text-md:   1rem;
    --text-lg:   1.125rem;
    --text-xl:   1.375rem;
    --text-2xl:  1.75rem;
    --text-3xl:  2.25rem;

    --leading-tight:  1.25;
    --leading-snug:   1.4;
    --leading-normal: 1.65;

    /* --- Aralık: 4px tabanlı --- */
    --sp-1: 0.25rem;
    --sp-2: 0.5rem;
    --sp-3: 0.75rem;
    --sp-4: 1rem;
    --sp-5: 1.25rem;
    --sp-6: 1.5rem;
    --sp-8: 2rem;
    --sp-10: 2.5rem;
    --sp-12: 3rem;
    --sp-16: 4rem;

    /* --- Biçim --- */
    --radius-sm: 6px;
    --radius:    10px;
    --radius-lg: 14px;
    --radius-xl: 20px;
    --radius-pill: 999px;

    --shadow-xs: 0 1px 2px rgba(16, 30, 30, 0.05);
    --shadow-sm: 0 1px 3px rgba(16, 30, 30, 0.07), 0 1px 2px rgba(16, 30, 30, 0.04);
    --shadow:    0 4px 12px rgba(16, 30, 30, 0.07), 0 1px 3px rgba(16, 30, 30, 0.05);
    --shadow-lg: 0 12px 32px rgba(16, 30, 30, 0.11), 0 2px 8px rgba(16, 30, 30, 0.06);

    --ring: 0 0 0 3px color-mix(in srgb, var(--brand-500) 30%, transparent);

    --container: 1160px;
    --container-narrow: 780px;

    --header-h: 68px;

    --transition: 160ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Koyu tema — sistem tercihi (elle "light" seçilmediyse) */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg:            var(--n-950);
        --bg-elevated:   var(--n-900);
        --bg-sunken:     #0a0d0d;
        --bg-header:     rgba(15, 19, 19, 0.85);
        --surface-hover: var(--n-800);

        --text:          var(--n-50);
        --text-muted:    var(--n-400);
        --text-subtle:   var(--n-500);

        --border:        #262d2d;
        --border-strong: #333c3c;

        --link:       var(--brand-300);
        --link-hover: var(--brand-200);

        --rx-beyaz-bg:     #232929;
        --rx-beyaz-fg:     var(--n-300);
        --rx-beyaz-edge:   #333c3c;
        --rx-kirmizi-bg:   #3a1a17;
        --rx-kirmizi-fg:   #f5a49b;
        --rx-kirmizi-edge: #5c2a24;
        --rx-yesil-bg:     #142a1c;
        --rx-yesil-fg:     #8fd6a4;
        --rx-yesil-edge:   #234835;
        --rx-mor-bg:       #241a38;
        --rx-mor-fg:       #c4a9ef;
        --rx-mor-edge:     #3d2c5c;
        --rx-turuncu-bg:   #33220f;
        --rx-turuncu-fg:   #efb87a;
        --rx-turuncu-edge: #543a1c;

        --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
        --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.3);
        --shadow:    0 4px 12px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.35);
        --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.6), 0 2px 8px rgba(0, 0, 0, 0.4);
    }
}

/* Koyu tema — elle seçim (sistem tercihini geçersiz kılar) */
:root[data-theme="dark"] {
    --bg:            var(--n-950);
    --bg-elevated:   var(--n-900);
    --bg-sunken:     #0a0d0d;
    --bg-header:     rgba(15, 19, 19, 0.85);
    --surface-hover: var(--n-800);

    --text:          var(--n-50);
    --text-muted:    var(--n-400);
    --text-subtle:   var(--n-500);

    --border:        #262d2d;
    --border-strong: #333c3c;

    --link:       var(--brand-300);
    --link-hover: var(--brand-200);

    --rx-beyaz-bg:     #232929;
    --rx-beyaz-fg:     var(--n-300);
    --rx-beyaz-edge:   #333c3c;
    --rx-kirmizi-bg:   #3a1a17;
    --rx-kirmizi-fg:   #f5a49b;
    --rx-kirmizi-edge: #5c2a24;
    --rx-yesil-bg:     #142a1c;
    --rx-yesil-fg:     #8fd6a4;
    --rx-yesil-edge:   #234835;
    --rx-mor-bg:       #241a38;
    --rx-mor-fg:       #c4a9ef;
    --rx-mor-edge:     #3d2c5c;
    --rx-turuncu-bg:   #33220f;
    --rx-turuncu-fg:   #efb87a;
    --rx-turuncu-edge: #543a1c;

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow:    0 4px 12px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.6), 0 2px 8px rgba(0, 0, 0, 0.4);
}