/* kur-tokens.css — KUR Design System v1
 * Gemini'den ilham, KUR markası: mavi (#3366ff) + Inter + display Space Grotesk.
 * Bu dosya en ÖNCE yüklenir; diğer *.css override edebilir ama tüm component'ler
 * --kur-sys-* token'larını kullanmalı (mavi sertleştirme yerine token revize et).
 *
 * Yapı:
 *   --kur-sys-color-*       renk paleti (light/dark)
 *   --kur-sys-shape-*       corner radius ölçeği
 *   --kur-sys-spacing-*     spacing ölçeği
 *   --kur-sys-motion-*      easing + duration
 *   --kur-sys-state-*       state-layer opaklıkları (hover/focus/pressed/disabled)
 *   --kur-sys-elevation-*   gölge ölçeği
 *   --kur-sys-typo-*        font ailesi + boyutları
 */

:root {
  /* ── Shape ────────────────────────────────────────────────── */
  --kur-sys-shape-corner-none:                 0px;
  --kur-sys-shape-corner-extra-small:          4px;
  --kur-sys-shape-corner-small:                8px;
  --kur-sys-shape-corner-medium:               12px;
  --kur-sys-shape-corner-large:                16px;
  --kur-sys-shape-corner-large-increased:      20px;
  --kur-sys-shape-corner-extra-large:          28px;
  --kur-sys-shape-corner-extra-large-increased: 32px;
  --kur-sys-shape-corner-extra-large-max:      40px;
  --kur-sys-shape-corner-full:                 9999px;

  /* ── Spacing (8pt grid) ───────────────────────────────────── */
  --kur-sys-spacing-xs:    4px;
  --kur-sys-spacing-s:     8px;
  --kur-sys-spacing-m:     12px;
  --kur-sys-spacing-l:     16px;
  --kur-sys-spacing-xl:    20px;
  --kur-sys-spacing-xxl:   24px;
  --kur-sys-spacing-xxxl:  32px;

  /* ── Motion (Material 3) ─────────────────────────────────── */
  --kur-sys-motion-easing-standard:           cubic-bezier(0.2, 0, 0, 1);
  --kur-sys-motion-easing-emphasized:         cubic-bezier(0.2, 0, 0, 1);
  --kur-sys-motion-easing-emphasized-decel:   cubic-bezier(0.05, 0.7, 0.1, 1);
  --kur-sys-motion-easing-emphasized-accel:   cubic-bezier(0.3, 0, 0.8, 0.15);
  --kur-sys-motion-easing-linear:             cubic-bezier(0, 0, 1, 1);
  --kur-sys-motion-duration-short1:           50ms;
  --kur-sys-motion-duration-short2:           100ms;
  --kur-sys-motion-duration-short3:           150ms;
  --kur-sys-motion-duration-short4:           200ms;
  --kur-sys-motion-duration-medium1:          250ms;
  --kur-sys-motion-duration-medium2:          300ms;
  --kur-sys-motion-duration-medium3:          350ms;
  --kur-sys-motion-duration-medium4:          400ms;
  --kur-sys-motion-duration-long1:            450ms;
  --kur-sys-motion-duration-long2:            500ms;
  --kur-sys-motion-duration-long3:            550ms;
  --kur-sys-motion-duration-long4:            600ms;

  /* ── State layer (hover/focus/pressed/disabled) ──────────── */
  --kur-sys-state-hover-opacity:        0.08;
  --kur-sys-state-focus-opacity:        0.10;
  --kur-sys-state-pressed-opacity:      0.12;
  --kur-sys-state-disabled-opacity:     0.12;
  --kur-sys-state-disabled-text-opacity: 0.38;
  --kur-sys-state-dragged-opacity:      0.16;

  /* ── Elevation ───────────────────────────────────────────── */
  --kur-sys-elevation-0:  none;
  --kur-sys-elevation-1:  0 1px 2px 0 rgba(0,0,0,0.30), 0 1px 3px 1px rgba(0,0,0,0.15);
  --kur-sys-elevation-2:  0 1px 2px 0 rgba(0,0,0,0.30), 0 2px 6px 2px rgba(0,0,0,0.15);
  --kur-sys-elevation-3:  0 4px 8px 3px rgba(0,0,0,0.15), 0 1px 3px 0 rgba(0,0,0,0.30);
  --kur-sys-elevation-4:  0 6px 10px 4px rgba(0,0,0,0.15), 0 2px 3px 0 rgba(0,0,0,0.30);
  --kur-sys-elevation-5:  0 8px 12px 6px rgba(0,0,0,0.15), 0 4px 4px 0 rgba(0,0,0,0.30);

  /* ── Typography ──────────────────────────────────────────── */
  --kur-sys-typo-font-base:   'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --kur-sys-typo-font-display: 'Space Grotesk', var(--kur-sys-typo-font-base);
  --kur-sys-typo-font-mono:   'JetBrains Mono', 'Fira Code', ui-monospace, monospace;

  /* Type scale — Material 3 benzeri */
  --kur-sys-typo-display-l-size:   3.5rem;   --kur-sys-typo-display-l-lh:   4rem;
  --kur-sys-typo-display-m-size:   2.75rem;  --kur-sys-typo-display-m-lh:   3.25rem;
  --kur-sys-typo-display-s-size:   2.25rem;  --kur-sys-typo-display-s-lh:   2.75rem;
  --kur-sys-typo-headline-l-size:  2rem;     --kur-sys-typo-headline-l-lh:  2.5rem;
  --kur-sys-typo-headline-m-size:  1.75rem;  --kur-sys-typo-headline-m-lh:  2.25rem;
  --kur-sys-typo-headline-s-size:  1.5rem;   --kur-sys-typo-headline-s-lh:  2rem;
  --kur-sys-typo-title-l-size:     1.375rem; --kur-sys-typo-title-l-lh:    1.75rem;
  --kur-sys-typo-title-m-size:     1rem;     --kur-sys-typo-title-m-lh:    1.5rem;
  --kur-sys-typo-title-s-size:     0.875rem; --kur-sys-typo-title-s-lh:    1.25rem;
  --kur-sys-typo-body-l-size:      1rem;     --kur-sys-typo-body-l-lh:     1.5rem;
  --kur-sys-typo-body-m-size:      0.875rem; --kur-sys-typo-body-m-lh:     1.25rem;
  --kur-sys-typo-body-s-size:      0.75rem;  --kur-sys-typo-body-s-lh:     1rem;
  --kur-sys-typo-label-l-size:     0.875rem; --kur-sys-typo-label-l-lh:    1.25rem; --kur-sys-typo-label-l-weight: 500;
  --kur-sys-typo-label-m-size:     0.75rem;  --kur-sys-typo-label-m-lh:    1rem;    --kur-sys-typo-label-m-weight: 500;

  /* ── Renkler (Dark = default, KUR mavisi merkezde) ───────── */
  /* Primary palette */
  --kur-sys-color-primary:                 #6690ff;
  --kur-sys-color-on-primary:              #051a4d;
  --kur-sys-color-primary-container:       #1f3760;
  --kur-sys-color-on-primary-container:    #d3e3fd;
  --kur-sys-color-primary-fixed:           #d3e3fd;
  --kur-sys-color-primary-fixed-dim:       #a8c7fa;

  /* Secondary (mavi yumuşak) */
  --kur-sys-color-secondary:               #7fc4ff;
  --kur-sys-color-on-secondary:            #003351;
  --kur-sys-color-secondary-container:     #00497a;
  --kur-sys-color-on-secondary-container:  #c2e7ff;

  /* Tertiary (yeşil — ok, success) */
  --kur-sys-color-tertiary:                #6dd58c;
  --kur-sys-color-on-tertiary:             #0a3818;
  --kur-sys-color-tertiary-container:      #0f5223;
  --kur-sys-color-on-tertiary-container:   #c4eed0;

  /* Error */
  --kur-sys-color-error:                   #f2b8b5;
  --kur-sys-color-on-error:                #601410;
  --kur-sys-color-error-container:         #8c1d18;
  --kur-sys-color-on-error-container:      #f9dedc;

  /* Surface stack (Material 3 elevated surfaces) */
  --kur-sys-color-background:              #06080c;
  --kur-sys-color-on-background:           #e9eef5;
  --kur-sys-color-surface:                 #06080c;
  --kur-sys-color-on-surface:              #e9eef5;
  --kur-sys-color-surface-dim:             #06080c;
  --kur-sys-color-surface-bright:          #1a2331;
  --kur-sys-color-surface-container-lowest: #04060a;
  --kur-sys-color-surface-container-low:   #0a0f17;
  --kur-sys-color-surface-container:       #0e131c;
  --kur-sys-color-surface-container-high:  #131b27;
  --kur-sys-color-surface-container-highest: #1a2331;
  --kur-sys-color-surface-variant:         #131b27;
  --kur-sys-color-on-surface-variant:      #aab5c4;
  --kur-sys-color-on-surface-low:          #788494;

  /* Outline */
  --kur-sys-color-outline:                 rgba(255,255,255,0.12);
  --kur-sys-color-outline-variant:         rgba(255,255,255,0.07);

  /* Inverse */
  --kur-sys-color-inverse-surface:         #e9eef5;
  --kur-sys-color-inverse-on-surface:      #131b27;
  --kur-sys-color-inverse-primary:         #1a40cc;

  /* Scrim */
  --kur-sys-color-scrim:                   rgba(0,0,0,0.55);

  /* Brand gradients (composer outline, mic, greeting) */
  --kur-sys-gradient-brand:    linear-gradient(135deg, #3366ff 0%, #6690ff 45%, #9d8bff 100%);
  --kur-sys-gradient-mic:      linear-gradient(135deg, #ad72ff 0%, #ff7dd2 100%);
  --kur-sys-gradient-greeting: linear-gradient(135deg, #6690ff 0%, #9d8bff 50%, #ff7dd2 100%);
  --kur-sys-gradient-outline-spin: conic-gradient(
    from var(--kur-spin-angle, 0deg),
    #3366ff 0%, #6690ff 25%, #9d8bff 50%, #ff7dd2 75%, #3366ff 100%
  );
}

/* Spin angle property — composer focus animasyonu için */
@property --kur-spin-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

/* ── LIGHT TEMA ─────────────────────────────────────────────── */
[data-theme="light"] {
  --kur-sys-color-primary:                 #1a40cc;
  --kur-sys-color-on-primary:              #ffffff;
  --kur-sys-color-primary-container:       #d3e3fd;
  --kur-sys-color-on-primary-container:    #051a4d;

  --kur-sys-color-secondary:               #00639b;
  --kur-sys-color-on-secondary:            #ffffff;
  --kur-sys-color-secondary-container:     #c2e7ff;
  --kur-sys-color-on-secondary-container:  #00497a;

  --kur-sys-color-tertiary:                #146c2e;
  --kur-sys-color-on-tertiary:             #ffffff;
  --kur-sys-color-tertiary-container:      #c4eed0;
  --kur-sys-color-on-tertiary-container:   #0a3818;

  --kur-sys-color-error:                   #b3261e;
  --kur-sys-color-on-error:                #ffffff;
  --kur-sys-color-error-container:         #f9dedc;
  --kur-sys-color-on-error-container:      #8c1d18;

  --kur-sys-color-background:              #f5f7fa;
  --kur-sys-color-on-background:           #0f1a25;
  --kur-sys-color-surface:                 #ffffff;
  --kur-sys-color-on-surface:              #0f1a25;
  --kur-sys-color-surface-dim:             #d3dbe5;
  --kur-sys-color-surface-bright:          #ffffff;
  --kur-sys-color-surface-container-lowest: #ffffff;
  --kur-sys-color-surface-container-low:   #f8fafd;
  --kur-sys-color-surface-container:       #f0f4f9;
  --kur-sys-color-surface-container-high:  #e9eef6;
  --kur-sys-color-surface-container-highest: #dde3ea;
  --kur-sys-color-surface-variant:         #e1e3e1;
  --kur-sys-color-on-surface-variant:      #384552;
  --kur-sys-color-on-surface-low:          #637180;

  --kur-sys-color-outline:                 #747775;
  --kur-sys-color-outline-variant:         #c4c7c5;

  --kur-sys-color-inverse-surface:         #303030;
  --kur-sys-color-inverse-on-surface:      #f2f2f2;
  --kur-sys-color-inverse-primary:         #a8c7fa;

  --kur-sys-color-scrim:                   rgba(0,0,0,0.40);

  --kur-sys-elevation-1:  0 1px 2px 0 rgba(60,64,67,0.30), 0 1px 3px 1px rgba(60,64,67,0.15);
  --kur-sys-elevation-2:  0 1px 2px 0 rgba(60,64,67,0.30), 0 2px 6px 2px rgba(60,64,67,0.15);
  --kur-sys-elevation-3:  0 4px 8px 3px rgba(60,64,67,0.15), 0 1px 3px 0 rgba(60,64,67,0.30);
}

/* ── Yardımcı sınıflar (utility) ────────────────────────────── */

/* State layer overlay — interactive butonlara ekle */
.kur-state-layer {
  position: relative;
  isolation: isolate;
}
.kur-state-layer::before {
  content: "";
  position: absolute; inset: 0;
  background: currentColor;
  opacity: 0;
  pointer-events: none;
  border-radius: inherit;
  transition: opacity var(--kur-sys-motion-duration-short3) var(--kur-sys-motion-easing-standard);
  z-index: -1;
}
.kur-state-layer:hover::before    { opacity: var(--kur-sys-state-hover-opacity); }
.kur-state-layer:focus-visible::before { opacity: var(--kur-sys-state-focus-opacity); }
.kur-state-layer:active::before   { opacity: var(--kur-sys-state-pressed-opacity); }
.kur-state-layer:disabled::before,
.kur-state-layer[aria-disabled="true"]::before { opacity: 0; }

/* Gradient text — greeting için */
.kur-gradient-text {
  background: var(--kur-sys-gradient-greeting);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* Şu anki KUR --accent vb. değişkenleri tokenlara map'le (geriye uyum) */
:root {
  --accent:        var(--kur-sys-color-primary);
  --accent-bright: var(--kur-sys-color-primary-fixed-dim);
  --accent-deep:   var(--kur-sys-color-inverse-primary);
  --accent-soft:   color-mix(in srgb, var(--kur-sys-color-primary) 11%, transparent);
  --accent-line:   color-mix(in srgb, var(--kur-sys-color-primary) 28%, transparent);
}

/* Reduced motion — tüm KUR animasyonlarını kısalt */
@media (prefers-reduced-motion: reduce) {
  :root {
    --kur-sys-motion-duration-short1:  1ms;
    --kur-sys-motion-duration-short2:  1ms;
    --kur-sys-motion-duration-short3:  1ms;
    --kur-sys-motion-duration-short4:  1ms;
    --kur-sys-motion-duration-medium1: 1ms;
    --kur-sys-motion-duration-medium2: 1ms;
    --kur-sys-motion-duration-medium3: 1ms;
    --kur-sys-motion-duration-medium4: 1ms;
    --kur-sys-motion-duration-long1:   1ms;
    --kur-sys-motion-duration-long2:   1ms;
    --kur-sys-motion-duration-long3:   1ms;
    --kur-sys-motion-duration-long4:   1ms;
  }
}