/* ==========================================================================
   variables.css — Archival Codex Tasarım Sistemi Token'ları
   Kaya & Yılmaz Hukuk Bürosu

   Bu dosya tüm tasarım kararlarının tek kaynağıdır (single source of truth).
   Renk, tipografi, boşluk, animasyon, z-index, container, radius ve gölge
   değerleri yalnızca burada tanımlanır; diğer CSS dosyaları sadece tüketir.

   Yükleme sırası: variables.css → main.css → components.css → pages/*.css
   ========================================================================== */

:root {
    /* ======================================================================
       1. RENK PALETİ
       ====================================================================== */

    /* --- Ana Renkler --- */
    --color-dark: #1A1A1A;              /* Koyu antrasit — ana koyu yüzey */
    --color-stone: #E8E1D4;             /* Sıcak taş/parşömen — ana açık yüzey */
    --color-burgundy: #6E1F2A;          /* Derin bordo — vurgu rengi */

    /* --- Yardımcı Renkler --- */
    --color-charcoal: #2A2A28;          /* Koyu bölüm varyasyonu */
    --color-warm-gray: #D4CFC4;         /* Taş tonunun koyusu — border, subtle bg */
    --color-cream: #F2EFE8;             /* En açık arka plan — beyaz yerine */
    --color-burgundy-light: #8A3040;    /* Bordo hover durumu */
    --color-burgundy-dark: #5A1620;     /* Bordo active durumu */

    /* --- Metin Renkleri --- */
    --color-text-primary: #171714;      /* Ana metin — açık yüzeyde */
    --color-text-light: #E8E1D4;        /* Koyu yüzeyde metin */
    --color-text-muted: #6D6B63;        /* İkincil metin, açık yüzeyde */
    --color-text-muted-dark: #9B978E;   /* İkincil metin, koyu yüzeyde */

    /* --- Arka Plan Renkleri --- */
    --color-bg-dark: #1A1A1A;
    --color-bg-dark-alt: #222220;
    --color-bg-light: #E8E1D4;
    --color-bg-light-alt: #F2EFE8;

    /* --- Kenarlık Renkleri --- */
    --color-border-light: rgba(23, 23, 20, 0.14);      /* Açık yüzeyde */
    --color-border-dark: rgba(232, 225, 212, 0.14);    /* Koyu yüzeyde */
    --color-border-accent: rgba(110, 31, 42, 0.4);     /* Bordo vurgulu */

    /* --- Durum Renkleri --- */
    --color-success: #3A6B4A;
    --color-error: #8B2020;

    /* --- Türetilmiş Yarı Saydam Katmanlar (overlay, scrim, hairline) --- */
    --color-dark-alpha-0: rgba(26, 26, 26, 0);
    --color-dark-alpha-70: rgba(26, 26, 26, 0.70);
    --color-dark-alpha-92: rgba(26, 26, 26, 0.92);
    --color-dark-alpha-98: rgba(26, 26, 26, 0.98);
    --color-light-alpha-06: rgba(232, 225, 212, 0.06);
    --color-light-alpha-40: rgba(232, 225, 212, 0.40);
    --color-light-alpha-70: rgba(232, 225, 212, 0.70);

    /* --- Odak Halkası (erişilebilirlik) --- */
    --color-focus-ring: var(--color-burgundy-light);
    --color-focus-ring-dark: var(--color-stone);


    /* ======================================================================
       2. TİPOGRAFİ
       ====================================================================== */

    /* --- Font Aileleri --- */
    --font-display: "Cormorant Garamond", "Iowan Old Style", Georgia, "Times New Roman", serif;
    --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

    /* --- Display: hero ve büyük başlıklar --- */
    --text-display: clamp(3rem, 6vw, 5.5rem);
    --text-display-weight: 300;
    --text-display-leading: 1.05;
    --text-display-tracking: -0.02em;

    /* --- H1: sayfa başlıkları --- */
    --text-h1: clamp(2.25rem, 4vw, 3.5rem);
    --text-h1-weight: 400;
    --text-h1-leading: 1.1;
    --text-h1-tracking: -0.015em;

    /* --- H2: bölüm başlıkları --- */
    --text-h2: clamp(1.75rem, 3vw, 2.5rem);
    --text-h2-weight: 400;
    --text-h2-leading: 1.15;
    --text-h2-tracking: -0.01em;

    /* --- H3: alt bölüm başlıkları --- */
    --text-h3: clamp(1.25rem, 2vw, 1.75rem);
    --text-h3-weight: 600;
    --text-h3-leading: 1.2;
    --text-h3-tracking: 0;

    /* --- H4: kart başlıkları, etiketler --- */
    --text-h4: clamp(1.1rem, 1.5vw, 1.35rem);
    --text-h4-weight: 600;
    --text-h4-leading: 1.3;
    --text-h4-tracking: 0.01em;

    /* --- Gövde --- */
    --text-body: clamp(1rem, 1.2vw, 1.125rem);
    --text-body-weight: 400;
    --text-body-leading: 1.7;

    /* --- Küçük metin --- */
    --text-small: clamp(0.8rem, 1vw, 0.875rem);
    --text-caption: clamp(0.7rem, 0.8vw, 0.75rem);

    /* --- Navigasyon --- */
    --text-nav: 0.8125rem;
    --text-nav-weight: 500;
    --text-nav-tracking: 0.12em;

    /* --- Referans numaraları (§01) --- */
    --text-reference: 0.75rem;
    --text-reference-weight: 500;
    --text-reference-tracking: 0.15em;

    /* --- Etiket / Eyebrow (FELSEFEMİZ, İLKELERİMİZ gibi) --- */
    --text-label: 0.6875rem;
    --text-label-weight: 500;
    --text-label-tracking: 0.18em;

    /* --- Satır uzunluğu kontrolü --- */
    --max-line-length: 65ch;
    --max-line-length-wide: 80ch;
    --max-line-length-narrow: 48ch;

    /* --- Font Ağırlık Skalası --- */
    --weight-light: 300;
    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;


    /* ======================================================================
       3. BOŞLUK (SPACING)
       ====================================================================== */

    /* --- Temel skala (4px tabanlı) --- */
    --space-3xs: 0.25rem;   /*  4px */
    --space-2xs: 0.5rem;    /*  8px */
    --space-xs: 0.75rem;    /* 12px */
    --space-sm: 1rem;       /* 16px */
    --space-md: 1.5rem;     /* 24px */
    --space-lg: 2rem;       /* 32px */
    --space-xl: 3rem;       /* 48px */
    --space-2xl: 4rem;      /* 64px */
    --space-3xl: 6rem;      /* 96px */
    --space-4xl: 8rem;      /* 128px */
    --space-5xl: 12rem;     /* 192px */

    /* --- Akışkan (fluid) boşluklar — Archival Codex'in nefes alan ritmi --- */
    --space-section: clamp(6rem, 12vw, 12rem);        /* Bölümler arası dikey boşluk */
    --space-section-inner: clamp(4rem, 8vw, 8rem);    /* Bölüm iç padding (üst/alt) */
    --space-block: clamp(2rem, 4vw, 4rem);            /* Blok içi orta boşluk */
    --space-paragraph: 1.5rem;                        /* Paragraflar arası */
    --space-gutter: clamp(1.5rem, 4vw, 3rem);         /* Yatay kenar boşluğu (container padding) */
    --space-grid-gap: clamp(1.5rem, 3vw, 3rem);       /* Grid sütun/satır boşluğu */


    /* ======================================================================
       4. CONTAINER ve GRID
       ====================================================================== */

    --container-max: 1440px;        /* Ana container max-width */
    --container-content: 1200px;    /* Standart içerik alanı */
    --container-wide: 1440px;       /* Tam genişlik bölümler */
    --container-narrow: 880px;      /* Metin ağırlıklı bölümler */
    --container-text: 680px;        /* Tek sütun makale gövdesi */

    --grid-columns: 12;
    --grid-gap: var(--space-grid-gap);

    /* Asimetrik bölme oranları */
    --split-60-40: 60fr 40fr;
    --split-70-30: 70fr 30fr;
    --split-40-60: 40fr 60fr;
    --split-30-70: 30fr 70fr;


    /* ======================================================================
       5. KENARLIK ve YARIÇAP (RADIUS)
       ====================================================================== */

    --border-hairline: 1px;
    --border-thin: 1px;
    --border-medium: 2px;
    --border-thick: 3px;

    /* Archival Codex neredeyse tamamen köşeli — radius minimumda tutulur. */
    --radius-none: 0;
    --radius-xs: 1px;
    --radius-sm: 2px;
    --radius-md: 4px;
    --radius-pill: 999px;
    --radius-circle: 50%;


    /* ======================================================================
       6. GÖLGELER
       ====================================================================== */

    /* Açık yüzeyde — çok yumuşak, neredeyse görünmez */
    --shadow-xs: 0 1px 2px rgba(23, 23, 20, 0.04);
    --shadow-sm: 0 2px 8px rgba(23, 23, 20, 0.06);
    --shadow-md: 0 8px 24px rgba(23, 23, 20, 0.08);
    --shadow-lg: 0 16px 48px rgba(23, 23, 20, 0.12);
    --shadow-xl: 0 24px 72px rgba(23, 23, 20, 0.16);

    /* Koyu yüzeyde — derinlik için daha yoğun */
    --shadow-dark-sm: 0 2px 12px rgba(0, 0, 0, 0.32);
    --shadow-dark-md: 0 12px 36px rgba(0, 0, 0, 0.40);
    --shadow-dark-lg: 0 24px 64px rgba(0, 0, 0, 0.48);

    /* Odak halkası gölgesi */
    --shadow-focus: 0 0 0 2px var(--color-bg-light-alt), 0 0 0 4px var(--color-focus-ring);
    --shadow-focus-dark: 0 0 0 2px var(--color-bg-dark), 0 0 0 4px var(--color-focus-ring-dark);


    /* ======================================================================
       7. ANİMASYON: SÜRE ve EASING
       ====================================================================== */

    /* --- Süreler --- */
    --duration-instant: 80ms;
    --duration-fast: 160ms;
    --duration-base: 260ms;
    --duration-medium: 400ms;
    --duration-slow: 600ms;
    --duration-slower: 900ms;
    --duration-reveal: 1200ms;

    /* --- Easing eğrileri --- */
    --ease-linear: linear;
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);          /* Yumuşak çıkış — varsayılan */
    --ease-in: cubic-bezier(0.55, 0, 1, 0.45);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --ease-editorial: cubic-bezier(0.16, 1, 0.3, 1);     /* Uzun, zarif reveal */
    --ease-subtle: cubic-bezier(0.4, 0, 0.2, 1);         /* Micro-interaction */

    /* --- Hazır geçiş kısayolları --- */
    --transition-color: color var(--duration-base) var(--ease-subtle);
    --transition-bg: background-color var(--duration-base) var(--ease-subtle);
    --transition-border: border-color var(--duration-base) var(--ease-subtle);
    --transition-opacity: opacity var(--duration-base) var(--ease-subtle);
    --transition-transform: transform var(--duration-medium) var(--ease-out);
    --transition-all: all var(--duration-base) var(--ease-subtle);

    /* --- Stagger gecikmeleri --- */
    --stagger-tight: 50ms;
    --stagger-base: 80ms;
    --stagger-loose: 120ms;


    /* ======================================================================
       8. Z-INDEX KATMANLARI
       ====================================================================== */

    --z-below: -1;
    --z-base: 0;
    --z-decor: 1;           /* Dekoratif SVG, filigran numaralar */
    --z-content: 10;
    --z-sticky: 100;        /* Yapışkan sidebar, içindekiler */
    --z-floating: 400;      /* Sabit eylem butonları — mobil menünün altında */
    --z-header: 500;        /* Ana navigasyon */
    --z-mobile-nav: 600;    /* Mobil overlay menü */
    --z-mobile-toggle: 700; /* Hamburger butonu — overlay üstünde kalmalı */
    --z-dropdown: 800;
    --z-modal: 900;
    --z-toast: 1000;
    --z-skip-link: 1100;    /* Erişilebilirlik: içeriğe atla */


    /* ======================================================================
       9. BİLEŞEN ÖLÇÜLERİ (LAYOUT SABİTLERİ)
       ====================================================================== */

    --header-height: 84px;
    --header-height-scrolled: 68px;
    --header-height-mobile: 68px;

    --monogram-size: 40px;
    --monogram-size-footer: 64px;

    --touch-target-min: 44px;   /* Erişilebilirlik: minimum dokunma alanı */

    --hairline-opacity: 0.14;
    --watermark-opacity: 0.06;  /* Devasa soluk §01 filigranı */


    /* ======================================================================
       10. BREAKPOINT REFERANSLARI (dokümantasyon amaçlı)
       Not: CSS custom property'ler @media içinde kullanılamaz.
       Media query'lerde bu değerler doğrudan yazılır.
       ====================================================================== */

    /* --bp-xs:   360px */
    /* --bp-sm:   390px */
    /* --bp-md:   768px  → hamburger menüye geçiş */
    /* --bp-lg:  1024px */
    /* --bp-xl:  1440px */
    /* --bp-2xl: 1920px */
}


