/* ============================================================
   Design System — Design Tokens (oklch native)

   DaisyUI v4 color architecture:
   - base-100/200/300  → surface hierarchy (bg, card, elevated)
   - base-content      → main text; use /50 /70 opacity for muted
   - primary/secondary/accent/neutral → brand colors
   - info/success/warning/error → semantic status

   We use oklch() directly — exact DaisyUI color matching,
   no lossy HSL conversion. Requires modern browser.

   Usage: var(--background), var(--primary) etc.
   Opacity: color-mix(in oklch, var(--primary) 15%, transparent)
   ============================================================ */

/* ── LIGHT THEME ────────────────────────────────────────────── */
:root {
  color-scheme: light;

  /* Base surfaces (DaisyUI light) */
  --background:          oklch(100% 0 0);              /* white */
  --surface:             oklch(98% 0 0);               /* base-200 */
  --surface-alt:         oklch(95% 0 0);               /* base-300 */
  --foreground:          oklch(21% 0.006 285.885);     /* near-black */

  --card:                oklch(100% 0 0);
  --card-foreground:     oklch(21% 0.006 285.885);
  --popover:             oklch(100% 0 0);
  --popover-foreground:  oklch(21% 0.006 285.885);

  /* Primary — indigo (Airy / Stripe-inspired, ≈ #533afd) */
  --primary:             oklch(52% 0.22 276);
  --primary-foreground:  oklch(99% 0.01 276);

  /* Secondary — soft indigo-gray */
  --secondary:           oklch(94% 0.015 285);
  --secondary-foreground:oklch(30% 0.03 285);

  /* Muted */
  --muted:               oklch(95% 0.006 264);
  --muted-foreground:    oklch(55% 0.012 264);         /* base-content/55 equivalent */

  /* Accent — teal */
  --accent:              oklch(72% 0.156 194);         /* teal */
  --accent-foreground:   oklch(100% 0 0);

  /* Status */
  --destructive:         oklch(65% 0.3 30);            /* DaisyUI error */
  --destructive-foreground: oklch(98% 0.01 30);
  --success:             oklch(76% 0.177 163);         /* DaisyUI success */
  --success-foreground:  oklch(98% 0.01 163);
  --warning:             oklch(82% 0.189 84);          /* DaisyUI warning */
  --warning-foreground:  oklch(20% 0.05 84);
  --info:                oklch(74% 0.16 233);          /* DaisyUI info */
  --info-foreground:     oklch(29% 0.066 243);

  /* Borders / input — soft indigo-tinted */
  --border:              oklch(90% 0.008 285);
  --input:               oklch(90% 0.008 285);
  --ring:                oklch(52% 0.22 276);

  /* Radius scale — Airy: large & rounded (Stripe-inspired) */
  --radius: 0.75rem;
  --radius-sm: calc(var(--radius) - 0.375rem);
  --radius-md: var(--radius);
  --radius-lg: calc(var(--radius) + 0.375rem);
  --radius-xl: calc(var(--radius) + 0.75rem);
  --radius-full: 9999px;

  /* Soft chromatic shadow (Airy — indigo-tinted depth, not neutral gray) */
  --shadow-sm: 0 1px 2px oklch(45% 0.05 278 / 0.08);
  --shadow:    0 2px 8px oklch(45% 0.05 278 / 0.10);
  --shadow-md: 0 6px 20px oklch(45% 0.05 278 / 0.12);
  --shadow-lg: 0 16px 40px oklch(45% 0.05 278 / 0.16);

  /* Kanonik semantic palet — danger = destructive alias (cascade ile dark'ta da doğru) */
  --danger: var(--destructive);
  --danger-foreground: var(--destructive-foreground);

  /* Control knob (switch/toggle beyaz topuz) */
  --knob: oklch(100% 0 0);

  --font-sans: Inter, system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", Menlo, Monaco, monospace;

  /* Chart — light */
  --chart-1:  oklch(52%  0.22  276);   /* indigo — primary */
  --chart-2:  oklch(60%  0.22  295);   /* purple */
  --chart-3:  oklch(72%  0.156 194);   /* teal — accent */
  --chart-4:  oklch(76%  0.177 163);   /* green */
  --chart-5:  oklch(82%  0.189 84);    /* amber */
  --chart-6:  oklch(65%  0.3   30);    /* red */
}

