/**
 * Jijo Market - Design System Variables
 * Based on sabadi-master architecture with custom Logo Green branding
 */

:root {
  /* Brand Green (from attached logo) */
  --primary-900: #004d06;
  --primary-800: #006607;
  --primary-700: #00870a;
  --primary-600: #00a60c;
  --primary-main: #00d810;
  --primary-400: #29e238;
  --primary-300: #5cf067;
  --primary-200: #9bf7a2;
  --primary-100: #cffcd3;
  --primary-50: #eafbea;
  --primary-light: #f0fdf4;
  --primary-glow: rgba(0, 216, 16, 0.25);

  /* Neutrals */
  --white-0: #ffffff;
  --gray-900: #111827;
  --gray-800: #1f2937;
  --gray-700: #374151;
  --gray-600: #4b5563;
  --gray-500: #6b7280;
  --gray-400: #9ca3af;
  --gray-300: #d1d5db;
  --gray-200: #e5e7eb;
  --gray-100: #f3f4f6;
  --gray-50: #f9fafb;
  --gray-0: #fbfbfb;

  /* Semantics */
  --red-600: #dc2626;
  --red-500: #ef4444;
  --red-100: #fee2e2;
  --red-50: #fef2f2;

  --blue-600: #2563eb;
  --blue-100: #dbeafe;
  --blue-50: #eff6ff;

  --yellow-600: #d97706;
  --yellow-500: #f59e0b;
  --yellow-100: #fef3c7;
  --yellow-50: #fffbeb;

  /* Sabadi Mapping */
  --schema-primary-main: var(--primary-main);
  --schema-primary-hover: var(--primary-600);
  --schema-primary-light: var(--primary-50);
  --schema-secondary-main: var(--blue-600);
  --schema-secondary-light: var(--blue-100);
  --schema-background-main: var(--white-0);
  --schema-background-light: #f4f5f7;
  --schema-surface-main: var(--white-0);
  --schema-surface-light: var(--gray-100);
  --schema-surface-disable: var(--gray-200);
  --schema-negative-main: var(--red-600);
  --schema-negative-light: var(--red-50);
  --schema-positive-main: var(--primary-700);
  --schema-positive-light: var(--primary-50);
  --schema-warning-main: var(--yellow-600);
  --schema-warning-light: var(--yellow-50);

  /* Foreground Texts */
  --foreground-primary-he: var(--white-0);
  --foreground-primary-me: var(--gray-800);
  --foreground-primary-le: var(--primary-main);
  --foreground-background-he: var(--gray-900);
  --foreground-background-me: var(--gray-600);
  --foreground-background-disable: var(--gray-400);
  --foreground-surface-he: var(--gray-900);
  --foreground-surface-me: var(--gray-600);
  --foreground-surface-disable: var(--gray-400);
  --foreground-outline-darker: var(--gray-300);
  --foreground-outline-lighter: var(--gray-200);

  /* Layout and Dimension */
  --fixed-width: 600px;
  --max-width: 600px;
  --bottom-nav-height: 70px;
  --header-height: 64px;

  /* Border Radius */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.12);
  --shadow-bottom-bar: 0 -4px 16px rgba(0, 0, 0, 0.06);
  --shadow-green: 0 4px 14px rgba(0, 216, 16, 0.35);

  /* Transition */
  --transition-fast: 0.15s ease-in-out;
  --transition-normal: 0.25s ease-in-out;
  --transition-slow: 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}