/* ==========================================================================
   TEMA BAĞLAMLARI (Surface Context)
   Bölümler koyu veya açık yüzey olabilir. Bu sınıflar bağlama duyarlı
   metin/kenarlık token'larını yeniden eşler; component'ler bağlamdan
   habersiz çalışabilir.
   ========================================================================== */

.surface-dark {
    --surface-bg: var(--color-bg-dark);
    --surface-bg-alt: var(--color-bg-dark-alt);
    --surface-text: var(--color-text-light);
    --surface-text-muted: var(--color-text-muted-dark);
    --surface-border: var(--color-border-dark);
    --surface-accent: var(--color-burgundy-light);
    --surface-shadow: var(--shadow-dark-md);
    --surface-focus: var(--color-focus-ring-dark);

    background-color: var(--surface-bg);
    color: var(--surface-text);
}

.surface-light {
    --surface-bg: var(--color-bg-light);
    --surface-bg-alt: var(--color-bg-light-alt);
    --surface-text: var(--color-text-primary);
    --surface-text-muted: var(--color-text-muted);
    --surface-border: var(--color-border-light);
    --surface-accent: var(--color-burgundy);
    --surface-shadow: var(--shadow-md);
    --surface-focus: var(--color-focus-ring);

    background-color: var(--surface-bg);
    color: var(--surface-text);
}

.surface-cream {
    --surface-bg: var(--color-bg-light-alt);
    --surface-bg-alt: var(--color-bg-light);
    --surface-text: var(--color-text-primary);
    --surface-text-muted: var(--color-text-muted);
    --surface-border: var(--color-border-light);
    --surface-accent: var(--color-burgundy);
    --surface-shadow: var(--shadow-md);
    --surface-focus: var(--color-focus-ring);

    background-color: var(--surface-bg);
    color: var(--surface-text);
}


/* ==========================================================================
   HAREKET AZALTMA (prefers-reduced-motion)
   Süreleri sıfırlar; main.css içindeki tüm geçişler bu token'ları kullandığı
   için animasyonlar tek noktadan devre dışı kalır.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    :root {
        --duration-instant: 0ms;
        --duration-fast: 0ms;
        --duration-base: 0ms;
        --duration-medium: 0ms;
        --duration-slow: 0ms;
        --duration-slower: 0ms;
        --duration-reveal: 0ms;
        --stagger-tight: 0ms;
        --stagger-base: 0ms;
        --stagger-loose: 0ms;
    }
}