/* ==========================================================================
   SocialPlan — Design Tokens
   Tek kaynak: renk, tipografi, yükseklik (elevation), yarıçap, hareket.
   ========================================================================== */

:root, [data-theme="light"] {
    color-scheme: light;

    /* --- Surfaces ------------------------------------------------------- */
    --bg-primary:   hsl(220 24% 97%);   /* uygulama zemini */
    --bg-secondary: hsl(0 0% 100%);     /* kart / panel yüzeyi */
    --bg-tertiary:  hsl(220 18% 94%);   /* hover, dolgu, chip */
    --bg-inset:     hsl(220 24% 98%);   /* input, gömülü alan */
    --bg-overlay:   hsl(222 40% 14% / 0.45);

    /* --- Text ----------------------------------------------------------- */
    --text-primary:   hsl(222 47% 11%);
    --text-secondary: hsl(220 9% 42%);
    --text-tertiary:  hsl(220 9% 60%);
    --text-inverse:   hsl(0 0% 100%);

    /* --- Borders -------------------------------------------------------- */
    --border-color:        hsl(220 18% 90%);
    --border-color-hover:  hsl(220 16% 82%);
    --border-strong:       hsl(220 14% 78%);

    /* --- Brand ramp ----------------------------------------------------- */
    --brand-50:  hsl(222 100% 97%);
    --brand-100: hsl(222 95% 93%);
    --brand-200: hsl(222 92% 86%);
    --brand-300: hsl(222 90% 76%);
    --brand-400: hsl(222 88% 66%);
    --brand-500: hsl(222 83% 53%);
    --brand-600: hsl(222 83% 46%);
    --brand-700: hsl(224 76% 38%);

    --brand-primary:       var(--brand-500);
    --brand-primary-hover: var(--brand-600);
    --brand-primary-dark:  var(--brand-700);
    --brand-primary-light: var(--brand-300);
    --brand-secondary:     hsl(199 89% 48%);
    --brand-contrast:      hsl(0 0% 100%);
    --brand-soft:          var(--brand-50);
    --brand-soft-border:   var(--brand-200);
    --brand-glow:          hsl(222 83% 53% / 0.30);
    --brand-gradient:      linear-gradient(135deg, hsl(222 83% 57%), hsl(232 80% 50%));
    --brand-rgb: 37, 99, 235; /* geriye dönük uyumluluk */

    /* --- Semantic ------------------------------------------------------- */
    --success:      hsl(142 66% 36%);
    --success-soft: hsl(142 66% 95%);
    --warning:      hsl(32 92% 44%);
    --warning-soft: hsl(38 92% 94%);
    --danger:       hsl(0 72% 48%);
    --danger-soft:  hsl(0 80% 96%);
    --info:         hsl(199 89% 42%);
    --info-soft:    hsl(199 89% 95%);

    /* --- Kategori / blok renkleri (canlı aksan) ------------------------- */
    --block-work:     hsl(222 83% 55%);
    --block-health:   hsl(160 70% 38%);
    --block-learning: hsl(272 66% 56%);
    --block-social:   hsl(30 90% 50%);
    --block-reading:  hsl(14 74% 50%);

    /* --- Elevation ------------------------------------------------------ */
    --shadow-xs: 0 1px 2px hsl(220 40% 12% / 0.05);
    --shadow-sm: 0 1px 2px hsl(220 40% 12% / 0.06), 0 1px 3px hsl(220 40% 12% / 0.05);
    --shadow-md: 0 2px 4px hsl(220 40% 12% / 0.05), 0 8px 20px -6px hsl(220 40% 12% / 0.10);
    --shadow-lg: 0 4px 8px hsl(220 40% 12% / 0.05), 0 18px 36px -10px hsl(220 40% 12% / 0.14);
    --shadow-xl: 0 8px 16px hsl(220 40% 12% / 0.06), 0 32px 64px -16px hsl(220 40% 12% / 0.22);

    --glass-bg:     hsl(0 0% 100% / 0.72);
    --glass-border: hsl(0 0% 100% / 0.55);

    /* --- Focus ---------------------------------------------------------- */
    --focus-ring: 0 0 0 3px hsl(222 83% 53% / 0.30);

    /* --- Typography ----------------------------------------------------- */
    --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-numeric: 'Inter', ui-monospace, system-ui, sans-serif;

    --text-xs:   0.75rem;
    --text-sm:   0.8125rem;
    --text-base: 0.9375rem;
    --text-md:   1rem;
    --text-lg:   1.125rem;
    --text-xl:   1.375rem;
    --text-2xl:  1.75rem;

    --tracking-tight: -0.018em;
    --tracking-wide:  0.06em;

    /* --- Motion --------------------------------------------------------- */
    --ease-out:  cubic-bezier(0.22, 1, 0.36, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --transition-fast:   140ms var(--ease-out);
    --transition-normal: 220ms var(--ease-out);
    --transition-slow:   340ms var(--ease-out);

    /* --- Dimensions ----------------------------------------------------- */
    --sidebar-width: 264px;
    --header-height: 68px;
    --content-width: 940px;
    --content-width-narrow: 620px;

    --border-radius-xs:   0.25rem;
    --border-radius-sm:   0.5rem;
    --border-radius-md:   0.75rem;
    --border-radius-lg:   1rem;
    --border-radius-xl:   1.375rem;
    --border-radius-full: 9999px;
}

/* --- Dark theme -------------------------------------------------------- */
[data-theme="dark"] {
    color-scheme: dark;

    --bg-primary:   hsl(224 24% 8%);
    --bg-secondary: hsl(224 20% 11%);
    --bg-tertiary:  hsl(224 16% 17%);
    --bg-inset:     hsl(224 22% 9.5%);
    --bg-overlay:   hsl(224 40% 3% / 0.62);

    --text-primary:   hsl(210 22% 97%);
    --text-secondary: hsl(217 13% 70%);
    --text-tertiary:  hsl(217 11% 50%);

    --border-color:       hsl(220 14% 20%);
    --border-color-hover: hsl(220 13% 28%);
    --border-strong:      hsl(220 12% 34%);

    --brand-primary:       hsl(218 92% 64%);
    --brand-primary-hover: hsl(218 92% 70%);
    --brand-primary-light: hsl(218 92% 74%);
    --brand-soft:          hsl(220 60% 20% / 0.55);
    --brand-soft-border:   hsl(220 60% 40% / 0.45);
    --brand-glow:          hsl(218 92% 60% / 0.35);
    --brand-gradient:      linear-gradient(135deg, hsl(218 92% 62%), hsl(232 80% 58%));

    --success:      hsl(150 62% 50%);
    --success-soft: hsl(150 50% 18% / 0.6);
    --warning:      hsl(38 95% 60%);
    --warning-soft: hsl(38 60% 20% / 0.6);
    --danger:       hsl(0 84% 65%);
    --danger-soft:  hsl(0 60% 22% / 0.55);
    --info:         hsl(199 89% 62%);
    --info-soft:    hsl(199 60% 20% / 0.6);

    --block-work:     hsl(218 90% 62%);
    --block-health:   hsl(158 66% 46%);
    --block-learning: hsl(272 74% 68%);
    --block-social:   hsl(34 92% 58%);
    --block-reading:  hsl(16 80% 58%);

    --shadow-xs: 0 1px 2px hsl(0 0% 0% / 0.30);
    --shadow-sm: 0 1px 2px hsl(0 0% 0% / 0.35), 0 1px 3px hsl(0 0% 0% / 0.28);
    --shadow-md: 0 2px 4px hsl(0 0% 0% / 0.30), 0 8px 20px -6px hsl(0 0% 0% / 0.45);
    --shadow-lg: 0 4px 8px hsl(0 0% 0% / 0.32), 0 18px 36px -10px hsl(0 0% 0% / 0.55);
    --shadow-xl: 0 8px 16px hsl(0 0% 0% / 0.35), 0 32px 64px -16px hsl(0 0% 0% / 0.65);

    --glass-bg:     hsl(224 22% 11% / 0.75);
    --glass-border: hsl(0 0% 100% / 0.06);

    --focus-ring: 0 0 0 3px hsl(218 92% 64% / 0.38);
}

/* ==========================================================================
   Reset & Base
   ========================================================================== */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-sans);
    font-size: var(--text-base);
    background-color: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'cv02' 1, 'cv03' 1, 'cv04' 1, 'ss01' 1;
    transition: background-color var(--transition-normal), color var(--transition-normal);
}

h1, h2, h3, h4 {
    letter-spacing: var(--tracking-tight);
    line-height: 1.25;
    font-weight: 650;
}

button, input, select, textarea {
    font: inherit;
    color: inherit;
}

button { cursor: pointer; }

a { color: var(--brand-primary); }

::selection {
    background: var(--brand-primary);
    color: var(--brand-contrast);
}

/* Görünür ve tutarlı odak halkası (klavye kullanıcıları için) */
:focus-visible {
    outline: 2px solid var(--brand-primary);
    outline-offset: 2px;
    border-radius: var(--border-radius-xs);
}

/* Zaman / sayı gösterimlerinde sabit genişlikli rakamlar */
.tnum, .time-label, .day-num, .cal-day-num, .block-time, .habit-streak {
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1;
}

/* --- Scrollbar --------------------------------------------------------- */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--border-color-hover) transparent;
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background-color: var(--border-color-hover);
    border-radius: var(--border-radius-full);
    border: 3px solid transparent;
    background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background-color: var(--border-strong); }

.hide-scrollbar { scrollbar-width: none; -ms-overflow-style: none; }
.hide-scrollbar::-webkit-scrollbar { display: none; }

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