/* ==========================================================================
   DentPlain — tasarim token'lari
   Tek dogruluk kaynagi. Buradaki degerler disinda renk/olcu yazilmaz.
   Renk skalasi urunun kendi app/globals.css dosyasindan birebir alindi.
   ========================================================================== */

:root {
  color-scheme: light;

  /* --- Marka skalasi (hex tabani; oklch katmani asagida) ----------------- */
  --brand-50:  #E6F8F9;
  --brand-100: #CDF2F4;
  --brand-200: #A1E8ED;
  --brand-300: #63D6E1;
  --brand-400: #15B8C8;
  --brand-500: #009EB1;
  --brand-600: #00899E;  /* marka rengi */
  --brand-700: #00768A;  /* etkilesimli yuzeyler — beyazla 5.31:1 (AA) */
  --brand-800: #016170;
  --brand-900: #114F5B;
  --brand-950: #08343D;

  /* --- Logo renkleri -----------------------------------------------------
     Sadece logo isaretinde kullanilir. Beyaz yaziyla kontrasti 2.81:1,
     yani buton zemini veya metin rengi olarak KULLANILMAZ. */
  --logo-cyan:      #0FA8CB;
  --logo-cyan-mid:  #43BFD8;
  --logo-cyan-soft: #4CC5DC;
  --logo-cyan-pale: #B8E5F0;
  --logo-gray:      #707680;

  /* --- Notr skala --------------------------------------------------------- */
  --ink-0:   #FFFFFF;
  --ink-50:  #FAFAFA;
  --ink-100: #F5F5F5;
  --ink-200: #E5E5E5;
  --ink-300: #D4D4D4;
  --ink-400: #A1A1A1;
  --ink-500: #737373;
  --ink-600: #525252;
  --ink-700: #404040;
  --ink-800: #262626;
  --ink-900: #171717;
  --ink-950: #0A0A0A;

  /* --- Semantik — sadece urun ekrani anlatimlarinda, dekor olarak degil --- */
  --success: #009966;
  --danger:  #E7000B;
  --warn:    #FE9A00;

  /* Semantik renk METIN olarak kullanildiginda (zemin/nokta degil) */
  --success-text: #007A55;
  --danger-text:  #C10007;
  --warn-text:    #A14000;

  /* --- Rol token'lari (acik tema) ----------------------------------------- */
  --bg:            var(--ink-0);
  --bg-subtle:     var(--ink-50);
  --bg-muted:      var(--ink-100);
  --surface:       var(--ink-0);
  --surface-raised:var(--ink-0);
  --text:          var(--ink-900);
  --text-soft:     var(--ink-600);
  --text-faint:    var(--ink-500);
  --text-on-brand: var(--ink-0);
  --border:        var(--ink-200);
  --border-strong: var(--ink-300);
  --accent:        var(--brand-700);
  --accent-hover:  var(--brand-800);
  --accent-soft:   var(--brand-50);
  --accent-text:   var(--brand-700);
  --ring:          var(--brand-600);

  /* --- Bosluk: 4px tabanli ------------------------------------------------ */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;

  /* --- Kose yaricapi ------------------------------------------------------ */
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   16px;
  --r-xl:   24px;
  --r-pill: 999px;

  /* --- Tipografi: akiskan olcek ------------------------------------------- */
  --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --t-xs:   13px;
  --t-sm:   14px;
  --t-base: 16px;
  --t-md:   18px;
  --t-lg:   clamp(19px, 1.2vw + 15px, 21px);
  --t-xl:   clamp(23px, 2vw + 17px, 28px);
  --t-2xl:  clamp(28px, 3vw + 18px, 36px);
  --t-3xl:  clamp(34px, 4.5vw + 18px, 48px);
  --t-4xl:  clamp(40px, 6vw + 18px, 64px);

  --lh-tight: 1.15;
  --lh-snug:  1.35;
  --lh-base:  1.6;

  /* --- Golge: 3 kademe, neon yok ------------------------------------------ */
  --shadow-1: 0 1px 2px rgba(10, 10, 10, .06);
  --shadow-2: 0 4px 12px rgba(10, 10, 10, .08);
  --shadow-3: 0 16px 40px rgba(10, 10, 10, .12);

  /* --- Hareket ------------------------------------------------------------ */
  --ease:     cubic-bezier(.4, 0, .2, 1);
  --dur-fast: 150ms;
  --dur-base: 250ms;
  --dur-slow: 400ms;

  /* --- Ikon-metin boslugu (header ve buton etiketleri) ---------------------
     Tek yerden yonetilir; bkz. CLAUDE.md §15. `--sp-2` (8px) ikon yaninda
     fazla geliyordu: ikon zaten kendi cizim payini tasiyor. */
  --bosluk-ikon-metin: 6px;   /* onde duran ikon ile etiket arasi */
  --bosluk-metin-ok:   4px;   /* etiket ile acilir ok arasi */
  --olcu-acilir-ok:    11px;  /* acilir ok puntosu */

  /* --- Duzen -------------------------------------------------------------- */
  --container-max:     1280px;
  --container-gutter:  var(--sp-4);
  --header-height:     72px;
}

