/* =================================================================
   RANDEVUPS · THEME TOKENS  —  "Porcelain & Tosca"
   Tek kaynak: light + dark + legacy alias'lar + ölçek tokenları.
   Sıra: bu dosya ui.css/public.css'ten ÖNCE yüklenir.
   ================================================================= */

:root{
  color-scheme: light;

  /* ---- Surfaces ---- */
  --bg:        #F5F6F7;
  --surface:   #FFFFFF;
  --surface-2: #EFF1F2;
  --surface-3: #E7EAEC;

  /* ---- Text ---- */
  --text:   #15191D;
  --text-2: #4C555E;
  --text-3: #6E7780;

  /* ---- Hairlines ---- */
  --hairline:   #E5E8EA;
  --hairline-2: #D5DADD;

  /* ---- Accent (tosca) ---- */
  --accent-50:  #ECFAFD;
  --accent-100: #D3F3FA;
  --accent-200: #A8E6F2;
  --accent-300: #6ED3E7;
  --accent-400: #38BCD8;
  --accent-500: #09A9CA;   /* marka toscası — ikon/dekoratif/büyük dolgu */
  --accent-600: #0E7490;   /* link/metin vurgusu + primary buton (AA) */
  --accent-700: #0C5F77;   /* hover */

  /* ---- Primary button ---- */
  --btn-bg:  var(--accent-600);
  --btn-ink: #FFFFFF;

  /* ---- Status ---- */
  --success: #1B7A4E; --success-bg: #E5F3EB;
  --warning: #92400E; --warning-bg: #FAF0DE;
  --danger:  #B42318; --danger-bg:  #FBEAE7;
  --info:    #4C53BC; --info-bg:    #ECEEFB;

  /* ---- Tints (avatar / kategori / takvim event) ---- */
  --tint-1:#DDF3F8; --tint-1-ink:#0E7490;   /* cyan */
  --tint-2:#E3F5EC; --tint-2-ink:#1B6B47;   /* mint */
  --tint-3:#EAE8FB; --tint-3-ink:#4C44B5;   /* lavanta */
  --tint-4:#FCE7F0; --tint-4-ink:#9D2463;   /* gül */
  --tint-5:#FBF0DA; --tint-5-ink:#8A5A0B;   /* amber */
  --tint-6:#E8ECF2; --tint-6-ink:#3E4C66;   /* arduvaz */

  /* ---- Shadows (nötr) ---- */
  --shadow-1: 0 1px 2px rgba(21,25,29,.05);
  --shadow-2: 0 1px 2px rgba(21,25,29,.05), 0 12px 32px -12px rgba(21,25,29,.10);
  --shadow-3: 0 1px 2px rgba(21,25,29,.05), 0 24px 64px -24px rgba(21,25,29,.22);
  --shadow-card-inset: none;

  /* ---- Focus ring ---- */
  --ring: 0 0 0 3px color-mix(in srgb, var(--accent-500) 30%, transparent);

  /* ---- Sidebar (admin) ---- */
  --sb-bg:     var(--surface);
  --sb-ink:    var(--text-2);
  --sb-ink-2:  var(--text);
  --sb-mute:   var(--text-3);
  --sb-active-bg: var(--accent-50);
  --sb-active-ink: var(--accent-600);
  --sb-hairline:  var(--hairline);

  /* ---- Type ---- */
  --font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-ui:      var(--font-body);   /* alias — şablonlar var(--font-ui) kullanıyor */
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;

  --fs-display: clamp(42px, 5.2vw, 72px);
  --fs-h1:      clamp(30px, 3.4vw, 44px);
  --fs-h2:      clamp(22px, 2.2vw, 28px);
  --fs-h3:      18px;
  --fs-body:    14.5px;
  --fs-sm:      13px;
  --fs-caption: 12px;

  /* ---- Spacing scale ---- */
  --sp-1:4px;  --sp-2:8px;  --sp-3:12px; --sp-4:16px; --sp-5:20px;
  --sp-6:24px; --sp-7:32px; --sp-8:40px; --sp-9:48px; --sp-10:64px;
  --sp-11:80px; --sp-12:96px; --sp-13:128px;

  /* ---- Radius ---- */
  --r-xs:8px; --r-sm:12px; --r-md:16px; --r-lg:20px; --r-pill:999px;

  /* ---- Motion ---- */
  --dur-xs:120ms; --dur-sm:200ms; --dur-md:320ms; --dur-lg:560ms;
  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-inout: cubic-bezier(.65,.05,.36,1);

  /* ================= LEGACY ALIAS'LAR (geçiş güvenlik ağı) ================= */
  --brand-50:var(--accent-50);   --brand-100:var(--accent-100); --brand-200:var(--accent-200);
  --brand-300:var(--accent-300); --brand-400:var(--accent-400); --brand-500:var(--accent-500);
  --brand-600:var(--accent-600); --brand-700:var(--accent-700);
  --peach-100:var(--accent-50);  --peach-200:var(--accent-100); --peach-400:var(--accent-300);
  --peach-500:var(--accent-500);
  --cream:var(--bg); --cream-2:var(--surface-2);
  --ink:var(--text); --ink-2:var(--text-2); --mute:var(--text-3); --mute-2:var(--text-3);
  --line:var(--hairline);
  --radius-sm:var(--r-sm); --radius:var(--r-md); --radius-lg:var(--r-lg); --radius-xl:var(--r-lg);
  --shadow-sm:var(--shadow-1); --shadow:var(--shadow-2); --shadow-lg:var(--shadow-3);
  --shadow-cta:var(--shadow-2);
}

