/* ==========================================================================
   OdiSales — Design Tokens (single source of truth)
   Light & airy, Trendyol-orange accent. Mobile-first.
   ========================================================================== */

:root {
  /* ---- Brand ---- */
  --brand: #f27a1a;
  --brand-strong: #c2410c;
  --brand-600: #e0640f;
  --brand-soft: #fff7ed;
  --brand-softer: #fffbf5;
  --brand-ring: rgba(242, 122, 26, 0.35);
  --brand-gradient: linear-gradient(135deg, #f97d1c 0%, #e0640f 55%, #c2410c 100%);

  /* ---- Neutrals / surfaces ---- */
  --bg: #f6f8fc;
  --bg-tint: #eef2f9;
  --surface: #ffffff;
  --surface-2: #f8fafc;
  --surface-3: #f1f5f9;
  --ink: #0f172a;
  --ink-soft: #1e293b;
  --muted: #5b677a;
  --muted-2: #8a96a8;
  --line: #e6eaf1;
  --line-strong: #d3dae6;

  /* ---- Semantic ---- */
  --ok: #15803d;
  --ok-soft: #ecfdf3;
  --warn: #b45309;
  --warn-soft: #fffbeb;
  --danger: #be123c;
  --danger-soft: #fff1f3;
  --info: #1d4ed8;
  --info-soft: #eff4ff;

  /* ---- Dark surfaces (hero / footer accents) ---- */
  --night: #0b1424;
  --night-2: #0f1c30;
  --night-line: rgba(255, 255, 255, 0.10);

  /* ---- Typography ---- */
  --font-sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-display: "Poppins", var(--font-sans);

  --fs-xs: 0.75rem;     /* 12 */
  --fs-sm: 0.8125rem;   /* 13 */
  --fs-base: 0.9375rem; /* 15 */
  --fs-md: 1rem;        /* 16 */
  --fs-lg: 1.125rem;    /* 18 */
  --fs-xl: 1.375rem;    /* 22 */
  --fs-2xl: 1.75rem;    /* 28 */
  --fs-3xl: 2.25rem;    /* 36 */
  --fs-4xl: clamp(2.5rem, 5vw, 3.75rem);

  --lh-tight: 1.12;
  --lh-snug: 1.35;
  --lh-base: 1.6;

  /* ---- Spacing scale ---- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;

  /* ---- Radii ---- */
  --radius-sm: 10px;
  --radius: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  /* ---- Shadows (one soft elevation scale) ---- */
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 12px 28px rgba(15, 23, 42, 0.10);
  --shadow-lg: 0 24px 60px rgba(15, 23, 42, 0.14);
  --shadow-brand: 0 16px 36px rgba(242, 122, 26, 0.28);

  /* ---- Layout ---- */
  --container: 1200px;
  --container-narrow: 880px;
  --sidebar-w: 256px;
  --sidebar-w-collapsed: 76px;
  --topbar-h: 64px;

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --t-fast: 140ms var(--ease);
  --t: 200ms var(--ease);
  --t-slow: 320ms var(--ease);

  /* ---- Z-index ---- */
  --z-sticky: 50;
  --z-drawer: 80;
  --z-overlay: 70;
  --z-toast: 100;
}