/* ========================================================================
   eticaret.press · Panel Redesign · Design Tokens
   Stripe-vari finans estetigi; rol ayrimli (admin yogun, vendor sicak).
   ======================================================================== */

:root {
  /* ── Typography ────────────────────────────────────────── */
  --font-sans: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --font-display: 'Geist', ui-sans-serif, system-ui, sans-serif;

  /* Type scale */
  --t-11: 11px;
  --t-12: 12px;
  --t-13: 13px;
  --t-14: 14px;
  --t-15: 15px;
  --t-16: 16px;
  --t-18: 18px;
  --t-20: 20px;
  --t-24: 24px;
  --t-28: 28px;
  --t-32: 32px;
  --t-40: 40px;
  --t-48: 48px;

  /* ── Neutral warm-tinted scale (hue 85, very low chroma) ── */
  --n-50:  oklch(0.995 0.001 85);
  --n-75:  oklch(0.985 0.002 85);
  --n-100: oklch(0.972 0.003 85);
  --n-150: oklch(0.955 0.003 85);
  --n-200: oklch(0.935 0.004 85);
  --n-250: oklch(0.91  0.004 85);
  --n-300: oklch(0.88  0.005 85);
  --n-400: oklch(0.78  0.005 85);
  --n-500: oklch(0.62  0.006 85);
  --n-600: oklch(0.5   0.007 85);
  --n-700: oklch(0.4   0.008 85);
  --n-800: oklch(0.28  0.008 85);
  --n-900: oklch(0.2   0.008 85);
  --n-950: oklch(0.14  0.008 85);
  --n-1000:oklch(0.09  0.008 85);

  /* ── Brand / primary: Stripe-vari violet-indigo ────────── */
  --p-50:  oklch(0.975 0.02 275);
  --p-100: oklch(0.95  0.04 275);
  --p-200: oklch(0.88  0.08 275);
  --p-300: oklch(0.76  0.13 275);
  --p-400: oklch(0.62  0.18 275);
  --p-500: oklch(0.5   0.2  275);
  --p-600: oklch(0.42  0.2  275);
  --p-700: oklch(0.35  0.18 275);
  --p-800: oklch(0.28  0.14 275);
  --p-900: oklch(0.2   0.1  275);

  /* ── Semantic ──────────────────────────────────────────── */
  --success-400: oklch(0.7 0.15 155);
  --success-500: oklch(0.62 0.14 155);
  --success-600: oklch(0.52 0.13 155);
  --success-50:  oklch(0.965 0.025 155);
  --success-100: oklch(0.93 0.05 155);

  --danger-400: oklch(0.68 0.22 22);
  --danger-500: oklch(0.6 0.2 22);
  --danger-600: oklch(0.5 0.18 22);
  --danger-50:  oklch(0.965 0.025 22);
  --danger-100: oklch(0.93 0.05 22);

  --warning-400: oklch(0.8 0.14 75);
  --warning-500: oklch(0.72 0.15 75);
  --warning-600: oklch(0.6 0.14 65);
  --warning-50:  oklch(0.97 0.03 75);
  --warning-100: oklch(0.94 0.08 75);

  --info-400: oklch(0.7 0.12 240);
  --info-500: oklch(0.62 0.12 240);
  --info-600: oklch(0.52 0.13 240);
  --info-50:  oklch(0.965 0.025 240);
  --info-100: oklch(0.93 0.05 240);

  /* ── Semantic aliases (light default) ─────────────────── */
  --bg:            var(--n-50);
  --bg-soft:       var(--n-100);
  --bg-sunken:     var(--n-150);
  --surface:       #ffffff;
  --surface-2:     var(--n-75);
  --surface-hover: var(--n-100);
  --overlay:       oklch(0.2 0.01 275 / 0.4);

  --border:        var(--n-200);
  --border-strong: var(--n-300);
  --border-subtle: var(--n-150);
  --divider:       var(--n-150);

  --text:          var(--n-950);
  --text-2:        var(--n-800);
  --text-muted:    var(--n-600);
  --text-subtle:   var(--n-500);
  --text-faint:    var(--n-400);
  --text-on-dark:  var(--n-50);

  --primary:       var(--p-500);
  --primary-hover: var(--p-600);
  --primary-soft:  var(--p-50);
  --primary-border:var(--p-200);
  --primary-text:  var(--p-700);
  --primary-fg:    #ffffff;

  /* ── Shadows — subtle, layered (Stripe-style) ────────── */
  --shadow-xs: 0 1px 0 0 oklch(0 0 0 / 0.04);
  --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.06), 0 1px 1px oklch(0 0 0 / 0.03);
  --shadow-md: 0 2px 4px oklch(0 0 0 / 0.04), 0 4px 12px oklch(0 0 0 / 0.06);
  --shadow-lg: 0 4px 8px oklch(0 0 0 / 0.05), 0 12px 32px oklch(0 0 0 / 0.1);
  --shadow-xl: 0 8px 16px oklch(0 0 0 / 0.06), 0 24px 48px oklch(0 0 0 / 0.14);
  --shadow-inset: inset 0 1px 0 oklch(1 0 0 / 0.6), inset 0 -1px 0 oklch(0 0 0 / 0.03);
  --ring: 0 0 0 3px var(--primary-soft);
  --ring-danger: 0 0 0 3px var(--danger-50);

  /* ── Radius ───────────────────────────────────────────── */
  --r-2: 3px;
  --r-4: 5px;
  --r-6: 7px;
  --r-8: 9px;
  --r-10: 11px;
  --r-12: 13px;
  --r-16: 17px;
  --r-full: 9999px;

  /* ── Density (cozy default) ───────────────────────────── */
  --d-row-h: 44px;
  --d-cell-y: 10px;
  --d-cell-x: 14px;
  --d-gap: 16px;
  --d-card-pad: 18px;

  /* ── Animation ────────────────────────────────────────── */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 120ms;
  --dur: 180ms;
  --dur-slow: 280ms;

  /* ── Layout ───────────────────────────────────────────── */
  --sidebar-w: 248px;
  --sidebar-w-collapsed: 56px;
  --header-h: 52px;
  --page-max: 1440px;
}

