/* ========================================================================
   KarPayı — Design Tokens (OKLCH)
   Single source of truth for color, spacing, radius, shadow.
   Load AFTER bootstrap.min.css, AFTER typography-rucent.css, BEFORE app.css.

   Architecture:
     1. Primitive palette  — raw OKLCH values, never used directly in components
     2. Semantic tokens     — mapped from primitives, theme-aware
     3. Bootstrap mapping   — bridges semantic tokens → BS 5.3 CSS vars
     4. Fallback            — @supports gate for OKLCH → hex fallback
   ======================================================================== */

/* =====================================================================
   0. HEX FALLBACKS (always defined, overridden by OKLCH when supported)
   ===================================================================== */
:root {
  /* --- Primitives (hex) --- */
  --kp-emerald-50:  #ecfdf5;
  --kp-emerald-100: #d1fae5;
  --kp-emerald-200: #a7f3d0;
  --kp-emerald-500: #10b981;
  --kp-emerald-600: #059669;
  --kp-emerald-700: #047857;
  --kp-emerald-800: #065f46;
  --kp-emerald-900: #064e3b;

  --kp-amber-50:  #fffbeb;
  --kp-amber-500: #f59e0b;
  --kp-amber-600: #d97706;
  --kp-amber-700: #b45309;   /* text-safe, 5:1 on white */

  --kp-red-50:  #fef2f2;
  --kp-red-500: #ef4444;
  --kp-red-600: #dc2626;
  --kp-red-700: #b91c1c;

  --kp-cyan-50:  #ecfeff;
  --kp-cyan-600: #0891b2;

  --kp-green-50:  #f0fdf4;
  --kp-green-600: #16a34a;

  --kp-blue-600: #2563eb;

  --kp-gray-50:  #f9fafb;
  --kp-gray-100: #f3f4f6;
  --kp-gray-200: #e5e7eb;
  --kp-gray-300: #d1d5db;
  --kp-gray-400: #848b98;  /* Adjusted for 3:1 on white */
  --kp-gray-500: #6b7280;
  --kp-gray-600: #4b5563;
  --kp-gray-700: #374151;
  --kp-gray-800: #1f2937;
  --kp-gray-900: #111827;

  /* --- Semantic tokens (hex fallback — light) --- */
  --bg:           #f9fafb;
  --surface-1:    #ffffff;
  --surface-2:    #f3f4f6;
  --surface-3:    #e5e7eb;
  --text-1:       #111827;
  --text-2:       #4b5563;
  --text-3:       #848b98;  /* 3.5:1 on white — passes WCAG AA large text */
  --border:       #e5e7eb;
  --border-strong: #d1d5db;
  --muted:        #6b7280;

  --primary:          #047857;
  --primary-hover:    #065f46;
  --primary-subtle:   #ecfdf5;
  --primary-contrast: #ffffff;

  --accent:           #d97706;
  --accent-subtle:    #fffbeb;

  --success:          #15803d;  /* 5.02:1 on white — WCAG AA pass */
  --success-subtle:   #f0fdf4;
  --warning:          #b45309;  /* 5.02:1 on white — WCAG AA pass (text use) */
  --warning-bg:       #f59e0b;  /* Original amber for bg tints only */
  --warning-subtle:   #fffbeb;
  --danger:           #dc2626;
  --danger-subtle:    #fef2f2;
  --info:             #0e7490;  /* 5.36:1 on white — WCAG AA pass */
  --info-subtle:      #ecfeff;

  --focus-ring: rgba(4, 120, 87, 0.4);

  --shadow-color: 220 3% 15%;
  --shadow-1: 0 1px 2px -1px rgba(0,0,0,0.06), 0 1px 3px 0 rgba(0,0,0,0.08);
  --shadow-2: 0 4px 6px -2px rgba(0,0,0,0.05), 0 10px 15px -3px rgba(0,0,0,0.08);
  --shadow-3: 0 10px 25px -5px rgba(0,0,0,0.08), 0 20px 40px -10px rgba(0,0,0,0.1);

  /* Glass overlay (frosted panels over maps, full-bleed backgrounds) */
  --glass-bg: rgba(255, 255, 255, 0.88);

  --radius-1: 0.25rem;   /* 4px  — pills, small chips */
  --radius-2: 0.5rem;    /* 8px  — inputs, buttons, badges */
  --radius-3: 0.75rem;   /* 12px — cards, modals */
  --radius-4: 1rem;      /* 16px — large containers, hero */
  --radius-full: 9999px; /* pill / circle */

  /* --- Spacing scale (mobile-first, 4px base) --- */
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.5rem;    /* 24px */
  --space-6: 2rem;      /* 32px */
  --space-7: 3rem;      /* 48px */
  --space-8: 4rem;      /* 64px */

  /* --- Aliases (consumed by components, mapped to base tokens) --- */
  --border-1:        var(--border);
  --border-2:        var(--border-strong);
  --radius-sm:       var(--radius-1);
  --radius-md:       var(--radius-2);
  --radius-pill:     var(--radius-full);
  --shadow-sm:       var(--shadow-1);
  --shadow-md:       var(--shadow-2);
  --shadow-lg:       var(--shadow-3);
  --text-inverse:    #ffffff;
  --surface-inverse: #111827;
  --primary-light:   var(--kp-emerald-600);
  --font-mono:       ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;

  /* --- Transition --- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 120ms;
  --duration-normal: 200ms;
  --duration-slow: 350ms;

  /* =====================================================================
     Public Hero System — v0.66.10.15.6 FE-GLOBAL-PUBLIC-HERO-SYSTEM
     Tek namespace altında article + content + glossary (kp-content-hero)
     ailesi ve kp-bank-hero floor. Out-of-family: kp-profile-hero,
     kp-dinle-hero, page header strip'leri (home, bankalar) bu token'ları
     tüketmez — kendi domain'leri var.
     Plan: blueprints/reports/v0.66.10.15.6-global-public-hero-system-plan.md
     ===================================================================== */
  --kp-public-hero-min-h:           clamp(460px, 52vh, 520px);
  --kp-public-hero-min-h-mobile:    clamp(440px, 64vh, 520px);
  --kp-public-hero-py:              3rem 0 2rem;
  --kp-public-hero-py-mobile:       2rem 0 1.5rem;
  --kp-public-hero-row-min-h:       260px;
  --kp-public-hero-content-max:     600px;
  --kp-public-hero-title-fs:        clamp(2rem, 4.5vw, 3rem);
  --kp-public-hero-title-fs-mobile: clamp(1.75rem, 6vw, 2.25rem);
  --kp-public-hero-intro-fs:        1.0625rem;
  --kp-public-hero-intro-fs-mobile: 0.875rem;

  /* Multi-layer overlay: sol→sağ readability + alt→üst shadow */
  --kp-public-hero-overlay-image:
    linear-gradient(to right, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.30) 50%, rgba(0, 0, 0, 0.00) 70%),
    linear-gradient(to top,   rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.00) 40%);
  --kp-public-hero-overlay-image-mobile:
    linear-gradient(to right, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.20) 60%, rgba(0, 0, 0, 0.00) 80%),
    linear-gradient(to top,   rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.10) 50%);

  /* No-image fallback: brand gradient + soft shadow overlay */
  --kp-public-hero-no-image-bg:
    linear-gradient(135deg, var(--primary) 0%, oklch(0.35 0.12 160) 100%);
  --kp-public-hero-overlay-no-image:
    linear-gradient(to top, rgba(0, 0, 0, 0.40) 0%, transparent 100%);
}

