/* ══════════════════════════════════════════════════════════════
   theme.css — RegTech Focus Design Tokens & Bootstrap 5 Overrides
   ══════════════════════════════════════════════════════════════ */

/* ── 1. COLOR PALETTE ─────────────────────────────────────────
   Mevcut site paleti + genişletilmiş semantik renkler.
   Her renk hem --rf-* (projemiz) hem --bs-* (Bootstrap) olarak
   tanımlı, böylece Bootstrap bileşenleri otomatik uyum sağlar.
   ─────────────────────────────────────────────────────────── */

:root {
    /* ── Brand Colors ──────────────────────────────────────── */
    --rf-accent:            #f59e0b;
    --rf-accent-hover:      #d97706;
    --rf-accent-subtle:     rgba(245, 158, 11, .10);
    --rf-accent-glow:       rgba(245, 158, 11, .25);

    --rf-violet:            #8b5cf6;
    --rf-violet-hover:      #7c3aed;
    --rf-violet-subtle:     rgba(139, 92, 246, .10);

    /* ── Semantic Colors ───────────────────────────────────── */
    --rf-success:           #22c55e;
    --rf-success-subtle:    rgba(34, 197, 94, .10);
    --rf-danger:            #ef4444;
    --rf-danger-subtle:     rgba(239, 68, 68, .10);
    --rf-warning:           #f59e0b;
    --rf-warning-subtle:    rgba(245, 158, 11, .10);
    --rf-info:              #06b6d4;
    --rf-info-subtle:       rgba(6, 182, 212, .10);

    /* ── Background Layers (dark — default) ────────────────── */
    --rf-bg:                #0d1117;
    --rf-bg-raised:         #161b22;
    --rf-surface:           #161b22;
    --rf-surface-hover:     #1c2333;
    --rf-surface-2:         #1e2736;
    --rf-surface-3:         #252e3f;

    /* ── Text ──────────────────────────────────────────────── */
    --rf-text:              #e6edf3;
    --rf-text-secondary:    #b0bac5;
    --rf-text-muted:        #8b949e;
    --rf-text-on-accent:    #0d1117;

    /* ── Borders ───────────────────────────────────────────── */
    --rf-border:            rgba(139, 148, 158, .15);
    --rf-border-strong:     rgba(139, 148, 158, .30);
    --rf-border-accent:     rgba(245, 158, 11, .25);

    /* ── Focus Ring ────────────────────────────────────────── */
    --rf-ring:              rgba(245, 158, 11, .40);
    --rf-ring-offset:       var(--rf-bg);
}


/* ── 2. TYPOGRAPHY ────────────────────────────────────────────
   Font stack, size scale (modular — 1.25 ratio), line-height,
   letter-spacing ve font-weight token'ları.
   ─────────────────────────────────────────────────────────── */

:root {
    /* ── Font Families ─────────────────────────────────────── */
    --rf-font-sans:         'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --rf-font-heading:      'Space Grotesk', var(--rf-font-sans);
    --rf-font-mono:         'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;

    /* ── Font Sizes (modular scale 1.25) ───────────────────── */
    --rf-text-xs:           0.75rem;    /* 12px */
    --rf-text-sm:           0.875rem;   /* 14px */
    --rf-text-base:         1rem;       /* 16px */
    --rf-text-md:           1.125rem;   /* 18px */
    --rf-text-lg:           1.25rem;    /* 20px */
    --rf-text-xl:           1.5rem;     /* 24px */
    --rf-text-2xl:          1.875rem;   /* 30px */
    --rf-text-3xl:          2.25rem;    /* 36px */
    --rf-text-4xl:          3rem;       /* 48px */

    /* ── Line Heights ──────────────────────────────────────── */
    --rf-leading-none:      1;
    --rf-leading-tight:     1.2;
    --rf-leading-snug:      1.35;
    --rf-leading-normal:    1.5;
    --rf-leading-relaxed:   1.65;
    --rf-leading-loose:     1.85;

    /* ── Font Weights ──────────────────────────────────────── */
    --rf-weight-normal:     400;
    --rf-weight-medium:     500;
    --rf-weight-semibold:   600;
    --rf-weight-bold:       700;
    --rf-weight-extrabold:  800;

    /* ── Letter Spacing ────────────────────────────────────── */
    --rf-tracking-tight:    -0.025em;
    --rf-tracking-normal:   0;
    --rf-tracking-wide:     0.05em;
    --rf-tracking-wider:    0.08em;
}


/* ── 3. SPACING SCALE ─────────────────────────────────────────
   4px tabanlı (0.25rem) doğrusal scale.
   ─────────────────────────────────────────────────────────── */

