/* User-Facing App Color Variables */
:root {
  /* Text Colors */
  --text-primary: #0f172a;        /* slate-900 / headings */
  --text-secondary: #334155;      /* slate-700 / subheadings */
  --text-muted: #64748b;          /* slate-500 / muted text */
  --text-light: #94a3b8;          /* slate-400 / very muted text */
  --text-link: #0f766e;           /* teal-700 / links */
  --text-inverse: #ffffff;        /* white text on dark/primary */

  /* Icon Colors */
  --icon-default: #64748b;        /* slate-500 / default icon */
  --icon-muted: #94a3b8;          /* slate-400 / muted icon */
  --icon-primary: #0f766e;        /* teal-700 / primary icon */
  --icon-accent: #d97706;         /* amber-600 / rating/accent icon */

  /* Background Colors */
  --bg-page: #f8fafc;             /* slate-50 / page background */
  --bg-card: #ffffff;             /* white / card background */
  --bg-header: #ffffff;           /* white / header background */
  --bg-bottom-nav: rgba(255, 255, 255, 0.95); /* bottom nav bg */
  --bottom-nav-bg: #e8f5f0;       /* very pale brand primary green/teal tint */
  --bg-surface: #f1f5f9;          /* slate-100 / surface / hover */
  --bg-accent-light: #f0fdf4;     /* emerald-50 / success light bg */
  --bg-badge: #fef3c7;            /* amber-100 / badge bg */

  /* Border Colors */
  --border-default: #e2e8f0;      /* slate-200 / default border */
  --border-light: #f1f5f9;        /* slate-100 / subtle border */
  --border-primary: #0f766e;      /* teal-700 / active/primary border */

  /* Button Colors */
  --btn-primary-bg: #0f766e;      /* teal-700 */
  --btn-primary-hover: #0d9488;   /* teal-600 */
  --btn-primary-text: #ffffff;
  --btn-secondary-bg: #f1f5f9;    /* slate-100 */
  --btn-secondary-hover: #e2e8f0; /* slate-200 */
  --btn-secondary-text: #334155;  /* slate-700 */

  /* Brand / Accent Colors */
  --brand-primary: #0f766e;       /* teal-700 */
  --brand-primary-hover: #0d9488; /* teal-600 */
  --brand-accent: #d97706;        /* amber-600 */
  --price-color: #0f766e;         /* teal-700 / price text */
  --discount-badge-bg: #ef4444;   /* red-500 / discount badge */
  --discount-badge-text: #ffffff;

  /* Status Colors */
  --status-success-bg: #d1fae5;   /* emerald-100 */
  --status-success-text: #065f46; /* emerald-800 */
  --status-error-bg: #fee2e2;     /* rose-100 */
  --status-error-text: #991b1b;   /* rose-800 */
  --status-warning-bg: #fef3c7;   /* amber-100 */
  --status-warning-text: #92400e; /* amber-800 */
  --status-info-bg: #e0f2fe;      /* sky-100 */
  --status-info-text: #0369a1;    /* sky-800 */

  /* ===== Admin Panel Colors ===== */
  /* Sidebar */
  --admin-sidebar-bg: var(--bg-card);           /* white */
  --admin-sidebar-text: var(--text-secondary);   /* #334155 */
  --admin-sidebar-hover-bg: var(--bg-surface);  /* #f1f5f9 */
  --admin-sidebar-hover-text: var(--text-primary); /* #0f172a */
  --admin-sidebar-active-bg: #f0fdfa;            /* teal-50 */
  --admin-sidebar-active-text: var(--brand-primary); /* teal-700 */
  --admin-sidebar-active-border: #ccfbf1;        /* teal-100 */

  /* Body & Layout */
  --admin-body-bg: var(--bg-page);               /* #f8fafc */
  --admin-body-text: #1e293b;                    /* slate-800 */

  /* Cards */
  --admin-card-bg: var(--bg-card);               /* white */
  --admin-card-border: var(--border-default);     /* #e2e8f0 */

  /* Tables */
  --admin-table-header-bg: var(--bg-page);       /* #f8fafc */
  --admin-table-header-text: #475569;            /* slate-600 */
  --admin-table-border: var(--border-default);     /* #e2e8f0 */
  --admin-table-row-border: var(--border-light); /* #f1f5f9 */
  --admin-table-row-text: var(--text-secondary);   /* #334155 */

  /* Chat Grid */
  --admin-chat-grid-bg: var(--bg-card);           /* white */
  --admin-chat-grid-border: var(--border-default); /* #e2e8f0 */

  /* Status Colors */
  --admin-status-paid: var(--status-success-text);       /* emerald-800 */
  --admin-status-paid-bg: var(--status-success-bg);     /* emerald-100 */
  --admin-status-unpaid: var(--status-error-text);       /* rose-800 */
  --admin-status-unpaid-bg: var(--status-error-bg);     /* rose-100 */
  --admin-status-pending: var(--status-warning-text);    /* amber-800 */
  --admin-status-pending-bg: var(--status-warning-bg);  /* amber-100 */

  --admin-status-processing: var(--status-info-text);    /* sky-800 */
  --admin-status-processing-bg: var(--status-info-bg);  /* sky-100 */
  --admin-status-shipped: #2563eb;                       /* blue-600 */
  --admin-status-shipped-bg: #eff6ff;                   /* blue-50 */
  --admin-status-out-for-delivery: #7c3aed;              /* purple-600 */
  --admin-status-out-for-delivery-bg: #f5f3ff;          /* purple-50 */
  --admin-status-delivered: var(--status-success-text);  /* emerald-800 */
  --admin-status-delivered-bg: var(--status-success-bg);/* emerald-100 */
  --admin-status-cancelled: var(--status-error-text);    /* rose-800 */
  --admin-status-cancelled-bg: var(--status-error-bg);  /* rose-100 */

  /* General Palette Mapping for Admin Customizations */
  --admin-slate-800: #1e293b;
  --admin-slate-600: #475569;
  --admin-slate-500: var(--text-muted);                  /* #64748b */
  --admin-slate-400: var(--text-light);                  /* #94a3b8 */
  --admin-slate-300: #cbd5e1;
  --admin-slate-200: var(--border-default);              /* #e2e8f0 */
  --admin-slate-100: var(--bg-surface);                  /* #f1f5f9 */
  --admin-slate-50: var(--bg-page);                      /* #f8fafc */

  --admin-teal-700: var(--brand-primary);                /* #0f766e */
  --admin-teal-600: var(--brand-primary-hover);          /* #0d9488 */
  --admin-teal-50: #f0fdfa;

  --admin-blue-600: #2563eb;
  --admin-blue-50: #eff6ff;

  --admin-purple-600: #7c3aed;
  --admin-purple-50: #f5f3ff;

  --admin-amber-600: var(--brand-accent);                /* #d97706 */
  --admin-amber-50: #fffbeb;

  --admin-red-600: #dc2626;
  --admin-red-50: #fef2f2;
}