/* =====================================================================
   1. OKLCH PRIMITIVES + SEMANTIC TOKENS (progressive enhancement)
   ===================================================================== */
@supports (color: oklch(50% 0 0)) {
  :root {
    /* --- Primitives (OKLCH) — raw palette, not for direct use --- */
    --kp-emerald-50:  oklch(0.97 0.02 165);
    --kp-emerald-100: oklch(0.93 0.05 165);
    --kp-emerald-200: oklch(0.88 0.08 165);
    --kp-emerald-500: oklch(0.65 0.17 162);
    --kp-emerald-600: oklch(0.56 0.15 163);
    --kp-emerald-700: oklch(0.49 0.14 165);
    --kp-emerald-800: oklch(0.42 0.11 166);
    --kp-emerald-900: oklch(0.37 0.10 166);

    --kp-amber-50:  oklch(0.98 0.02 85);
    --kp-amber-500: oklch(0.77 0.17 75);
    --kp-amber-600: oklch(0.65 0.16 63);
    --kp-amber-700: oklch(0.53 0.14 55);   /* #b45309 — text-safe, 5:1 on white */

    --kp-red-50:  oklch(0.97 0.01 20);
    --kp-red-500: oklch(0.59 0.22 27);
    --kp-red-600: oklch(0.53 0.21 27);
    --kp-red-700: oklch(0.47 0.19 27);

    --kp-cyan-50:  oklch(0.97 0.02 210);
    --kp-cyan-600: oklch(0.55 0.12 220);

    --kp-green-50:  oklch(0.97 0.02 145);
    --kp-green-600: oklch(0.58 0.16 145);

    --kp-blue-600: oklch(0.53 0.18 262);

    --kp-gray-50:  oklch(0.98 0.003 265);
    --kp-gray-100: oklch(0.96 0.005 265);
    --kp-gray-200: oklch(0.91 0.008 265);
    --kp-gray-300: oklch(0.85 0.01  265);
    --kp-gray-400: oklch(0.60 0.01  265);  /* Adjusted for 3:1 contrast */
    --kp-gray-500: oklch(0.55 0.015 265);
    --kp-gray-600: oklch(0.44 0.015 260);
    --kp-gray-700: oklch(0.35 0.015 260);
    --kp-gray-800: oklch(0.26 0.015 260);
    --kp-gray-900: oklch(0.18 0.015 265);

    /* --- Semantic tokens (OKLCH — light) --- */
    --bg:            var(--kp-gray-50);
    --surface-1:     oklch(1 0 0);          /* pure white */
    --surface-2:     var(--kp-gray-100);
    --surface-3:     var(--kp-gray-200);
    --text-1:        var(--kp-gray-900);
    --text-2:        var(--kp-gray-600);
    --text-3:        var(--kp-gray-400);
    --border:        var(--kp-gray-200);
    --border-strong: var(--kp-gray-300);
    --muted:         var(--kp-gray-500);

    --primary:          var(--kp-emerald-700);
    --primary-hover:    var(--kp-emerald-800);
    --primary-subtle:   var(--kp-emerald-50);
    --primary-contrast: oklch(1 0 0);

    --accent:           var(--kp-amber-600);
    --accent-subtle:    var(--kp-amber-50);

    --success:          var(--kp-green-600);
    --success-subtle:   var(--kp-green-50);
    --warning:          var(--kp-amber-700);   /* text-safe, 5:1 on white */
    --warning-bg:       var(--kp-amber-500);   /* brighter, for bg tints only */
    --warning-subtle:   var(--kp-amber-50);
    --danger:           var(--kp-red-600);
    --danger-subtle:    var(--kp-red-50);
    --info:             var(--kp-cyan-600);
    --info-subtle:      var(--kp-cyan-50);

    --focus-ring: oklch(0.49 0.14 165 / 0.4);
  }
}

