/* =============================================================
   Malina Design System — Foundations
   Beauty salon CRM. Light cream theme, champagne-gold accents,
   elegant serif display paired with neutral UI sans.
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ---------- COLOR — Base surfaces (warm cream) ---------- */
  --bg-base:        #F4F1EB;   /* page background */
  --bg-elev-1:      #FFFFFF;   /* sidebar, topbar, sticky chrome */
  --bg-elev-2:      #FBFAF7;   /* cards, popovers */
  --bg-elev-3:      #EFEAE1;   /* hovered card, raised input */
  --bg-inset:       #ECE7DD;   /* recessed wells, grid cells */

  /* ---------- COLOR — Borders & dividers ---------- */
  --border-strong:  rgba(26, 23, 20, 0.22);
  --border:         rgba(26, 23, 20, 0.12);
  --border-soft:    rgba(26, 23, 20, 0.07);
  --border-dim:     var(--border-soft);  /* legacy alias */
  --divider:        rgba(26, 23, 20, 0.08);
  /* Calendar/timetable grid lines */
  --grid-line:       rgba(26, 23, 20, 0.12);
  --grid-line-soft:  rgba(26, 23, 20, 0.06);
  --grid-line-faint: rgba(26, 23, 20, 0.03);
  /* Legacy aliases — some inline styles reference --bg-surface / --bg-alt */
  --bg-surface:     var(--bg-elev-2);
  --bg-alt:         var(--bg-elev-1);
  --surface-2:      var(--bg-elev-2);
  --surface-3:      var(--bg-elev-3);
  --gold:           var(--accent);
  --teal:           #6BBFB5;
  --rose:           var(--danger);       /* asterisks on required fields */
  --text-secondary: var(--fg-muted);     /* secondary text */

  /* ---------- COLOR — Brand gold (champagne) ---------- */
  --gold-50:        #FBF4E2;
  --gold-100:       #F1E2BC;
  --gold-200:       #E8C988;   /* hover / lighter accent */
  --gold-300:       #D9B36C;   /* PRIMARY brand gold */
  --gold-400:       #C29A55;
  --gold-500:       #A87E3D;   /* pressed */
  --gold-600:       #7E5C2A;
  --gold-700:       #4A3618;

  /* Semantic gold roles */
  --accent:         var(--gold-300);
  --accent-hover:   var(--gold-200);
  --accent-press:   var(--gold-500);
  --accent-ink:     #1A1407;   /* text on gold buttons */
  --accent-tint:    rgba(217, 179, 108, 0.10);
  --accent-tint-2:  rgba(217, 179, 108, 0.18);
  --accent-border:  rgba(217, 179, 108, 0.32);

  /* ---------- COLOR — Foreground / text ---------- */
  --fg:             #1E1A15;   /* warm near-black — primary text */
  --fg-strong:      #000000;
  --fg-muted:       #6B6358;   /* secondary text, labels */
  --fg-dim:         #6B665A;   /* tertiary, placeholder — ≥4.5:1 on light surfaces */
  --fg-on-accent:   var(--accent-ink);
  /* Legacy aliases — some inline styles and older modules use --text-* names */
  --text-primary:   var(--fg);
  --text-muted:     var(--fg-muted);
  --text-dim:       var(--fg-dim);

  /* ---------- COLOR — Semantic / status ---------- */
  --success:        #5FB58A;
  --success-tint:   rgba(95, 181, 138, 0.12);
  --warning:        #E0A35C;
  --warning-tint:   rgba(224, 163, 92, 0.14);
  --danger:         #D87575;
  --danger-tint:    rgba(216, 117, 117, 0.14);
  --info:           #7BA8D9;
  --info-tint:      rgba(123, 168, 217, 0.14);

  /* ---------- COLOR — Appointment status ----------
     Single source of truth for the status palette. Mirrored in
     public/js/appointment-status.js (APPT_STATUSES) and in
     server/routes/appointments.js (STATUS_COLOR_MAP) — keep in sync. */
  --status-new:         #3B6FD4;   /* New Appointment       — Blue   */
  --status-confirmed:   #C4802F;   /* Appointment Confirmed — Orange */
  --status-arrived:     #2F8F5D;   /* Client Arrived        — Green  */
  --status-completed:   #7B4FB5;   /* Appointment Completed — Purple */
  --status-cancelled:   #6C7280;   /* Canceled Appointment  — Gray   */
  --status-not_arrived: #C4544E;   /* Didn't Arrive         — Red    */
  --status-ink:         #FFFFFF;   /* text on a filled status chip   */

  /* Appointment card surface (tinted gold over cream) */
  --appt-bg:        rgba(217, 179, 108, 0.06);
  --appt-bg-hover:  rgba(217, 179, 108, 0.10);
  --appt-border:    rgba(217, 179, 108, 0.28);
  --appt-border-strong: rgba(217, 179, 108, 0.55);

  /* ---------- TYPE — Families ---------- */
  --font-display:   'Cormorant Garamond', 'Cormorant', 'Playfair Display', Georgia, serif;
  --font-body:      'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono:      'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ---------- TYPE — Sizes (rem on 16px base) ---------- */
  --fs-xs:    11px;
  --fs-sm:    12px;
  --fs-base:  14px;
  --fs-md:    15px;
  --fs-lg:    17px;
  --fs-xl:    20px;
  --fs-2xl:   24px;
  --fs-3xl:   30px;
  --fs-4xl:   38px;
  --fs-5xl:   52px;
  --fs-display: 68px;

  /* ---------- TYPE — Line heights ---------- */
  --lh-tight:    1.1;
  --lh-snug:     1.25;
  --lh-normal:   1.45;
  --lh-relaxed:  1.6;

  /* ---------- TYPE — Letter spacing ---------- */
  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-wider:  0.08em;
  --tracking-caps:   0.14em;

  /* ---------- SPACING — 4px base ---------- */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  32px;
  --space-8:  40px;
  --space-9:  48px;
  --space-10: 64px;
  --space-11: 80px;
  --space-12: 96px;

  /* ---------- RADIUS ---------- */
  --radius-xs:  4px;
  --radius-sm:  6px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-xl:  16px;
  --radius-2xl: 22px;
  --radius-pill: 999px;

  /* ---------- SHADOW (kept subtle for light UI) ---------- */
  --shadow-xs:   0 1px 0 rgba(26, 23, 20, 0.10);
  --shadow-sm:   0 2px 6px rgba(26, 23, 20, 0.10);
  --shadow-md:   0 8px 24px rgba(26, 23, 20, 0.12);
  --shadow-lg:   0 18px 48px rgba(26, 23, 20, 0.18);
  --shadow-pop:  0 12px 32px rgba(26, 23, 20, 0.16), 0 0 0 1px var(--border);
  --shadow-gold-glow: 0 0 0 4px rgba(217,179,108,0.14);
  --ring-focus:  0 0 0 2px var(--bg-base), 0 0 0 4px var(--accent);

  /* ---------- MOTION ---------- */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:    120ms;
  --dur-base:    180ms;
  --dur-slow:    320ms;

  /* ---------- LAYOUT ---------- */
  --sidebar-w:   260px;
  --topbar-h:    64px;
  --content-max: 1440px;

  /* ---------- Z-INDEX SCALE ----------
     Single source of truth for stacking order app-wide. Higher layers
     must always beat lower ones: sticky chrome < drawers < modals <
     popovers (ctx menus, date pickers) < toasts. Mobile nav sidebar is
     a special case — it sits at 320 (supplement.css), just above
     --z-drawer-backdrop, so nav taps aren't swallowed by the backdrop. */
  --z-sticky:           100;  /* topbar / sticky chrome */
  --z-drawer-backdrop:  300;  /* client drawer's dimmed backdrop */
  --z-drawer:           310;  /* client detail drawer */
  --z-modal:            400;  /* .modal-overlay, .appt-overlay */
  --z-popover:          500;  /* ctx menus, date-picker popover */
  --z-toast:            600;  /* toast notifications — always on top */
}