/* Density variants */
[data-density="compact"] {
  --d-row-h: 36px;
  --d-cell-y: 7px;
  --d-cell-x: 12px;
  --d-gap: 12px;
  --d-card-pad: 14px;
}
[data-density="comfortable"] {
  --d-row-h: 54px;
  --d-cell-y: 14px;
  --d-cell-x: 18px;
  --d-gap: 20px;
  --d-card-pad: 22px;
}

/* Dark theme — cool-tinted ink, not pure neutral */
[data-theme="dark"] {
  --bg:            oklch(0.155 0.008 275);
  --bg-soft:       oklch(0.185 0.009 275);
  --bg-sunken:     oklch(0.125 0.008 275);
  --surface:       oklch(0.2   0.01  275);
  --surface-2:     oklch(0.22  0.011 275);
  --surface-hover: oklch(0.245 0.013 275);
  --overlay:       oklch(0 0 0 / 0.6);

  --border:        oklch(0.27 0.011 275);
  --border-strong: oklch(0.33 0.013 275);
  --border-subtle: oklch(0.23 0.01  275);
  --divider:       oklch(0.23 0.01  275);

  --text:          oklch(0.98 0.003 275);
  --text-2:        oklch(0.9  0.004 275);
  --text-muted:    oklch(0.72 0.006 275);
  --text-subtle:   oklch(0.58 0.007 275);
  --text-faint:    oklch(0.44 0.007 275);

  --primary:       var(--p-400);
  --primary-hover: var(--p-300);
  --primary-soft:  oklch(0.28 0.08 275);
  --primary-border:oklch(0.36 0.1 275);
  --primary-text:  var(--p-200);

  --success-50:    oklch(0.28 0.04 155);
  --success-100:   oklch(0.35 0.07 155);
  --danger-50:     oklch(0.28 0.04 22);
  --danger-100:    oklch(0.35 0.07 22);
  --warning-50:    oklch(0.3 0.04 75);
  --warning-100:   oklch(0.38 0.08 75);
  --info-50:       oklch(0.28 0.04 240);
  --info-100:      oklch(0.35 0.07 240);

  --shadow-xs: 0 1px 0 0 oklch(0 0 0 / 0.3);
  --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.4), 0 1px 1px oklch(0 0 0 / 0.2);
  --shadow-md: 0 2px 4px oklch(0 0 0 / 0.3), 0 4px 12px oklch(0 0 0 / 0.4);
  --shadow-lg: 0 4px 8px oklch(0 0 0 / 0.4), 0 12px 32px oklch(0 0 0 / 0.5);
  --shadow-xl: 0 8px 16px oklch(0 0 0 / 0.5), 0 24px 48px oklch(0 0 0 / 0.6);
  --ring: 0 0 0 3px oklch(0.5 0.2 275 / 0.3);
}

/* Role variants */
[data-role="admin"] {
  --role-accent: var(--p-500);
  --role-base: var(--t-13);
  --role-banner-grad: linear-gradient(90deg,
    oklch(0.5 0.2 275) 0%,
    oklch(0.55 0.18 260) 50%,
    oklch(0.5 0.16 245) 100%);
}
[data-role="vendor"] {
  --role-accent: oklch(0.58 0.17 235);  /* daha sıcak, bir tık mavi */
  --role-base: var(--t-14);
  --role-banner-grad: linear-gradient(90deg,
    oklch(0.62 0.14 155) 0%,
    oklch(0.58 0.14 175) 50%,
    oklch(0.55 0.16 210) 100%);
}