/* ============================================================
   BAKED BAGS — TASARIM TOKEN'LARI (donmuş sözleşme)
   Tüm sayfa/bileşen CSS'i YALNIZ bu değişkenleri kullanır.
   Hardcode hex/px yasak (istisna: tokens.css + base.css).
============================================================ */
/* Fontlar self-host (Google'a istek YOK) — bkz. assets/css/plus-jakarta.css */
@import url('../css/plus-jakarta.css');

@layer tokens {
    :root {
        /* — Kakao (soğuk espresso — hafif teal undertone) — */
        --bb-cacao-900: #0E0C0B;
        --bb-cacao-800: #1A1614;
        --bb-cacao-700: #2C2420;
        --bb-cacao-600: #4A3A32;
        --bb-cacao-500: #6B5348;
        --bb-cacao-400: #8A7164;

        /* — Teal (ana aksiyon — daha canlı aqua) — */
        --bb-teal-700: #0E6B6E;
        --bb-teal-600: #128A8E;
        --bb-teal-500: #1AA8AD;
        --bb-teal-400: #2FC4C9;
        --bb-teal-300: #7DDEE1;

        /* — Champagne (soğuk lüks aksan) — */
        --bb-gold-700: #7A6A48;
        --bb-gold-500: #B8A46A;
        --bb-gold-400: #D0C08A;
        --bb-gold-300: #E4D9B0;

        /* — Mist / taş (krem yerine serin açık yüzey) — */
        --bb-ivory-50: #F7F6F3;
        --bb-ivory-100: #F0EEEA;
        --bb-ivory-200: #E4E0D9;
        --bb-ivory-300: #D2CCC2;

        /* — Soğuk nötr ramp (metin / kenar) — */
        --bb-ink-900: #141210;
        --bb-ink-700: #342E2A;
        --bb-ink-500: #5E5650;
        --bb-ink-300: #9A9188;
        --bb-ink-200: #C5BFB6;
        --bb-ink-100: #E6E2DC;

        /* — Semantik — */
        --bb-success: #2A8F6A;
        --bb-error: #C4453A;
        --bb-warn: #C9A227;
        --bb-star: #E8B84A;

        /* — Yüzeyler / metin rolleri — */
        --bb-surface-dark: var(--bb-cacao-900);
        --bb-surface: var(--bb-ivory-100);
        --bb-surface-2: var(--bb-ivory-200);
        --bb-surface-raised: #ffffff;
        --bb-on-dark: var(--bb-ivory-50);
        --bb-on-dark-dim: rgba(247, 246, 243, .64);
        --bb-on-light: var(--bb-ink-900);
        --bb-on-light-dim: var(--bb-ink-500);
        --bb-border: rgba(42, 36, 32, .12);
        --bb-border-gold: rgba(184, 164, 106, .42);

        /* — Gradyentler — */
        --bb-grad-hero: radial-gradient(120% 120% at 80% 0%, #2C2420 0%, #1A1614 42%, #0E0C0B 100%);
        --bb-grad-cacao: linear-gradient(150deg, var(--bb-cacao-700), var(--bb-cacao-900));
        --bb-grad-teal: linear-gradient(150deg, var(--bb-teal-400), var(--bb-teal-700));
        --bb-grad-gold: linear-gradient(120deg, var(--bb-gold-400), var(--bb-gold-700));
        --bb-grad-ivory: linear-gradient(160deg, var(--bb-ivory-50), var(--bb-ivory-200));
        --bb-grad-sheen: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .28) 50%, transparent 70%);

        /* — Tipografi — */
        --bb-font-display: 'Plus Jakarta Sans', system-ui, -apple-system, Segoe UI, sans-serif;
        --bb-font-body: 'Plus Jakarta Sans', system-ui, -apple-system, Segoe UI, sans-serif;
        --bb-fw-display: 800;
        --bb-display-xl: clamp(64px, 9vw, 124px);
        --bb-display-l: clamp(46px, 6vw, 82px);
        --bb-display-m: clamp(34px, 4.5vw, 56px);
        --bb-display-s: clamp(26px, 3vw, 38px);
        --bb-text-xl: 20px;
        --bb-text-l: 18px;
        --bb-text-m: 16px;
        --bb-text-s: 14px;
        --bb-text-xs: 12px;
        --bb-lh-tight: 1.02;
        --bb-lh-snug: 1.28;
        --bb-lh-body: 1.65;
        --bb-ls-display: -0.022em;
        --bb-ls-label: 0.16em;

        /* — Spacing (8px taban) — */
        --bb-1: 4px;
        --bb-2: 8px;
        --bb-3: 12px;
        --bb-4: 16px;
        --bb-5: 24px;
        --bb-6: 32px;
        --bb-7: 48px;
        --bb-8: 64px;
        --bb-9: 96px;
        --bb-10: 128px;
        --bb-pad-x: clamp(18px, 5vw, 72px);
        --bb-pad-y: clamp(56px, 8vh, 118px);
        --bb-container: 1280px;

        /* — Radius — */
        --bb-r-sm: 8px;
        --bb-r-md: 12px;
        --bb-r-lg: 16px;
        --bb-r-xl: 22px;
        --bb-r-2xl: 30px;
        --bb-r-pill: 999px;

        /* — Elevation (nötr soğuk gölge) — */
        --bb-e1: 0 1px 2px rgba(14, 12, 11, .05), 0 2px 6px rgba(14, 12, 11, .04);
        --bb-e2: 0 4px 12px rgba(14, 12, 11, .07), 0 8px 24px rgba(14, 12, 11, .05);
        --bb-e3: 0 10px 32px rgba(14, 12, 11, .10), 0 20px 50px rgba(14, 12, 11, .08);
        --bb-e4: 0 24px 70px rgba(14, 12, 11, .18);
        --bb-glow-teal: 0 8px 30px rgba(26, 168, 173, .38);
        --bb-glow-gold: 0 6px 22px rgba(184, 164, 106, .32);

        /* — Motion — */
        --bb-dur-instant: 120ms;
        --bb-dur-fast: 200ms;
        --bb-dur-base: 320ms;
        --bb-dur-slow: 520ms;
        --bb-dur-cine: 820ms;
        --bb-ease-standard: cubic-bezier(0.22, 1, 0.36, 1);
        --bb-ease-emphasized: cubic-bezier(0.34, 1.56, 0.64, 1);
        --bb-ease-exit: cubic-bezier(0.4, 0, 1, 1);

        /* — z-index ölçeği — */
        --bb-z-nav: 1000;
        --bb-z-overlay: 9000;
        --bb-z-panel: 10001;
        --bb-z-toast: 11000;
        --bb-z-chatbot: 9999;
    }
}