/* =============================================================
   SEMANTIC TYPE — apply to native HTML elements
   ============================================================= */

html, body {
  background: var(--bg-base);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "cv11";
}

h1, .h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-4xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
  margin: 0;
}

h2, .h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-3xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
  margin: 0;
}

h3, .h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  color: var(--fg);
  margin: 0;
}

h4, .h4 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
  color: var(--fg);
  margin: 0;
}

p, .body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: var(--fg);
  margin: 0;
}

small, .caption {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--fg-muted);
}

.eyebrow, .overline {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--fg-muted);
}

.display, .hero {
  font-family: var(--font-display);
  font-weight: 500;
  font-style: italic;
  font-size: var(--fs-display);
  line-height: 1.05;
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
}

code, kbd, .mono, .tabular {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.95em;
}

/* Numerals — for prices, times, dates */
.numerals {
  font-family: var(--font-body);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum", "lnum";
}

/* Links */
a {
  color: var(--accent);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--accent-hover); }

::selection {
  background: var(--accent-tint-2);
  color: var(--fg-strong);
}

/* Scrollbars match the theme */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}

/* Respect the OS "reduce motion" preference across the whole app —
   modal/overlay/reveal animations collapse to instant transitions.
   (Landing and signup pages carry their own equivalents.) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto !important; }
}