/* =====================================================================
   2. DARK MODE
   ===================================================================== */

/* --- Dark: hex fallbacks --- */
[data-theme="dark"] {
  --bg:            #151820;
  --surface-1:     #262a38;
  --surface-2:     #313648;
  --surface-3:     #3e4359;
  --text-1:        #edeef3;
  --text-2:        #a8aebb;
  --text-3:        #7e8594;  /* ≥3:1 on surface-1 */
  --border:        #373d52;
  --border-strong: #4e5570;
  --muted:         #8a91a3;  /* ≥4.5:1 on surface-1 */

  --primary:          #10b981;
  --primary-hover:    #34d399;
  --primary-subtle:   rgba(16, 185, 129, 0.12);
  --primary-contrast: #151820;

  --accent:           #fbbf24;
  --accent-subtle:    rgba(251, 191, 36, 0.12);

  --success:          #34d399;
  --success-subtle:   rgba(52, 211, 153, 0.12);
  --warning:          #fbbf24;
  --warning-subtle:   rgba(251, 191, 36, 0.12);
  --danger:           #f87171;
  --danger-subtle:    rgba(248, 113, 113, 0.12);
  --info:             #22d3ee;
  --info-subtle:      rgba(34, 211, 238, 0.12);

  --focus-ring: rgba(16, 185, 129, 0.4);

  --shadow-1: 0 1px 2px -1px rgba(0,0,0,0.4), 0 1px 3px 0 rgba(0,0,0,0.5);
  --shadow-2: 0 4px 6px -2px rgba(0,0,0,0.35), 0 10px 15px -3px rgba(0,0,0,0.45);
  --shadow-3: 0 10px 25px -5px rgba(0,0,0,0.5), 0 20px 40px -10px rgba(0,0,0,0.6);

  --glass-bg: rgba(30, 41, 59, 0.88);

  --text-inverse:    #111827;
  --surface-inverse: #ffffff;

  color-scheme: dark;
}