:root {
    --rf-space-0:           0;
    --rf-space-px:          1px;
    --rf-space-0_5:         0.125rem;   /* 2px  */
    --rf-space-1:           0.25rem;    /* 4px  */
    --rf-space-1_5:         0.375rem;   /* 6px  */
    --rf-space-2:           0.5rem;     /* 8px  */
    --rf-space-2_5:         0.625rem;   /* 10px */
    --rf-space-3:           0.75rem;    /* 12px */
    --rf-space-4:           1rem;       /* 16px */
    --rf-space-5:           1.25rem;    /* 20px */
    --rf-space-6:           1.5rem;     /* 24px */
    --rf-space-8:           2rem;       /* 32px */
    --rf-space-10:          2.5rem;     /* 40px */
    --rf-space-12:          3rem;       /* 48px */
    --rf-space-16:          4rem;       /* 64px */
    --rf-space-20:          5rem;       /* 80px */
    --rf-space-24:          6rem;       /* 96px */
}


/* ── 4. BORDER RADIUS ─────────────────────────────────────── */

:root {
    --rf-radius-sm:         0.375rem;   /* 6px  */
    --rf-radius:            0.625rem;   /* 10px */
    --rf-radius-md:         0.75rem;    /* 12px */
    --rf-radius-lg:         1rem;       /* 16px */
    --rf-radius-xl:         1.5rem;     /* 24px */
    --rf-radius-full:       9999px;
}


/* ── 5. SHADOWS ───────────────────────────────────────────── */

:root {
    --rf-shadow-xs:         0 1px 2px rgba(0, 0, 0, .30);
    --rf-shadow-sm:         0 2px 4px rgba(0, 0, 0, .25);
    --rf-shadow:            0 4px 12px rgba(0, 0, 0, .30);
    --rf-shadow-md:         0 6px 20px rgba(0, 0, 0, .35);
    --rf-shadow-lg:         0 12px 40px rgba(0, 0, 0, .40);
    --rf-shadow-xl:         0 20px 60px rgba(0, 0, 0, .50);
    --rf-shadow-accent:     0 4px 20px var(--rf-accent-glow);
    --rf-shadow-inner:      inset 0 2px 4px rgba(0, 0, 0, .25);
}


/* ── 6. TRANSITIONS ───────────────────────────────────────── */

:root {
    --rf-duration-fast:     150ms;
    --rf-duration:          200ms;
    --rf-duration-slow:     300ms;
    --rf-duration-slower:   500ms;
    --rf-ease:              cubic-bezier(.4, 0, .2, 1);
    --rf-ease-in:           cubic-bezier(.4, 0, 1, 1);
    --rf-ease-out:          cubic-bezier(0, 0, .2, 1);
    --rf-ease-bounce:       cubic-bezier(.34, 1.56, .64, 1);
    --rf-trans:             var(--rf-duration) var(--rf-ease);
    --rf-trans-slow:        var(--rf-duration-slow) var(--rf-ease);
}


/* ── 7. Z-INDEX SCALE ─────────────────────────────────────── */

:root {
    --rf-z-dropdown:        100;
    --rf-z-sticky:          200;
    --rf-z-fixed:           500;
    --rf-z-overlay:         900;
    --rf-z-navbar:          1000;
    --rf-z-modal:           1500;
    --rf-z-toast:           2000;
}


/* ── 8. LAYOUT ────────────────────────────────────────────── */

:root {
    --rf-container-max:     1200px;
    --rf-container-narrow:  780px;
    --rf-container-wide:    1400px;
    --rf-gutter:            1.5rem;
}


/* ══════════════════════════════════════════════════════════════
   9. BOOTSTRAP 5 DARK THEME — --bs-* OVERRIDES
   Bootstrap bileşenleri (card, btn, modal, dropdown vb.)
   otomatik olarak site paletimizi kullanır.
   ══════════════════════════════════════════════════════════════ */

