/*
  Puhu.app tasarım token'ları — logo paletinden türetilmiştir
  (lacivert #13263f / #071531, altın #cb9b22 / #be8c1c).
  Bootstrap grid/utility altyapısının üzerine oturur; bileşen stilleri
  bu değişkenleri kullanır (components.css, layout.css, calendar.css).
*/

:root {
  /* ---- Lacivert (ana renk) skalası ---- */
  --navy-50: #eef2f7;
  --navy-100: #dbe3ee;
  --navy-200: #b3c2d9;
  --navy-300: #8098bd;
  --navy-400: #52719c;
  --navy-500: #2f4e78;
  --navy-600: #1a3358;
  --navy-700: #13263f; /* logo taban */
  --navy-800: #0d1c30;
  --navy-900: #071531; /* logo en koyu */
  --navy-950: #040c1f;

  /* ---- Altın (vurgu) skalası ---- */
  --gold-50: #fdf6e6;
  --gold-100: #faebc0;
  --gold-200: #f3d786;
  --gold-300: #e9c15a;
  --gold-400: #dcac37;
  --gold-500: #cb9b22; /* logo taban */
  --gold-600: #be8c1c; /* logo koyu ton */
  --gold-700: #9c7217;
  --gold-800: #7a5812;
  --gold-900: #5c420e;

  /* ---- Nötr skala (soğuk, laciverte yakın) ---- */
  --gray-0: #ffffff;
  --gray-50: #f7f8fa;
  --gray-100: #eef1f5;
  --gray-200: #e2e6ed;
  --gray-300: #c9d0dc;
  --gray-400: #a4adbe;
  --gray-500: #7c869c;
  --gray-600: #5c6680;
  --gray-700: #424a61;
  --gray-800: #2b3244;
  --gray-900: #1a2030;

  /* ---- Semantik renkler ---- */
  --success: #1f9d63;
  --success-light: #e3f7ec;
  --success-dark: #157347;
  --warning: #d97706;
  --warning-light: #fef3e2;
  --warning-dark: #b45f04;
  --danger: #dc2626;
  --danger-light: #fdeaea;
  --danger-dark: #b91c1c;
  --info: #2563eb;
  --info-light: #e8f0fe;
  --info-dark: #1d4ed8;

  /* ---- Rol tabanlı token'lar (ışık modu) ---- */
  --color-primary: var(--navy-700);
  --color-primary-hover: var(--navy-600);
  --color-primary-active: var(--navy-800);
  --color-primary-contrast: var(--gray-0);
  --color-accent: var(--gold-500);
  --color-accent-hover: var(--gold-600);
  --color-accent-contrast: var(--navy-900);

  --color-bg: var(--gray-50);
  --color-surface: var(--gray-0);
  --color-surface-raised: var(--gray-0);
  --color-surface-sunken: var(--gray-100);
  --color-border: var(--gray-200);
  --color-border-strong: var(--gray-300);

  --color-text: var(--navy-900);
  --color-text-muted: var(--gray-600);
  --color-text-subtle: var(--gray-500);
  --color-text-on-primary: var(--gray-0);
  --color-text-on-accent: var(--navy-900);
  --color-link: var(--navy-600);

  /* Panel app-shell'e özel */
  --sidebar-bg: var(--navy-900);
  --sidebar-bg-active: var(--navy-800);
  --sidebar-text: rgba(255, 255, 255, 0.72);
  --sidebar-text-active: var(--gray-0);
  --sidebar-icon-active: var(--gold-400);
  --sidebar-border: rgba(255, 255, 255, 0.08);
  --sidebar-width: 264px;
  --sidebar-width-collapsed: 76px;
  --topbar-height: 68px;
  --topbar-bg: var(--gray-0);
  --topbar-border: var(--gray-200);

  /* ---- Tipografi ---- */
  --font-display: "Plus Jakarta Sans", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --fs-xs: 0.75rem;
  --fs-sm: 0.8125rem;
  --fs-base: 0.9375rem;
  --fs-md: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.375rem;
  --fs-2xl: 1.75rem;
  --fs-3xl: 2.25rem;
  --fs-4xl: 2.875rem;
  --fs-5xl: 3.5rem;

  --lh-tight: 1.15;
  --lh-snug: 1.35;
  --lh-normal: 1.55;

  /* ---- Aralık skalası (4px baz) ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* ---- Köşe yuvarlaklığı (maskotun yuvarlak formlarıyla uyumlu) ---- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-2xl: 28px;
  --radius-pill: 999px;

  /* ---- Gölgeler (lacivert tonlu, nötr siyah değil) ---- */
  --shadow-xs: 0 1px 2px rgba(7, 21, 49, 0.06);
  --shadow-sm: 0 2px 6px rgba(7, 21, 49, 0.08);
  --shadow-md: 0 6px 16px rgba(7, 21, 49, 0.1);
  --shadow-lg: 0 16px 36px rgba(7, 21, 49, 0.14);
  --shadow-xl: 0 24px 56px rgba(7, 21, 49, 0.18);
  --shadow-focus: 0 0 0 3px rgba(203, 155, 34, 0.35);

  /* ---- Hareket ---- */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-emphasized: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 320ms;

  --container-max: 1280px;
}

/* ---- Panel karanlık mod ---- */
:root[data-theme="dark"] {
  --color-bg: var(--navy-950);
  --color-surface: var(--navy-900);
  --color-surface-raised: var(--navy-800);
  --color-surface-sunken: var(--navy-950);
  --color-border: rgba(255, 255, 255, 0.1);
  --color-border-strong: rgba(255, 255, 255, 0.16);

  --color-text: var(--gray-50);
  --color-text-muted: rgba(255, 255, 255, 0.64);
  --color-text-subtle: rgba(255, 255, 255, 0.48);
  --color-link: var(--gold-300);

  --sidebar-bg: var(--navy-950);
  --sidebar-bg-active: var(--navy-800);
  --topbar-bg: var(--navy-900);
  --topbar-border: rgba(255, 255, 255, 0.08);

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.32);
  --shadow-md: 0 6px 16px rgba(0, 0, 0, 0.36);
  --shadow-lg: 0 16px 36px rgba(0, 0, 0, 0.4);
  --shadow-xl: 0 24px 56px rgba(0, 0, 0, 0.46);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}