/* ==========================================================================
   Mezzat - Tasarım Token'ları
   Renkler moodboard (Codebyte SaaS Admin Dashboard) görsellerinden ve
   ana dizindeki Mezzat logosundan örneklenmiştir.
   Logodan örneklenen lacivert: #223470 (koyu) / #354993 (açık dalga)
   Bu dosya ileride Flutter theme dosyasına birebir aktarılabilecek biçimde
   tek merkezde tutulur.
   ========================================================================== */

:root {
  /* ---- Marka lacivert / kobalt ------------------------------------------ */
  --color-navy-900: #131d44;
  --color-navy-800: #1a2757;
  --color-navy-700: #223470; /* logo çekirdek rengi */
  --color-navy-600: #2b4290;
  --color-navy-500: #354993; /* logo dalga rengi */

  --color-primary-700: #1d47b8;
  --color-primary-600: #2454c6;
  --color-primary-500: #2f63e9; /* birincil aksiyon - moodboard buton mavisi */
  --color-primary-400: #5b86f5;
  --color-primary-300: #93b0fa;
  --color-primary-100: #dbe6ff;
  --color-primary-50: #eef3ff;

  /* ---- Durum renkleri ---------------------------------------------------- */
  --color-success: #12b76a;
  --color-success-soft: #e3f8ee;
  --color-warning: #f5a524;
  --color-warning-soft: #fff2dc;
  --color-danger: #f33f64;
  --color-danger-soft: #ffe8ed;
  --color-info: #35bde8;
  --color-info-soft: #e2f6fd;
  --color-purple: #7257e8;
  --color-purple-soft: #eeeaff;

  /* Kampanya sarısı - moodboard'daki "How codebytes control your task?" kartı */
  --color-accent-yellow: #ffc42f;
  --color-accent-yellow-deep: #f0ae00;

  /* ---- Açık tema yüzeyleri ---------------------------------------------- */
  --color-bg: #f4f6fb;
  --color-bg-deep: #eef1f8;
  --color-surface: #ffffff;
  --color-surface-soft: #fafbfe;
  --color-surface-sunken: #f0f3f9; /* arama inputu, boş alanlar */
  --color-surface-inverse: #171b25;

  --color-text: #161922;
  --color-text-2: #454c5a;
  --color-text-muted: #8b909d;
  --color-text-faint: #a8adb9;
  --color-text-on-brand: #ffffff;

  --color-border: #e8ecf4;
  --color-border-strong: #d7dde8;
  --color-border-input: #dfe4ee;

  /* Cam / overlay */
  --color-overlay: rgba(17, 22, 36, 0.44);
  --color-glass: rgba(255, 255, 255, 0.72);
  --color-glass-border: rgba(255, 255, 255, 0.7);

  /* ---- Gölgeler (açık temada hafif ve geniş yayılımlı) ------------------- */
  --shadow-xs: 0 1px 2px rgba(20, 26, 44, 0.05);
  --shadow-sm: 0 1px 2px rgba(20, 26, 44, 0.05), 0 4px 12px -6px rgba(20, 26, 44, 0.1);
  --shadow-md: 0 2px 4px rgba(20, 26, 44, 0.04), 0 12px 28px -12px rgba(20, 26, 44, 0.14);
  --shadow-lg: 0 4px 8px rgba(20, 26, 44, 0.04), 0 24px 48px -20px rgba(20, 26, 44, 0.2);
  --shadow-brand: 0 8px 20px -8px rgba(47, 99, 233, 0.5);
  --shadow-focus: 0 0 0 3px rgba(47, 99, 233, 0.22);

  /* ---- Yarıçaplar -------------------------------------------------------- */
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 10px; /* input, küçük buton */
  --radius-lg: 12px; /* iç kartlar, avatar kutusu */
  --radius-xl: 16px; /* ana kart - moodboard ölçüsü */
  --radius-2xl: 20px; /* hero / geniş panel */
  --radius-pill: 999px;

  /* ---- 4px tabanlı boşluk sistemi ---------------------------------------- */
  --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;

  /* ---- Tipografi --------------------------------------------------------- */
  --font-sans: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;

  --fs-micro: 11px;
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-base: 14px;
  --fs-md: 15px;
  --fs-lg: 16px;
  --fs-xl: 18px;
  --fs-2xl: 20px;
  --fs-3xl: 24px;
  --fs-4xl: 28px;
  --fs-5xl: 34px;
  --fs-hero: 44px;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --lh-tight: 1.2;
  --lh-snug: 1.35;
  --lh-normal: 1.55;
  --lh-relaxed: 1.7;

  /* ---- Ölçüler ----------------------------------------------------------- */
  --container: 1280px;
  --container-wide: 1520px;
  --header-h: 72px;
  --header-h-mobile: 60px;
  --bottomnav-h: 62px;
  --sidebar-w: 260px;
  --filter-w: 280px;

  /* ---- Hareket ----------------------------------------------------------- */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 150ms;
  --dur: 220ms;
  --dur-slow: 300ms;

  --z-header: 40;
  --z-bottomnav: 45;
  --z-drawer: 60;
  --z-modal: 70;
  --z-toast: 80;

  color-scheme: light;
}

/* ==========================================================================
   Koyu tema - saf siyah değil, moodboard'daki kömür tonları.
   Açık temanın ters çevrilmiş hâli değildir: yüzeyler, kenarlıklar ve
   durum renkleri ayrı ayrı dengelenmiştir.
   ========================================================================== */

[data-theme="dark"] {
  --color-bg: #0e0f13;
  --color-bg-deep: #0a0b0e;
  --color-surface: #16181d;
  --color-surface-soft: #1b1e24;
  --color-surface-sunken: #22262e;
  --color-surface-inverse: #f3f5f9;

  --color-text: #f2f4f8;
  --color-text-2: #c2c8d2;
  --color-text-muted: #8b919d;
  --color-text-faint: #6b7280;
  --color-text-on-brand: #ffffff;

  --color-border: #272b33;
  --color-border-strong: #343944;
  --color-border-input: #2f343d;

  /* Koyu temada mavi vurgu canlı kalmalı */
  --color-primary-500: #4d7bff;
  --color-primary-600: #3d6bf5;
  --color-primary-400: #7fa1ff;
  --color-primary-100: #1e2b52;
  --color-primary-50: #18203a;

  --color-navy-700: #2a3d80;
  --color-navy-800: #1f2c5c;

  /* Durum renkleri koyu zeminde kontrast için bir tık açıldı */
  --color-success: #2ee08a;
  --color-success-soft: #123027;
  --color-warning: #ffb648;
  --color-warning-soft: #33260f;
  --color-danger: #ff5c7c;
  --color-danger-soft: #35161f;
  --color-info: #4ecdf0;
  --color-info-soft: #102a33;
  --color-purple: #8f79ff;
  --color-purple-soft: #221d3d;

  --color-accent-yellow: #ffc42f;
  --color-accent-yellow-deep: #d99e00;

  --color-overlay: rgba(4, 6, 12, 0.68);
  --color-glass: rgba(31, 35, 43, 0.72);
  --color-glass-border: rgba(255, 255, 255, 0.08);

  /* Koyu temada gölge yerine yüzey + kenarlık farkı öncelikli */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.45);
  --shadow-md: 0 8px 24px -14px rgba(0, 0, 0, 0.8);
  --shadow-lg: 0 20px 44px -22px rgba(0, 0, 0, 0.9);
  --shadow-brand: 0 8px 20px -10px rgba(77, 123, 255, 0.55);
  --shadow-focus: 0 0 0 3px rgba(77, 123, 255, 0.32);

  color-scheme: dark;
}