/**
 * Collins — Design Tokens
 * Tüm uygulamalar bu dosyayı import eder.
 * Hiçbir uygulama kendi renk/font/boşluk değerini tanımlamaz.
 */

:root {

  /* ── RENKLER ─────────────────────────────────────────────── */

  /* Zemin */
  --color-bg:            #0f0e0c;
  --color-surface:       #1a1915;
  --color-surface-2:     #222118;
  --color-surface-hover: rgba(255,255,255,0.05);
  --color-border:        #2e2c26;
  --color-border-light:  #3d3b34;

  /* Marka */
  --color-gold:      #c9a84c;
  --color-gold-dim:  #7a6330;
  --color-gold-pale: #f0e2b8;

  /* Metin */
  --color-text:       #e8e2d4;
  --color-text-muted: #7a7468;
  --color-text-faint: #4a4840;

  /* Buton üzeri metin (accent arka plan) */
  --color-on-accent: #0f0e0c;

  /* Alias'lar — chair.css ve diğer app'lerin kullandığı isimler */
  --color-text-primary:   var(--color-text);
  --color-text-secondary: var(--color-text-muted);
  --color-primary:        var(--color-gold);

  /* Durum */
  --color-success:      #4caf6e;
  --color-warning:      #cf834c;
  --color-danger:       #cf4c4c;
  --color-info:         #4c8fcf;

  /* Durum arka plan (soluk) */
  --color-success-bg:   rgba(76,175,110,0.08);
  --color-warning-bg:   rgba(207,131,76,0.08);
  --color-danger-bg:    rgba(207,76,76,0.08);
  --color-info-bg:      rgba(76,143,207,0.08);

  /* ── TİPOGRAFİ ───────────────────────────────────────────── */

  --font-serif:   'Cormorant Garamond', 'Georgia', 'Times New Roman', serif;
  --font-mono:    'Courier New', 'Courier', monospace;
  --font-sans:    system-ui, -apple-system, sans-serif;

  /* Boyutlar */
  --text-xs:   0.65rem;
  --text-sm:   0.75rem;
  --text-base: 0.875rem;
  --text-md:   1rem;
  --text-lg:   1.15rem;
  --text-xl:   1.4rem;
  --text-2xl:  1.8rem;
  --text-3xl:  2.2rem;

  /* Satır yüksekliği */
  --leading-tight:  1.3;
  --leading-normal: 1.6;
  --leading-loose:  1.9;

  /* Harf aralığı */
  --tracking-tight:  0;
  --tracking-wide:   0.08em;
  --tracking-wider:  0.15em;
  --tracking-widest: 0.25em;

  /* ── BOŞLUK ──────────────────────────────────────────────── */

  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;

  /* ── BORDER ──────────────────────────────────────────────── */

  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-full: 9999px;

  /* ── GÖLGELEr ────────────────────────────────────────────── */

  --shadow-sm:  0 1px 3px rgba(0,0,0,0.4);
  --shadow-md:  0 4px 12px rgba(0,0,0,0.5);
  --shadow-lg:  0 8px 24px rgba(0,0,0,0.6);

  /* ── GEÇİŞ ───────────────────────────────────────────────── */

  --transition-fast:   0.12s ease;
  --transition-normal: 0.2s ease;
  --transition-slow:   0.35s ease;

  /* ── Z-INDEX ─────────────────────────────────────────────── */

  --z-base:    0;
  --z-above:   10;
  --z-modal:   100;
  --z-toast:   200;
  --z-tooltip: 300;

  /* ── LAYOUT ──────────────────────────────────────────────── */

  --header-height:    64px;
  --sidebar-width:    220px;
  --content-max:      1200px;

}

/* ── UYGULAMA RENK TONU (her app override edebilir) ────────── */
/* Chair  → sıcak altın (default)                              */
/* Table  → soğuk mavi-yeşil                                   */
/* Ink    → derin mor                                          */
/* Wash   → açık mavi                                          */
/* Fix    → turuncu-gri                                        */
/* Slot   → yeşil                                              */
/* Paw    → sıcak turuncu                                      */

/* ── DARK MODE — explicit override (sistem açık temayı ezer) ── */
[data-mode="dark"] {
  --color-bg:            #0f0e0c;
  --color-surface:       #1a1915;
  --color-surface-2:     #222118;
  --color-surface-hover: rgba(255,255,255,0.05);
  --color-border:        #2e2c26;
  --color-border-light:  #3d3b34;
  --color-text:          #e8e2d4;
  --color-text-muted:    #7a7468;
  --color-text-faint:    #4a4840;
  --color-on-accent:     #0f0e0c;
  --color-text-primary:  #e8e2d4;
  --color-text-secondary:#7a7468;
  --color-gold:          #c9a84c;
  --color-gold-dim:      #7a6330;
  --color-gold-pale:     #f0e2b8;
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.4);
  --shadow-md:  0 4px 12px rgba(0,0,0,0.5);
  --shadow-lg:  0 8px 24px rgba(0,0,0,0.6);
}

/* ── LIGHT MODE ─────────────────────────────────────────────── */
/* HTML elemanına data-mode="light" atandığında devreye girer.  */

[data-mode="light"] {
  --color-bg:            #f5f2ec;
  --color-surface:       #ffffff;
  --color-surface-2:     #eeebe2;
  --color-surface-hover: rgba(0,0,0,0.04);
  --color-border:        #dedad0;
  --color-border-light:  #ccc8bc;

  --color-text:          #1e1c18;
  --color-text-muted:    #7a7468;
  --color-text-faint:    #b0ab9e;

  /* Gold biraz koyulaşır — açık arka planda daha iyi kontrast */
  --color-gold:          #b8922e;
  --color-gold-dim:      #8a6e22;
  --color-gold-pale:     #5a4010;

  --color-on-accent:     #ffffff;

  --shadow-sm:  0 1px 3px rgba(0,0,0,0.10);
  --shadow-md:  0 4px 12px rgba(0,0,0,0.12);
  --shadow-lg:  0 8px 24px rgba(0,0,0,0.16);
}

/* ── UYGULAMA RENK TONU (her app override edebilir) ────────── */

.theme-chair  { --color-accent: #c9a84c; --color-accent-dim: #7a6330; }
.theme-table  { --color-accent: #4c8fcf; --color-accent-dim: #2e5a80; }
.theme-ink    { --color-accent: #8f6abf; --color-accent-dim: #5a3d80; }
.theme-wash   { --color-accent: #4cafc9; --color-accent-dim: #2e7a8f; }
.theme-fix    { --color-accent: #cf834c; --color-accent-dim: #80502e; }
.theme-slot   { --color-accent: #4caf6e; --color-accent-dim: #2e7a45; }
.theme-paw    { --color-accent: #cf9a4c; --color-accent-dim: #80602e; }
.theme-shelf  { --color-accent: #cf6a8f; --color-accent-dim: #80405a; }
.theme-bloom  { --color-accent: #af6acf; --color-accent-dim: #6a3d80; }
.theme-cut    { --color-accent: #cf4c4c; --color-accent-dim: #802e2e; }
.theme-brew   { --color-accent: #8f7a4c; --color-accent-dim: #5a4c2e; }
.theme-bake   { --color-accent: #cf9a6a; --color-accent-dim: #80602e; }