/* tokens.css — EtiketMarket Admin design tokens.
   Tüm renkler ve ölçüler buradan akar; component'ler doğrudan token isimlerini kullanır. */

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500;600&display=swap');

:root {
  /* —— Tipografi —— */
  --font-sans: 'Geist', ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --text-2xs: 10.5px;
  --text-xs: 11.5px;
  --text-sm: 12.5px;
  --text-base: 13.5px;
  --text-md: 14.5px;
  --text-lg: 16px;
  --text-xl: 19px;
  --text-2xl: 22px;
  --text-3xl: 28px;
  --text-4xl: 36px;

  --leading-tight: 1.2;
  --leading-snug: 1.35;
  --leading-normal: 1.5;

  --tracking-tight: -0.015em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --tracking-caps: 0.06em;

  /* —— Spacing scale (4px tabanlı, ama 2/6 dahil) —— */
  --sp-0: 0px;
  --sp-1: 2px;
  --sp-2: 4px;
  --sp-3: 6px;
  --sp-4: 8px;
  --sp-5: 10px;
  --sp-6: 12px;
  --sp-7: 14px;
  --sp-8: 16px;
  --sp-9: 20px;
  --sp-10: 24px;
  --sp-11: 32px;
  --sp-12: 40px;
  --sp-13: 48px;
  --sp-14: 64px;
  --sp-15: 96px;

  /* —— Radius —— */
  --r-xs: 3px;
  --r-sm: 5px;
  --r-md: 7px;
  --r-lg: 10px;
  --r-xl: 14px;
  --r-2xl: 20px;
  --r-full: 999px;

  /* —— Yoğunluk (density) —— */
  --row-h: 40px;
  --row-h-compact: 32px;
  --control-h: 32px;
  --control-h-sm: 26px;
  --control-h-lg: 38px;

  /* —— Markaya özel —— */
  --brand-h: 232; /* Etiket Mavi tonu */
  --accent: oklch(58% 0.21 var(--brand-h));
  --accent-hover: oklch(53% 0.22 var(--brand-h));
  --accent-active: oklch(48% 0.22 var(--brand-h));
  --accent-soft: oklch(95% 0.04 var(--brand-h));
  --accent-soft-2: oklch(90% 0.07 var(--brand-h));
  --on-accent: #ffffff;
  --focus-ring: oklch(70% 0.18 var(--brand-h) / 0.45);

  /* —— Semantic durumlar —— */
  --success: oklch(58% 0.16 152);
  --success-soft: oklch(95% 0.05 152);
  --warn: oklch(70% 0.16 75);
  --warn-soft: oklch(95% 0.06 75);
  --danger: oklch(58% 0.21 25);
  --danger-soft: oklch(95% 0.05 25);
  --info: oklch(60% 0.13 220);
  --info-soft: oklch(95% 0.04 220);
  --neutral-soft: oklch(95% 0.005 250);

  /* —— Shadow —— */
  --shadow-xs: 0 1px 0 0 rgba(15, 23, 42, 0.04);
  --shadow-sm: 0 1px 2px 0 rgba(15, 23, 42, 0.06), 0 1px 1px -1px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 4px 8px -2px rgba(15, 23, 42, 0.08), 0 2px 4px -2px rgba(15, 23, 42, 0.04);
  --shadow-lg: 0 12px 24px -6px rgba(15, 23, 42, 0.12), 0 4px 8px -4px rgba(15, 23, 42, 0.06);
  --shadow-pop: 0 16px 40px -8px rgba(15, 23, 42, 0.18), 0 4px 8px -4px rgba(15, 23, 42, 0.08);

  /* —— Yüzeyler & metin (LIGHT) —— */
  --bg: #F7F8FA;
  --bg-sunken: #F1F3F7;
  --surface: #FFFFFF;
  --surface-2: #FAFBFC;
  --surface-3: #F4F6F9;
  --surface-hover: #F4F6F9;
  --surface-active: #ECEFF4;
  --sidebar-bg: #FBFCFD;
  --topbar-bg: rgba(255, 255, 255, 0.85);

  --border: #E5E8ED;
  --border-strong: #D5DAE2;
  --border-subtle: #EEF1F4;
  --divider: #ECEFF3;

  --text: #0E1320;
  --text-strong: #04060C;
  --text-muted: #5A6478;
  --text-subtle: #8893A4;
  --text-disabled: #B7BEC9;
  --text-on-accent-soft: oklch(40% 0.20 var(--brand-h));

  --scrollbar-thumb: #D2D7DF;
  --scrollbar-thumb-hover: #B7BEC9;
}

[data-theme='dark'] {
  --bg: #0A0D14;
  --bg-sunken: #07090F;
  --surface: #11141C;
  --surface-2: #151924;
  --surface-3: #1A1F2C;
  --surface-hover: #1A1F2C;
  --surface-active: #232A38;
  --sidebar-bg: #0D1018;
  --topbar-bg: rgba(13, 16, 24, 0.85);

  --border: #232A38;
  --border-strong: #2E3648;
  --border-subtle: #1A1F2C;
  --divider: #1F2531;

  --text: #E6EAF2;
  --text-strong: #FFFFFF;
  --text-muted: #97A0B4;
  --text-subtle: #6B7488;
  --text-disabled: #4A5366;

  --accent: oklch(68% 0.19 var(--brand-h));
  --accent-hover: oklch(72% 0.19 var(--brand-h));
  --accent-active: oklch(62% 0.20 var(--brand-h));
  --accent-soft: oklch(28% 0.10 var(--brand-h) / 0.45);
  --accent-soft-2: oklch(35% 0.13 var(--brand-h) / 0.55);
  --text-on-accent-soft: oklch(85% 0.10 var(--brand-h));

  --success-soft: oklch(30% 0.10 152 / 0.4);
  --warn-soft: oklch(35% 0.10 75 / 0.4);
  --danger-soft: oklch(30% 0.12 25 / 0.4);
  --info-soft: oklch(30% 0.08 220 / 0.4);
  --neutral-soft: oklch(22% 0.005 250);

  --shadow-xs: 0 0 0 1px rgba(0,0,0,0.4);
  --shadow-sm: 0 1px 2px 0 rgba(0,0,0,0.4);
  --shadow-md: 0 4px 8px -2px rgba(0,0,0,0.4);
  --shadow-lg: 0 12px 24px -6px rgba(0,0,0,0.6);
  --shadow-pop: 0 16px 40px -8px rgba(0,0,0,0.7);

  --scrollbar-thumb: #2E3648;
  --scrollbar-thumb-hover: #3D4658;
}

/* —— Yoğunluk modu —— */
[data-density='compact'] {
  --row-h: 32px;
  --control-h: 28px;
  --text-base: 12.5px;
  --text-md: 13.5px;
}

/* —— Reset / base —— */
*, *::before, *::after { box-sizing: border-box; }
html, body, #root { height: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'cv11', 'ss01', 'ss03';
}
button { font-family: inherit; }
input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); background-clip: content-box; }
::selection { background: var(--accent-soft); color: var(--text-strong); }

/* —— Focus ring policy: klavye odağı her zaman görünür —— */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

.font-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.tabular { font-variant-numeric: tabular-nums; }