/* =========================================================
   GrociKart Design Tokens
   Brand extracted from official logo
   ========================================================= */

.dx-app{
  /* -------------------------------------------------------
     BRAND COLORS
  ------------------------------------------------------- */

  /* Primary Greens */
  --brand: #4CAF2F;          /* main cart green */
  --brand-600: #3E8E26;      /* darker hover */
  --brand-700: #2F6D1D;      /* deep admin green */

  /* Accent Yellow */
  --accent: #FFC107;         /* GrociKart yellow */
  --accent-600: #E0A800;

  /* Status Colors */
  --success: #4CAF2F;
  --warning: #FFC107;
  --danger: #E53935;
  --info: #2BB0ED;

  /* -------------------------------------------------------
     BACKGROUNDS & SURFACES
  ------------------------------------------------------- */

  --bg: #F6F8FB;             /* app background */
  --surface: #FFFFFF;        /* cards */
  --surface-2: #F9FBFF;      /* table headers / alt */

  /* -------------------------------------------------------
     TEXT COLORS
  ------------------------------------------------------- */

  --text: #1A1F2C;           /* primary text */
  --text-soft: #374151;
  --muted: #6B7280;
  --muted-2: #9CA3AF;

  /* -------------------------------------------------------
     BORDERS & DIVIDERS
  ------------------------------------------------------- */

  --border: #E5E7EB;
  --border-strong: #D1D5DB;

  /* -------------------------------------------------------
     RADIUS SYSTEM
  ------------------------------------------------------- */

  --r-xs: 8px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 18px;
  --r-xl: 22px;

  /* -------------------------------------------------------
     SHADOW SYSTEM (Premium, Soft)
  ------------------------------------------------------- */

  --shadow-xs: 0 2px 6px rgba(26,31,44,.06);
  --shadow-sm: 0 6px 18px rgba(26,31,44,.08);
  --shadow-md: 0 14px 40px rgba(26,31,44,.12);
  --shadow-lg: 0 30px 80px rgba(26,31,44,.18);

  /* Brand glow (used in login, CTA, focus) */
  --glow-brand: 0 12px 26px rgba(76,175,47,.35);
  --glow-accent: 0 12px 26px rgba(255,193,7,.35);

  /* -------------------------------------------------------
     SPACING SCALE
  ------------------------------------------------------- */

  --gap-1: 6px;
  --gap-2: 10px;
  --gap-3: 14px;
  --gap-4: 18px;
  --gap-5: 24px;
  --gap-6: 32px;

  /* -------------------------------------------------------
     LAYOUT
  ------------------------------------------------------- */

  --sidebar-w: 260px;
  --topbar-h: 64px;

  /* -------------------------------------------------------
     FOCUS / ACCESSIBILITY
  ------------------------------------------------------- */

  --ring: 0 0 0 4px rgba(76,175,47,.25);

    /* Typography */
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", "Helvetica Neue", sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-16: 16px;
  --fs-18: 18px;
  --fs-22: 22px;
  --fs-28: 28px;

  --lh-1: 1.1;
  --lh-2: 1.3;
  --lh-3: 1.5;

  /* Page spacing */
  --page-pad: 18px;
  --page-pad-lg: 22px;

  /* Gradients */
  --grad-brand: linear-gradient(135deg, var(--brand), var(--brand-700));
  --grad-soft: radial-gradient(900px 420px at 20% 0%, rgba(76,175,47,.10), transparent 60%),
               radial-gradient(800px 360px at 90% 10%, rgba(255,193,7,.08), transparent 60%);

  /* Accessibility */
  --focus-outline: 2px solid rgba(76,175,47,.45);

}