/* ============================================================
   variables.css — ClayPOS Design Tokens
   ============================================================ */

:root {
  /* ---- Base palette ---- */
  --bg-base: #E2E8F0;                    /* soft slate neutral    */
  --bg-base-2: #DCE3ED;                  /* darker variation      */
  --clay-surface: #EDF2F7;               /* clay card surface     */
  --clay-surface-2: #E6EDF5;             /* secondary clay        */
  --clay-surface-3: #D8E0EC;             /* pressed clay          */

  /* ---- Text ---- */
  --text-primary: #1E293B;
  --text-muted: #64748B;
  --text-faint: #94A3B8;

  /* ---- Accents ---- */
  --accent-green: #059669;               /* checkout / primary    */
  --accent-green-soft: #D1FAE5;
  --accent-green-deep: #047857;
  --accent-indigo: #4F46E5;              /* secondary action      */
  --accent-indigo-soft: #E0E7FF;
  --accent-indigo-deep: #4338CA;
  --accent-red: #DC2626;                 /* void / cancel         */
  --accent-red-soft: #FEE2E2;
  --accent-red-deep: #B91C1C;
  --accent-sky: #0EA5E9;                 /* utility / badges      */
  --accent-sky-soft: #E0F2FE;
  --accent-amber: #D97706;               /* low stock warning     */
  --accent-amber-soft: #FEF3C7;
  --accent-orange: #EA580C;              /* hold order            */
  --accent-orange-soft: #FFEDD5;

  /* ---- Hairline borders (minimalist definition) ---- */
  --hairline: 1px solid rgba(148, 163, 184, 0.28);
  --hairline-strong: 1px solid rgba(148, 163, 184, 0.45);

  /* ---- Clay shadows (softened, light-touch) ---- */
  --shadow-clay-outset:
    4px 4px 8px rgba(166, 180, 200, 0.35),
    -4px -4px 8px rgba(255, 255, 255, 0.7),
    inset 1px 1px 2px rgba(255, 255, 255, 0.7),
    inset -1px -1px 2px rgba(0, 0, 0, 0.04);

  --shadow-clay-inset:
    inset 2px 2px 4px rgba(166, 180, 200, 0.35),
    inset -2px -2px 4px rgba(255, 255, 255, 0.75);

  --shadow-clay-soft:
    2px 2px 5px rgba(166, 180, 200, 0.28),
    -2px -2px 5px rgba(255, 255, 255, 0.65),
    inset 1px 1px 1px rgba(255, 255, 255, 0.6),
    inset -1px -1px 1px rgba(0, 0, 0, 0.03);

  --shadow-clay-pressed:
    inset 2px 2px 4px rgba(166, 180, 200, 0.45),
    inset -2px -2px 4px rgba(255, 255, 255, 0.7);

  --shadow-green-outset:
    4px 4px 8px rgba(5, 150, 105, 0.18),
    -3px -3px 6px rgba(255, 255, 255, 0.7),
    inset 1px 1px 2px rgba(209, 250, 229, 0.8),
    inset -1px -1px 2px rgba(4, 120, 87, 0.18);

  --shadow-indigo-outset:
    4px 4px 8px rgba(79, 70, 229, 0.18),
    -3px -3px 6px rgba(255, 255, 255, 0.7),
    inset 1px 1px 2px rgba(224, 231, 255, 0.8),
    inset -1px -1px 2px rgba(67, 56, 202, 0.15);

  --shadow-red-outset:
    4px 4px 8px rgba(220, 38, 38, 0.15),
    -3px -3px 6px rgba(255, 255, 255, 0.7),
    inset 1px 1px 2px rgba(254, 226, 226, 0.8),
    inset -1px -1px 2px rgba(185, 28, 28, 0.14);

  --shadow-orange-outset:
    4px 4px 8px rgba(234, 88, 12, 0.15),
    -3px -3px 6px rgba(255, 255, 255, 0.7),
    inset 1px 1px 2px rgba(255, 237, 213, 0.8),
    inset -1px -1px 2px rgba(194, 65, 12, 0.14);

  /* ---- Gradients ---- */
  --grad-clay: linear-gradient(145deg, #F5F9FD 0%, #E9F0F8 100%);
  --grad-green: linear-gradient(145deg, #10B981 0%, #047857 100%);
  --grad-indigo: linear-gradient(145deg, #6366F1 0%, #4338CA 100%);
  --grad-red: linear-gradient(145deg, #F87171 0%, #B91C1C 100%);
  --grad-sky: linear-gradient(145deg, #38BDF8 0%, #0284C7 100%);

  /* ---- Radii ---- */
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 24px;
  --r-pill: 999px;

  /* ---- Misc ---- */
  --ease: all 0.15s ease-in-out;
  --ring: 0 0 0 3px rgba(79, 70, 229, 0.25);
}