/* ============================ DARK THEME ============================ */
html[data-theme="dark"]{
  color-scheme: dark;

  --bg:        #0C1517;
  --surface:   #131D20;
  --surface-2: #1A262A;
  --surface-3: #223036;

  --text:   #ECF1F2;
  --text-2: #AEBABF;
  --text-3: #84919A;

  --hairline:   #233136;
  --hairline-2: #2E4046;

  /* accent dark'ta bir ton açılır; link/metin için 400 */
  --accent-600: #38BCD8;
  --accent-700: #6ED3E7;
  --btn-bg:  #38BCD8;
  --btn-ink: #07171A;

  /* açık tint'ler dark'ta translucent teal'e çevrilir — yoksa hover'da
     neredeyse-beyaz zemin + açık metin okunmaz hale gelir (accent-50 #ECFAFD) */
  --accent-50:  rgba(56,188,216,.10);
  --accent-100: rgba(56,188,216,.16);
  --accent-200: rgba(56,188,216,.26);

  --success: #57C786; --success-bg: rgba(87,199,134,.14);
  --warning: #E8A75D; --warning-bg: rgba(232,167,93,.14);
  --danger:  #F08577; --danger-bg:  rgba(240,133,119,.14);
  --info:    #9BA3EC; --info-bg:    rgba(155,163,236,.14);

  --tint-1:rgba(56,188,216,.16); --tint-1-ink:#7FDDEF;
  --tint-2:rgba(87,199,134,.16); --tint-2-ink:#7EDBA6;
  --tint-3:rgba(124,118,236,.18);--tint-3-ink:#ABA6F4;
  --tint-4:rgba(225,118,170,.18);--tint-4-ink:#F1A8CC;
  --tint-5:rgba(220,160,70,.18); --tint-5-ink:#EDC587;
  --tint-6:rgba(120,140,180,.20);--tint-6-ink:#AEC0DE;

  --shadow-1: 0 1px 2px rgba(0,0,0,.4);
  --shadow-2: 0 2px 8px rgba(0,0,0,.35), 0 18px 48px -16px rgba(0,0,0,.5);
  --shadow-3: 0 2px 8px rgba(0,0,0,.4), 0 28px 72px -24px rgba(0,0,0,.6);
  --shadow-card-inset: inset 0 1px 0 rgba(255,255,255,.04);

  --sb-bg:     var(--surface);
  --sb-ink:    var(--text-2);
  --sb-ink-2:  var(--text);
  --sb-mute:   var(--text-3);
  --sb-active-bg: rgba(56,188,216,.12);
  --sb-active-ink: var(--accent-600);
  --sb-hairline:  var(--hairline);
}

/* Tema geçiş crossfade'i (theme.js .theme-anim ekler/çıkarır) */
html.theme-anim, html.theme-anim *{
  transition: background-color .3s ease, border-color .3s ease, color .3s ease,
              fill .3s ease, box-shadow .3s ease !important;
}

/* ====================== REDUCED MOTION KILL-SWITCH ====================== */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}