/* --- oklch katmani: destekleyen tarayicida daha genis gamut --------------- */
@supports (color: oklch(0.5 0.1 200)) {
  :root {
    --brand-50:  oklch(0.967 0.019 200.873);
    --brand-100: oklch(0.936 0.038 200.723);
    --brand-200: oklch(0.886 0.071 201.604);
    --brand-300: oklch(0.815 0.105 203.726);
    --brand-400: oklch(0.717 0.120 205.902);
    --brand-500: oklch(0.639 0.115 208.485);
    --brand-600: oklch(0.575 0.110 211.484);
    --brand-700: oklch(0.518 0.098 213.803);
    --brand-800: oklch(0.453 0.079 213.187);
    --brand-900: oklch(0.397 0.063 213.364);
    --brand-950: oklch(0.301 0.048 214.855);
  }
}

/* --- Koyu tema ------------------------------------------------------------
   Iki yoldan da acilir: kullanici secimi [data-theme] ve sistem tercihi.    */
:root[data-theme="dark"] {
  color-scheme: dark;

  --bg:            var(--ink-950);
  --bg-subtle:     var(--ink-900);
  --bg-muted:      var(--ink-800);
  --surface:       var(--ink-900);
  --surface-raised:var(--ink-800);
  --text:          var(--ink-50);
  --text-soft:     var(--ink-300);
  --text-faint:    var(--ink-400);
  --text-on-brand: var(--ink-950);
  --border:        rgba(255, 255, 255, .10);
  --border-strong: rgba(255, 255, 255, .18);
  --accent:        var(--brand-400);
  --accent-hover:  var(--brand-300);
  --accent-soft:   rgba(21, 184, 200, .12);
  --accent-text:   var(--brand-300);
  --ring:          var(--brand-400);

  --success-text: #00D492;
  --danger-text:  #FF6467;
  --warn-text:    #FFB900;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, .40);
  --shadow-2: 0 4px 12px rgba(0, 0, 0, .50);
  --shadow-3: 0 16px 40px rgba(0, 0, 0, .60);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --bg:            var(--ink-950);
    --bg-subtle:     var(--ink-900);
    --bg-muted:      var(--ink-800);
    --surface:       var(--ink-900);
    --surface-raised:var(--ink-800);
    --text:          var(--ink-50);
    --text-soft:     var(--ink-300);
    --text-faint:    var(--ink-400);
    --text-on-brand: var(--ink-950);
    --border:        rgba(255, 255, 255, .10);
    --border-strong: rgba(255, 255, 255, .18);
    --accent:        var(--brand-400);
    --accent-hover:  var(--brand-300);
    --accent-soft:   rgba(21, 184, 200, .12);
    --accent-text:   var(--brand-300);
    --ring:          var(--brand-400);

    --success-text: #00D492;
    --danger-text:  #FF6467;
    --warn-text:    #FFB900;

    --shadow-1: 0 1px 2px rgba(0, 0, 0, .40);
    --shadow-2: 0 4px 12px rgba(0, 0, 0, .50);
    --shadow-3: 0 16px 40px rgba(0, 0, 0, .60);
  }
}

@media (min-width: 1024px) {
  :root { --container-gutter: 60px; }
}