/* ── SYNTHWAVE DARK — DaisyUI v4 exact values ───────────────── */
.dark {
  color-scheme: dark;

  /* Surfaces — Airy dark (slate-indigo substrate, less saturated than synthwave) */
  --background:          oklch(19% 0.025 274);         /* deep slate-indigo */
  --surface:             oklch(23% 0.025 274);         /* card lift */
  --surface-alt:         oklch(27% 0.028 274);         /* elevated */
  --foreground:          oklch(93% 0.012 274);         /* bright lavender-white — high readability */

  --card:                oklch(22.5% 0.025 274);
  --card-foreground:     oklch(93% 0.012 274);
  --popover:             oklch(25% 0.028 274);
  --popover-foreground:  oklch(93% 0.012 274);

  /* Brand — bright indigo (Airy) */
  --primary:             oklch(66% 0.19 276);
  --primary-foreground:  oklch(98% 0.01 276);

  /* Secondary — muted indigo-slate */
  --secondary:           oklch(32% 0.04 280);
  --secondary-foreground:oklch(90% 0.02 280);

  /* Muted surface */
  --muted:               oklch(26% 0.02 274);
  --muted-foreground:    oklch(68% 0.02 274);

  /* Accent — teal (retained; pairs cleanly with indigo) */
  --accent:              oklch(72% 0.14 195);
  --accent-foreground:   oklch(19% 0.025 274);

  /* Status — dark-tuned */
  --destructive:         oklch(64% 0.20 22);
  --destructive-foreground: oklch(98% 0.01 22);
  --success:             oklch(70% 0.15 158);
  --success-foreground:  oklch(16% 0.03 158);
  --warning:             oklch(80% 0.15 78);
  --warning-foreground:  oklch(22% 0.05 78);
  --info:                oklch(70% 0.14 235);
  --info-foreground:     oklch(16% 0.03 235);

  /* Neutral — indigo (nav/UI accents) */
  --neutral:             oklch(50% 0.10 276);
  --neutral-foreground:  oklch(90% 0.03 276);

  /* Borders */
  --border:              oklch(31% 0.02 274);
  --input:               oklch(31% 0.02 274);
  --ring:                oklch(66% 0.19 276);           /* indigo */

  --radius: 0.75rem;
  --font-sans: Inter, system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", Menlo, Monaco, monospace;

  /* Soft chromatic shadow — dark (deeper, indigo-tinted) */
  --shadow-sm: 0 1px 2px oklch(0% 0 0 / 0.30);
  --shadow:    0 2px 8px oklch(0% 0 0 / 0.36);
  --shadow-md: 0 6px 20px oklch(0% 0 0 / 0.44);
  --shadow-lg: 0 16px 40px oklch(0% 0 0 / 0.52);

  /* Chart — indigo-family dark */
  --chart-1:  oklch(66%  0.19  276);   /* indigo — primary */
  --chart-2:  oklch(70%  0.16  320);   /* violet */
  --chart-3:  oklch(72%  0.14  195);   /* teal — accent */
  --chart-4:  oklch(72%  0.15  158);   /* green */
  --chart-5:  oklch(80%  0.15  78);    /* amber */
  --chart-6:  oklch(68%  0.18  25);    /* coral */
}

/* ── Density & Spacing Scale ────────────────────────────────────
   3 yoğunluk: compact / standard / comfortable (DEFAULT).
   <html data-density="..."> ile değişir. Componentler bu
   primitive'leri (--pad-y/x, --control-h-*, --ds-space-*, --font-scale)
   okur → density tek attribute ile her yere yayılır.

   Kullanım:  <html data-density="compact">   (yoğun, data-heavy)
              <html>  veya  data-density="comfortable"  (ferah — default)
   ──────────────────────────────────────────────────────────────── */
:root,
[data-density="comfortable"] {
  --ds-space-unit: 0.3125rem;   /* 5px */
  --control-h-sm: 2rem;
  --control-h-md: 2.625rem;
  --control-h-lg: 3.25rem;
  --pad-y: 0.875rem;
  --pad-x: 1.125rem;
  --font-scale: 1.04;
  --density-mult: 1;      /* generic px scaler for fixed spacing (comfortable = 1) */
}
[data-density="standard"] {
  --ds-space-unit: 0.25rem;     /* 4px */
  --control-h-sm: 1.75rem;
  --control-h-md: 2.25rem;
  --control-h-lg: 2.75rem;
  --pad-y: 0.625rem;
  --pad-x: 0.875rem;
  --font-scale: 1;
  --density-mult: 0.8;
}
[data-density="compact"] {
  --ds-space-unit: 0.1875rem;   /* 3px */
  --control-h-sm: 1.5rem;
  --control-h-md: 1.875rem;
  --control-h-lg: 2.25rem;
  --pad-y: 0.375rem;
  --pad-x: 0.625rem;
  --font-scale: 0.94;
  --density-mult: 0.6;
}
/* Türetilmiş spacing scale — density-aware, utility + component'ler okur */
:root {
  --ds-space-1: calc(var(--ds-space-unit) * 1);
  --ds-space-2: calc(var(--ds-space-unit) * 2);
  --ds-space-3: calc(var(--ds-space-unit) * 3);
  --ds-space-4: calc(var(--ds-space-unit) * 4);
  --ds-space-5: calc(var(--ds-space-unit) * 5);
  --ds-space-6: calc(var(--ds-space-unit) * 6);
  --ds-space-8: calc(var(--ds-space-unit) * 8);
}