/* --- Dark: OKLCH override --- */
@supports (color: oklch(50% 0 0)) {
  [data-theme="dark"] {
    --bg:            oklch(0.15 0.012 270);
    --surface-1:     oklch(0.22 0.012 270);   /* +0.07 lift from bg — cards clearly distinct */
    --surface-2:     oklch(0.27 0.012 270);
    --surface-3:     oklch(0.33 0.010 265);
    --text-1:        oklch(0.93 0.005 265);
    --text-2:        oklch(0.72 0.010 265);   /* brighter secondary text */
    --text-3:        oklch(0.56 0.010 265);   /* muted but readable */
    --border:        oklch(0.31 0.012 265);   /* visible separators */
    --border-strong: oklch(0.40 0.012 265);
    --muted:         oklch(0.60 0.012 265);

    /* Primary lightened for dark surfaces */
    --primary:          oklch(0.65 0.17 162);
    --primary-hover:    oklch(0.72 0.16 162);
    --primary-subtle:   oklch(0.65 0.17 162 / 0.12);
    --primary-contrast: oklch(0.15 0.012 270);

    --accent:           oklch(0.80 0.15 85);
    --accent-subtle:    oklch(0.80 0.15 85 / 0.12);

    --success:          oklch(0.72 0.16 162);
    --success-subtle:   oklch(0.72 0.16 162 / 0.12);
    --warning:          oklch(0.80 0.15 85);
    --warning-subtle:   oklch(0.80 0.15 85 / 0.12);
    --danger:           oklch(0.68 0.18 25);
    --danger-subtle:    oklch(0.68 0.18 25 / 0.12);
    --info:             oklch(0.75 0.12 200);
    --info-subtle:      oklch(0.75 0.12 200 / 0.12);

    --text-inverse:    oklch(0.18 0.015 265);
    --surface-inverse: oklch(1 0 0);

    --focus-ring: oklch(0.65 0.17 162 / 0.4);
  }
}

/* --- System preference auto-detect (no JS needed for initial paint) --- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:            #151820;
    --surface-1:     #262a38;
    --surface-2:     #313648;
    --surface-3:     #3e4359;
    --text-1:        #edeef3;
    --text-2:        #a8aebb;
    --text-3:        #7e8594;
    --border:        #373d52;
    --border-strong: #4e5570;
    --muted:         #8a91a3;

    --primary:          #10b981;
    --primary-hover:    #34d399;
    --primary-subtle:   rgba(16, 185, 129, 0.12);
    --primary-contrast: #151820;

    --accent:           #fbbf24;
    --accent-subtle:    rgba(251, 191, 36, 0.12);

    --success:          #34d399;
    --success-subtle:   rgba(52, 211, 153, 0.12);
    --warning:          #fbbf24;
    --warning-subtle:   rgba(251, 191, 36, 0.12);
    --danger:           #f87171;
    --danger-subtle:    rgba(248, 113, 113, 0.12);
    --info:             #22d3ee;
    --info-subtle:      rgba(34, 211, 238, 0.12);

    --focus-ring: rgba(16, 185, 129, 0.4);

    --shadow-1: 0 1px 2px -1px rgba(0,0,0,0.4), 0 1px 3px 0 rgba(0,0,0,0.5);
    --shadow-2: 0 4px 6px -2px rgba(0,0,0,0.35), 0 10px 15px -3px rgba(0,0,0,0.45);
    --shadow-3: 0 10px 25px -5px rgba(0,0,0,0.5), 0 20px 40px -10px rgba(0,0,0,0.6);

    --text-inverse:    #111827;
    --surface-inverse: #ffffff;

    color-scheme: dark;
  }

  @supports (color: oklch(50% 0 0)) {
    :root:not([data-theme="light"]) {
      --bg:            oklch(0.15 0.012 270);
      --surface-1:     oklch(0.22 0.012 270);
      --surface-2:     oklch(0.27 0.012 270);
      --surface-3:     oklch(0.33 0.010 265);
      --text-1:        oklch(0.93 0.005 265);
      --text-2:        oklch(0.72 0.010 265);
      --text-3:        oklch(0.56 0.010 265);
      --border:        oklch(0.31 0.012 265);
      --border-strong: oklch(0.40 0.012 265);
      --muted:         oklch(0.60 0.012 265);

      --primary:          oklch(0.65 0.17 162);
      --primary-hover:    oklch(0.72 0.16 162);
      --primary-subtle:   oklch(0.65 0.17 162 / 0.12);
      --primary-contrast: oklch(0.15 0.012 270);

      --accent:           oklch(0.80 0.15 85);
      --accent-subtle:    oklch(0.80 0.15 85 / 0.12);

      --success:          oklch(0.72 0.16 162);
      --success-subtle:   oklch(0.72 0.16 162 / 0.12);
      --warning:          oklch(0.80 0.15 85);
      --warning-subtle:   oklch(0.80 0.15 85 / 0.12);
      --danger:           oklch(0.68 0.18 25);
      --danger-subtle:    oklch(0.68 0.18 25 / 0.12);
      --info:             oklch(0.75 0.12 200);
      --info-subtle:      oklch(0.75 0.12 200 / 0.12);

      --text-inverse:    oklch(0.18 0.015 265);
      --surface-inverse: oklch(1 0 0);

      --focus-ring: oklch(0.65 0.17 162 / 0.4);
    }
  }
}

/* =====================================================================
   3. BOOTSTRAP 5.3 VARIABLE BRIDGE
   Minimal override: only color/type tokens. Do not break component logic.
   ===================================================================== */