[data-bs-theme="dark"],
:root {
    /* ── Core ──────────────────────────────────────────────── */
    --bs-body-bg:                   var(--rf-bg);
    --bs-body-color:                var(--rf-text);
    --bs-secondary-bg:              var(--rf-surface);
    --bs-tertiary-bg:               var(--rf-surface-2);
    --bs-emphasis-color:            var(--rf-text);
    --bs-secondary-color:           var(--rf-text-secondary);

    /* ── Links ─────────────────────────────────────────────── */
    --bs-link-color:                var(--rf-accent);
    --bs-link-hover-color:          var(--rf-accent-hover);

    /* ── Borders ───────────────────────────────────────────── */
    --bs-border-color:              var(--rf-border);
    --bs-border-color-translucent:  var(--rf-border);

    /* ── Brand → Primary mapping ───────────────────────────── */
    --bs-primary:                   var(--rf-accent);
    --bs-primary-rgb:               245, 158, 11;
    --bs-primary-bg-subtle:         var(--rf-accent-subtle);
    --bs-primary-border-subtle:     var(--rf-border-accent);
    --bs-primary-text-emphasis:     var(--rf-accent);

    /* ── Secondary → Violet mapping ────────────────────────── */
    --bs-secondary:                 var(--rf-violet);
    --bs-secondary-rgb:             139, 92, 246;

    /* ── Semantic colors ───────────────────────────────────── */
    --bs-success:                   var(--rf-success);
    --bs-success-rgb:               34, 197, 94;
    --bs-danger:                    var(--rf-danger);
    --bs-danger-rgb:                239, 68, 68;
    --bs-warning:                   var(--rf-warning);
    --bs-warning-rgb:               245, 158, 11;
    --bs-info:                      var(--rf-info);
    --bs-info-rgb:                  6, 182, 212;

    /* ── Cards ─────────────────────────────────────────────── */
    --bs-card-bg:                   var(--rf-surface);
    --bs-card-border-color:         var(--rf-border);
    --bs-card-cap-bg:               var(--rf-surface-2);

    /* ── Forms ─────────────────────────────────────────────── */
    --bs-form-control-bg:           var(--rf-surface);
    --bs-form-select-bg:            var(--rf-surface);

    /* ── Buttons ───────────────────────────────────────────── */
    --bs-btn-close-color:           var(--rf-text);

    /* ── Code ──────────────────────────────────────────────── */
    --bs-code-color:                var(--rf-accent);

    /* ── Fonts (Bootstrap altyapısı) ───────────────────────── */
    --bs-body-font-family:          var(--rf-font-sans);
    --bs-body-font-size:            var(--rf-text-base);
    --bs-body-line-height:          var(--rf-leading-normal);
    --bs-font-monospace:            var(--rf-font-mono);

    /* ── Border radius ─────────────────────────────────────── */
    --bs-border-radius:             var(--rf-radius);
    --bs-border-radius-sm:          var(--rf-radius-sm);
    --bs-border-radius-lg:          var(--rf-radius-lg);
    --bs-border-radius-xl:          var(--rf-radius-xl);

    /* ── Box shadow ────────────────────────────────────────── */
    --bs-box-shadow:                var(--rf-shadow);
    --bs-box-shadow-sm:             var(--rf-shadow-sm);
    --bs-box-shadow-lg:             var(--rf-shadow-lg);
    --bs-box-shadow-inset:          var(--rf-shadow-inner);

    /* ── Focus ring ────────────────────────────────────────── */
    --bs-focus-ring-color:          var(--rf-ring);

    /* ── Dropdown ──────────────────────────────────────────── */
    --bs-dropdown-bg:               var(--rf-surface-2);
    --bs-dropdown-border-color:     var(--rf-border);
    --bs-dropdown-link-color:       var(--rf-text);
    --bs-dropdown-link-hover-bg:    var(--rf-surface-3);
    --bs-dropdown-link-hover-color: var(--rf-text);

    /* ── Modal ─────────────────────────────────────────────── */
    --bs-modal-bg:                  var(--rf-surface);
    --bs-modal-border-color:        var(--rf-border);

    /* ── Offcanvas ─────────────────────────────────────────── */
    --bs-offcanvas-bg:              var(--rf-surface);
    --bs-offcanvas-border-color:    var(--rf-border);

    /* ── Toast ─────────────────────────────────────────────── */
    --bs-toast-bg:                  var(--rf-surface-2);
    --bs-toast-border-color:        var(--rf-border);
    --bs-toast-header-bg:           var(--rf-surface-3);

    /* ── Nav / Tabs ────────────────────────────────────────── */
    --bs-nav-link-color:            var(--rf-text-secondary);
    --bs-nav-link-hover-color:      var(--rf-accent);
    --bs-nav-tabs-border-color:     var(--rf-border);
    --bs-nav-tabs-link-active-bg:   var(--rf-surface);
    --bs-nav-tabs-link-active-color:          var(--rf-text);
    --bs-nav-tabs-link-active-border-color:   var(--rf-border) var(--rf-border) transparent;

    /* ── Table ─────────────────────────────────────────────── */
    --bs-table-bg:                  transparent;
    --bs-table-color:               var(--rf-text);
    --bs-table-border-color:        var(--rf-border);
    --bs-table-striped-bg:          var(--rf-surface);
    --bs-table-hover-bg:            var(--rf-surface-hover);
    --bs-table-active-bg:           var(--rf-surface-2);

    /* ── Accordion ─────────────────────────────────────────── */
    --bs-accordion-bg:              var(--rf-surface);
    --bs-accordion-border-color:    var(--rf-border);
    --bs-accordion-btn-color:       var(--rf-text);
    --bs-accordion-active-bg:       var(--rf-accent-subtle);
    --bs-accordion-active-color:    var(--rf-accent);

    /* ── List group ────────────────────────────────────────── */
    --bs-list-group-bg:             var(--rf-surface);
    --bs-list-group-border-color:   var(--rf-border);
    --bs-list-group-color:          var(--rf-text);
    --bs-list-group-hover-bg:       var(--rf-surface-hover);
    --bs-list-group-active-bg:      var(--rf-accent);
    --bs-list-group-active-color:   var(--rf-text-on-accent);

    /* ── Pagination ────────────────────────────────────────── */
    --bs-pagination-bg:             var(--rf-surface);
    --bs-pagination-border-color:   var(--rf-border);
    --bs-pagination-color:          var(--rf-text-secondary);
    --bs-pagination-hover-bg:       var(--rf-surface-hover);
    --bs-pagination-hover-color:    var(--rf-text);
    --bs-pagination-active-bg:      var(--rf-accent);
    --bs-pagination-active-color:   var(--rf-text-on-accent);
    --bs-pagination-disabled-bg:    var(--rf-surface);
    --bs-pagination-disabled-color: var(--rf-text-muted);

    /* ── Breadcrumb ────────────────────────────────────────── */
    --bs-breadcrumb-divider-color:  var(--rf-text-muted);
    --bs-breadcrumb-active-color:   var(--rf-text-muted);

    /* ── Progress ──────────────────────────────────────────── */
    --bs-progress-bg:               var(--rf-surface-2);
    --bs-progress-bar-bg:           var(--rf-accent);

    /* ── Tooltip ───────────────────────────────────────────── */
    --bs-tooltip-bg:                var(--rf-surface-3);
    --bs-tooltip-color:             var(--rf-text);

    /* ── Badge ─────────────────────────────────────────────── */
    color-scheme: dark;
}


