/* =====================================================
   Velvet Salon Management System — Base Styles
   ===================================================== */

/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;600;700&family=Inter:wght@300;400;500;600;700&family=Cairo:wght@300;400;500;600;700&display=swap');

/* Reset */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  background-color: var(--bg);
  color: var(--text);
  line-height: 1.6;
  min-height: 100vh;
}

/* Arabic body font */
[dir="rtl"] body,
.rtl body {
  font-family: var(--font-arabic);
}

/* Heading */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.3;
  color: var(--text);
}

[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3 {
  font-family: var(--font-arabic);
}

h1 { font-size: 1.875rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.125rem; }

/* Links */
a {
  color: var(--primary);
  text-decoration: none;
  transition: color var(--transition-fast);
}
a:hover { color: var(--primary-hover); }

/* Images */
img { max-width: 100%; height: auto; display: block; }

/* Lists */
ul, ol { list-style: none; }

/* Form basics */
input, select, textarea, button {
  font-family: inherit;
  font-size: inherit;
}

/* Selection */
::selection {
  background: var(--primary-light);
  color: var(--primary);
}

/* Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 9999px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* Utility — Spacing */
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: var(--space-xs); }
.mt-2 { margin-top: var(--space-sm); }
.mt-3 { margin-top: var(--space-md); }
.mt-4 { margin-top: var(--space-lg); }
.mt-5 { margin-top: var(--space-xl); }
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: var(--space-xs); }
.mb-2 { margin-bottom: var(--space-sm); }
.mb-3 { margin-bottom: var(--space-md); }
.mb-4 { margin-bottom: var(--space-lg); }
.mb-5 { margin-bottom: var(--space-xl); }

.p-0 { padding: 0; }
.p-3 { padding: var(--space-md); }
.p-4 { padding: var(--space-lg); }
.p-5 { padding: var(--space-xl); }
.px-4 { padding-left: var(--space-lg); padding-right: var(--space-lg); }
.py-3 { padding-top: var(--space-md); padding-bottom: var(--space-md); }

/* Utility — Text */
.text-primary   { color: var(--primary); }
.text-secondary { color: var(--text-secondary); }
.text-muted     { color: var(--text-muted); }
.text-success   { color: var(--success); }
.text-warning   { color: var(--warning); }
.text-danger    { color: var(--danger); }
.text-info      { color: var(--info); }
.text-center    { text-align: center; }
.text-end       { text-align: right; }
[dir="rtl"] .text-end { text-align: left; }
.text-sm        { font-size: 0.875rem; }
.text-xs        { font-size: 0.75rem; }
.text-lg        { font-size: 1.125rem; }
.font-medium    { font-weight: 500; }
.font-semibold  { font-weight: 600; }
.font-bold      { font-weight: 700; }

/* Utility — Display */
.d-none     { display: none; }
.d-flex     { display: flex; }
.d-grid     { display: grid; }
.d-block    { display: block; }
.d-inline   { display: inline; }
.d-inline-block { display: inline-block; }
.flex-col   { flex-direction: column; }
.items-center   { align-items: center; }
.items-start    { align-items: flex-start; }
.items-end      { align-items: flex-end; }
.justify-center { justify-content: center; }
.justify-between{ justify-content: space-between; }
.justify-end    { justify-content: flex-end; }
.gap-1 { gap: var(--space-xs); }
.gap-2 { gap: var(--space-sm); }
.gap-3 { gap: var(--space-md); }
.gap-4 { gap: var(--space-lg); }
.gap-5 { gap: var(--space-xl); }
.flex-1 { flex: 1; }
.flex-wrap { flex-wrap: wrap; }

/* Utility — Backgrounds */
.bg-primary   { background-color: var(--primary); }
.bg-surface   { background-color: var(--surface); }
.bg-success   { background-color: var(--success-light); }
.bg-warning   { background-color: var(--warning-light); }
.bg-danger    { background-color: var(--danger-light); }
.bg-info      { background-color: var(--info-light); }

/* Utility — Border */
.rounded-sm  { border-radius: var(--radius-sm); }
.rounded     { border-radius: var(--radius-md); }
.rounded-lg  { border-radius: var(--radius-lg); }
.rounded-xl  { border-radius: var(--radius-xl); }
.rounded-full{ border-radius: var(--radius-full); }

/* Utility — Shadow */
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow    { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }

/* Utility — Width */
.w-full  { width: 100%; }
.w-auto  { width: auto; }

/* Utility — Overflow */
.overflow-hidden { overflow: hidden; }
.overflow-auto   { overflow: auto; }

/* Responsive hide */
@media (max-width: 768px) {
  .hide-mobile { display: none !important; }
}
@media (min-width: 769px) {
  .hide-desktop { display: none !important; }
}

/* Grid */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-lg); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-lg); }
.grid-6 { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--space-lg); }

@media (max-width: 1200px) {
  .grid-4 { grid-template-columns: repeat(3, 1fr); }
  .grid-6 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 992px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-6 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 576px) {
  .grid-2, .grid-3, .grid-4, .grid-6 { grid-template-columns: 1fr; }
}