/* ── Base resets ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: var(--font-sans);
  background-color: var(--background);
  color: var(--foreground);
  -webkit-font-smoothing: antialiased;
}

/* ── Section — vertical spacing wrapper ─────────────────────────
   Full-width vertical rhythm layer. Backgrounds/borders go edge-to-edge.
   Content inside section is wrapped with .container.

   Usage:
     <main>
       <div class="ds-section">
         <div class="container container-lg">
           ...page content...
         </div>
       </div>
     </main>

   Sizes (UIKit-inspired):
   xsm → 10px  top/bottom
   sm  → 20px  top/bottom
   default → 40px  top/bottom
   lg  → 60px  top/bottom
   ────────────────────────────────────────────────────────────── */
.ds-section        { padding-top: calc(48px * var(--density-mult,1)); padding-bottom: calc(48px * var(--density-mult,1)); }
.ds-section-xsm    { padding-top: calc(12px * var(--density-mult,1)); padding-bottom: calc(12px * var(--density-mult,1)); }
.ds-section-sm     { padding-top: calc(24px * var(--density-mult,1)); padding-bottom: calc(24px * var(--density-mult,1)); }
.ds-section-lg     { padding-top: calc(72px * var(--density-mult,1)); padding-bottom: calc(72px * var(--density-mult,1)); }

/* ── Padding utilities ───────────────────────────────────────────
   UIKit-inspired: selectively add or remove padding.
   Useful when two stacked sections create double vertical gap.

   Usage — remove top padding of content section below a page-header:
     <div class="ds-section ds-section-sm ds-padding-remove-top">

   ────────────────────────────────────────────────────────────── */
.ds-padding          { padding: 20px !important; }
.ds-padding-sm       { padding: 10px !important; }
.ds-padding-lg       { padding: 40px !important; }
.ds-padding-remove            { padding: 0 !important; }
.ds-padding-remove-top        { padding-top: 0 !important; }
.ds-padding-remove-bottom     { padding-bottom: 0 !important; }
.ds-padding-remove-vertical   { padding-top: 0 !important; padding-bottom: 0 !important; }
.ds-padding-remove-horizontal { padding-left: 0 !important; padding-right: 0 !important; }

/* ── Container — horizontal centering ───────────────────────────
   Centers content horizontally with consistent side padding.
   Does NOT set display:flex — layout inside is up to the content.

   Usage:
     <div class="container container-md">
       ...content...
     </div>

   For article + TOC side-by-side, add flex on an inner wrapper:
     <div class="container container-lg">
       <div style="display:flex;gap:32px;align-items:flex-start;">
         <article style="flex:1;min-width:0;">...</article>
         <aside id="toc" style="width:152px;flex-shrink:0;">...</aside>
       </div>
     </div>

   Sizes:
   sm  →  800px   lg  → 1120px   2xl → 1600px
   md  →  960px   xl  → 1280px   full → no max-width
   ────────────────────────────────────────────────────────────── */
.container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box;
}
.container-sm   { max-width: 800px; }
.container-md   { max-width: 960px; }   /* default */
.container-lg   { max-width: 1120px; }
.container-xl   { max-width: 1280px; }
.container-2xl  { max-width: 1600px; }
.container-full { max-width: none; }

/* ── Scrollbar utility ──────────────────────────────────────────
   Thin scrollbar hidden by default, visible on hover.
   Prevents layout shift: space is always reserved (scrollbar-width:thin).

   Usage:
     .ds-scroll-y  — vertical scroll (boxes, sidebars, modals)
     .ds-scroll-x  — horizontal scroll (wide tables, code blocks)
     .ds-scroll    — both axes

   Always pair with a max-height / max-width constraint:
     <div class="ds-scroll-y" style="max-height:320px;">...</div>
     <div class="ds-scroll-x">
       <table class="ds-table">...</table>
     </div>
   ────────────────────────────────────────────────────────────── */
.ds-scroll,
.ds-scroll-y,
.ds-scroll-x {
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}
.ds-scroll   { overflow: auto; }
.ds-scroll-y { overflow-y: auto; overflow-x: hidden; }
.ds-scroll-x { overflow-x: auto; overflow-y: hidden; }

.ds-scroll::-webkit-scrollbar,
.ds-scroll-y::-webkit-scrollbar,
.ds-scroll-x::-webkit-scrollbar  { width: 4px; height: 4px; }

.ds-scroll::-webkit-scrollbar-track,
.ds-scroll-y::-webkit-scrollbar-track,
.ds-scroll-x::-webkit-scrollbar-track { background: transparent; }

.ds-scroll::-webkit-scrollbar-thumb,
.ds-scroll-y::-webkit-scrollbar-thumb,
.ds-scroll-x::-webkit-scrollbar-thumb { background: transparent; border-radius: 2px; }

.ds-scroll:hover,
.ds-scroll-y:hover,
.ds-scroll-x:hover {
  scrollbar-color: color-mix(in oklch, var(--foreground) 20%, transparent) transparent;
}

.ds-scroll:hover::-webkit-scrollbar-thumb,
.ds-scroll-y:hover::-webkit-scrollbar-thumb,
.ds-scroll-x:hover::-webkit-scrollbar-thumb {
  background: color-mix(in oklch, var(--foreground) 20%, transparent);
}