/* ══════════════════════════════════════════════════════════════
   10. LIGHT THEME OVERRIDES
   [data-bs-theme="light"] veya [data-theme="light"] ile
   aktif olur.
   ══════════════════════════════════════════════════════════════ */

[data-bs-theme="light"],
[data-theme="light"] {
    /* ── Backgrounds ───────────────────────────────────────── */
    --rf-bg:                #f8fafc;
    --rf-bg-raised:         #ffffff;
    --rf-surface:           #ffffff;
    --rf-surface-hover:     #f1f5f9;
    --rf-surface-2:         #f1f5f9;
    --rf-surface-3:         #e2e8f0;

    /* ── Text ──────────────────────────────────────────────── */
    --rf-text:              #0f172a;
    --rf-text-secondary:    #334155;
    --rf-text-muted:        #64748b;
    --rf-text-on-accent:    #ffffff;

    /* ── Borders ───────────────────────────────────────────── */
    --rf-border:            rgba(15, 23, 42, .10);
    --rf-border-strong:     rgba(15, 23, 42, .20);

    /* ── Accent (daha koyu tonlar okunabilirlik için) ───────── */
    --rf-accent:            #d97706;
    --rf-accent-hover:      #b45309;
    --rf-accent-subtle:     rgba(217, 119, 6, .08);
    --rf-accent-glow:       rgba(217, 119, 6, .20);

    /* ── Shadows (daha hafif) ──────────────────────────────── */
    --rf-shadow-xs:         0 1px 2px rgba(0, 0, 0, .05);
    --rf-shadow-sm:         0 2px 4px rgba(0, 0, 0, .06);
    --rf-shadow:            0 4px 12px rgba(0, 0, 0, .08);
    --rf-shadow-md:         0 6px 20px rgba(0, 0, 0, .10);
    --rf-shadow-lg:         0 12px 40px rgba(0, 0, 0, .12);
    --rf-shadow-xl:         0 20px 60px rgba(0, 0, 0, .15);
    --rf-shadow-accent:     0 4px 20px var(--rf-accent-glow);

    /* ── Focus ─────────────────────────────────────────────── */
    --rf-ring-offset:       var(--rf-bg);

    /* ── Bootstrap overrides ───────────────────────────────── */
    --bs-body-bg:           var(--rf-bg);
    --bs-body-color:        var(--rf-text);
    --bs-primary:           var(--rf-accent);
    --bs-primary-rgb:       217, 119, 6;
    --bs-card-bg:           var(--rf-surface);
    --bs-border-color:      var(--rf-border);

    color-scheme: light;
}