:root,
[data-theme="light"] {
  --bs-body-bg:         var(--bg);
  --bs-body-color:      var(--text-1);
  --bs-secondary-color: var(--text-2);
  --bs-tertiary-color:  var(--text-3);

  --bs-border-color:        var(--border);
  --bs-border-color-translucent: var(--border);

  --bs-primary:     var(--primary);
  --bs-primary-rgb: 4, 120, 87;   /* kept static for rgba() usage in BS */

  --bs-link-color:       var(--primary);
  --bs-link-hover-color: var(--primary-hover);

  --bs-emphasis-color:   var(--text-1);

  --bs-success:     var(--success);
  --bs-warning:     var(--warning);
  --bs-danger:      var(--danger);
  --bs-info:        var(--info);

  --bs-success-rgb: 21, 128, 61;    /* #15803d */
  --bs-warning-rgb: 180, 83, 9;     /* #b45309 */
  --bs-danger-rgb:  220, 38, 38;    /* #dc2626 */
  --bs-info-rgb:    14, 116, 144;   /* #0e7490 */

  --bs-focus-ring-color: var(--focus-ring);
}

[data-theme="dark"] {
  --bs-body-bg:         var(--bg);
  --bs-body-color:      var(--text-1);
  --bs-secondary-color: var(--text-2);
  --bs-tertiary-color:  var(--text-3);

  --bs-border-color:        var(--border);
  --bs-border-color-translucent: var(--border);

  --bs-primary:     var(--primary);
  --bs-primary-rgb: 16, 185, 129;

  --bs-link-color:       var(--primary);
  --bs-link-hover-color: var(--primary-hover);

  --bs-emphasis-color:   var(--text-1);

  --bs-success:     var(--success);
  --bs-warning:     var(--warning);
  --bs-danger:      var(--danger);
  --bs-info:        var(--info);

  --bs-success-rgb: 52, 211, 153;
  --bs-warning-rgb: 251, 191, 36;
  --bs-danger-rgb:  248, 113, 113;
  --bs-info-rgb:    34, 211, 238;

  --bs-focus-ring-color: var(--focus-ring);
}

/* Repeat BS bridge for prefers-color-scheme auto */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bs-body-bg:         var(--bg);
    --bs-body-color:      var(--text-1);
    --bs-secondary-color: var(--text-2);
    --bs-tertiary-color:  var(--text-3);
    --bs-border-color:    var(--border);
    --bs-border-color-translucent: var(--border);
    --bs-primary:         var(--primary);
    --bs-primary-rgb:     16, 185, 129;
    --bs-link-color:      var(--primary);
    --bs-link-hover-color: var(--primary-hover);
    --bs-emphasis-color:  var(--text-1);
    --bs-success: var(--success);
    --bs-warning: var(--warning);
    --bs-danger:  var(--danger);
    --bs-info:    var(--info);
    --bs-success-rgb: 52, 211, 153;
    --bs-warning-rgb: 251, 191, 36;
    --bs-danger-rgb:  248, 113, 113;
    --bs-info-rgb:    34, 211, 238;
    --bs-focus-ring-color: var(--focus-ring);
  }
}

/* =====================================================================
   4. LEGACY KP-* VARIABLE BRIDGE
   Maps old app.css kp-* vars to new semantic tokens for backward compat.
   ===================================================================== */
:root {
  --kp-primary:       var(--primary);
  --kp-primary-light: var(--kp-emerald-600);
  --kp-primary-dark:  var(--primary-hover);
  --kp-accent:        var(--accent);
  --kp-danger:        var(--danger);
  --kp-info:          var(--info);
  --kp-dark:          var(--text-1);
  --kp-light:         var(--bg);
  --kp-border:        var(--border);
  --kp-muted:         var(--muted);
}