/* ============================================================================
 * Studio OS — Design Tokens
 * Linear issue: TECH-5461 (F1.1)
 *
 * Bu dosya cleaned-style.min.css'ten SONRA yüklenir; mevcut TechBit teması
 * dokunulmadan kalır, yeni Studio OS bilesenleri bu tokenlari kullanir.
 *
 * Kaynak: TECHLIBERTY Design System/TechLiberty Redesign v2.html
 * ========================================================================== */

:root {
    /* Zemin & metin — sicak krem palette */
    --studio-cream: #F4F1EA;
    --studio-cream-2: #EAE6DC;
    --studio-cream-3: #DDD7C7;
    --studio-cream-soft: #FAF8F2;     /* admin/light sections */

    --studio-ink: #0B0B0F;             /* ana metin / kontrast bantlari */
    --studio-ink-2: #1A1A1F;
    --studio-ink-3: #26262E;

    --studio-line: rgba(11, 11, 15, 0.08);
    --studio-line-2: rgba(11, 11, 15, 0.14);
    --studio-line-dark: rgba(255, 255, 255, 0.08);

    --studio-muted: #6B6961;
    --studio-muted-2: #9A988E;

    /* Urun renkleri — her urun kendi DNA'si */
    --studio-product-muh: #2E5BFF;     /* Muhasebecin — elektrik mavi */
    --studio-product-rate: #FF3D8B;    /* RateTheWork — magenta */
    --studio-product-gof: #7B3FF2;     /* Gof Games — mor */
    --studio-product-san: #FF7A1A;     /* Santiye Bul — kehribar */
    --studio-product-ai: #00C28E;      /* Studio AI / yesil */

    /* Aurora gradient (hero + dikkat noktalari) */
    --studio-aurora: linear-gradient(115deg,
        var(--studio-product-muh) 0%,
        var(--studio-product-gof) 45%,
        var(--studio-product-rate) 80%,
        var(--studio-product-san) 100%);

    /* Tipografi aileleri */
    --studio-font-display: 'Russo One', 'Jost', system-ui, sans-serif;
    --studio-font-body: 'Jost', system-ui, sans-serif;
    --studio-font-mono: 'Geist Mono', 'JetBrains Mono', ui-monospace, monospace;

    /* Display font variation defaults */
    --studio-display-wdth: 100;
    --studio-display-opsz: 96;

    /* Spacing scale */
    --studio-space-1: 4px;
    --studio-space-2: 8px;
    --studio-space-3: 12px;
    --studio-space-4: 16px;
    --studio-space-5: 24px;
    --studio-space-6: 32px;
    --studio-space-7: 48px;
    --studio-space-8: 64px;
    --studio-space-9: 96px;
    --studio-space-10: 128px;

    /* Radius */
    --studio-radius-sm: 8px;
    --studio-radius-md: 14px;
    --studio-radius-lg: 20px;
    --studio-radius-xl: 24px;
    --studio-radius-pill: 100px;

    /* Shadows */
    --studio-shadow-card: 0 24px 60px -28px rgba(11, 11, 15, 0.18);
    --studio-shadow-frame: 0 60px 120px -50px rgba(11, 11, 15, 0.25);
    --studio-shadow-soft: 0 2px 6px rgba(11, 11, 15, 0.04);

    /* Z-index scale */
    --studio-z-topbar: 100;
    --studio-z-overlay: 1000;
    --studio-z-modal: 1100;
}

/* ----------------------------------------------------------------------------
 * Tipografi yardimci siniflari
 *
 * Bricolage Grotesque variable font — opsz (12..96), wdth (75..125), wght (200..800)
 * -------------------------------------------------------------------------- */
.studio-display {
    font-family: var(--studio-font-display);
    font-variation-settings: "wdth" 100, "opsz" 96;
    letter-spacing: -0.03em;
    line-height: 0.95;
    font-weight: 500;
}

.studio-display-wide {
    font-family: var(--studio-font-display);
    font-variation-settings: "wdth" 120, "opsz" 96;
    letter-spacing: -0.025em;
    line-height: 0.95;
    font-weight: 500;
}

.studio-display-cond {
    font-family: var(--studio-font-display);
    font-variation-settings: "wdth" 75, "opsz" 96;
    letter-spacing: -0.01em;
    line-height: 0.95;
    font-weight: 500;
}

.studio-display-ital {
    font-style: italic;
    font-weight: 600;
}

.studio-body {
    font-family: var(--studio-font-body);
    font-weight: 400;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.studio-mono {
    font-family: var(--studio-font-mono);
    font-size: 11px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

/* ----------------------------------------------------------------------------
 * Aurora gradient text helper
 * -------------------------------------------------------------------------- */
.studio-grad-text {
    background: var(--studio-aurora);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: studio-grad-shift 8s ease-in-out infinite;
}

/* ----------------------------------------------------------------------------
 * Studio kapsayicisi — sadece yeni sayfalarda aktiflesir
 * MainLayout veya tek tek sayfa kok elemanina .studio-shell eklenirse
 * tum sayfa Studio OS paletine geciser. Eski sayfalar etkilenmez.
 * -------------------------------------------------------------------------- */
.studio-shell {
    background: var(--studio-cream);
    color: var(--studio-ink);
    font-family: var(--studio-font-body);
    font-size: 15px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.studio-shell ::selection {
    background: var(--studio-ink);
    color: var(--studio-cream);
}

/* ----------------------------------------------------------------------------
 * Reduced motion: kullanici hareket azaltma istedi ise animasyonlari durdur
 * -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .studio-grad-text {
        animation: none;
    }
}