/* ============================================================
   TourCRM Design System
   Fonts: DM Sans (body), DM Serif Display (headings)
   Icons: Lucide via CDN
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300..700;1,9..40,300..700&family=DM+Serif+Display&display=swap');

/* ---- CSS Custom Properties (Tokens) ---- */

:root {
  /* -- Spacing scale (4px base) -- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* -- Typography -- */
  --font-body: 'DM Sans', system-ui, -apple-system, sans-serif;
  --font-display: 'DM Serif Display', Georgia, serif;

  --text-xs: 0.75rem;    /* 12px */
  --text-sm: 0.75rem;    /* 12px */
  --text-base: 0.875rem; /* 14px */
  --text-md: 1rem;       /* 16px */
  --text-lg: 1.125rem;   /* 18px */
  --text-xl: 1.25rem;    /* 20px */
  --text-2xl: 1.5rem;    /* 24px */
  --text-3xl: 1.875rem;  /* 30px */

  --leading-tight: 1.25;
  --leading-normal: 1.5;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* -- Border radius -- */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-full: 9999px;

  /* -- Shadows -- */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.06);

  /* -- Transitions -- */
  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 300ms ease;

  /* -- Layout -- */
  --sidebar-width: 260px;
  --sidebar-collapsed-width: 64px;
  --header-height: 56px;

  /* -- Breakpoints (reference, used in @media) -- */
  /* mobile: <768px, tablet: 768-1023px, desktop: >=1024px */

  /* -- Z-index layers -- */
  --z-base: 0;
  --z-sticky: 50;
  --z-sidebar: 100;
  --z-sidebar-overlay: 99;
  --z-dropdown: 200;
  --z-toast: 300;
  --z-modal-overlay: 400;
  --z-modal: 500;
  --z-tooltip: 600;
}

/* ---- Light Theme (default) ---- */
:root,
[data-theme="light"] {
  --color-bg: #FAFAF8;
  --color-bg-surface: #FFFFFF;
  --color-bg-surface-hover: #F5F5F3;
  --color-bg-surface-active: #EEEEE9;
  --color-bg-muted: #F0F0EC;
  --color-bg-sidebar: #1C1917;

  --color-text: #1C1917;
  --color-text-secondary: #57534E;
  --color-text-muted: #A8A29E;
  --color-text-inverse: #FAFAF8;
  --color-text-sidebar: #E7E5E4;
  --color-text-sidebar-muted: #A8A29E;

  --color-border: #E7E5E4;
  --color-border-strong: #D6D3D1;

  --color-primary: #2563EB;
  --color-primary-hover: #1D4ED8;
  --color-primary-light: #EFF6FF;
  --color-primary-text: #FFFFFF;

  --color-success: #16A34A;
  --color-success-light: #F0FDF4;
  --color-warning: #D97706;
  --color-warning-light: #FFFBEB;
  --color-danger: #DC2626;
  --color-danger-light: #FEF2F2;
  --color-info: #0891B2;
  --color-info-light: #ECFEFF;

  /* Status badge colors */
  --color-status-new: #3B82F6;
  --color-status-processing: #F59E0B;
  --color-status-confirmed: #10B981;
  --color-status-paid: #059669;
  --color-status-on-tour: #8B5CF6;
  --color-status-completed: #6B7280;
  --color-status-cancelled: #EF4444;
}

/* ---- Dark Theme ---- */
[data-theme="dark"] {
  --color-bg: #0C0A09;
  --color-bg-surface: #1C1917;
  --color-bg-surface-hover: #292524;
  --color-bg-surface-active: #44403C;
  --color-bg-muted: #292524;
  --color-bg-sidebar: #0C0A09;

  --color-text: #FAFAF8;
  --color-text-secondary: #D6D3D1;
  --color-text-muted: #78716C;
  --color-text-inverse: #1C1917;
  --color-text-sidebar: #E7E5E4;
  --color-text-sidebar-muted: #78716C;

  --color-border: #292524;
  --color-border-strong: #44403C;

  --color-primary: #60A5FA;
  --color-primary-hover: #93C5FD;
  --color-primary-light: #1E293B;
  --color-primary-text: #0C0A09;

  --color-success: #4ADE80;
  --color-success-light: #052E16;
  --color-warning: #FBBF24;
  --color-warning-light: #422006;
  --color-danger: #F87171;
  --color-danger-light: #450A0A;
  --color-info: #22D3EE;
  --color-info-light: #083344;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
}

/* ---- Base Reset & Defaults ---- */

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

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text);
  background-color: var(--color-bg);
}

h1, h2, h3 {
  font-family: var(--font-display);
  line-height: var(--leading-tight);
}

h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); font-weight: var(--weight-semibold); font-family: var(--font-body); }

a {
  color: var(--color-primary);
  text-decoration: none;
}
a:hover { text-decoration: underline; }

/* ---- Utility Classes ---- */

.text-secondary { color: var(--color-text-secondary); }
.text-muted { color: var(--color-text-muted); }
.text-success { color: var(--color-success); }
.text-warning { color: var(--color-warning); }
.text-danger { color: var(--color-danger); }

.font-display { font-family: var(--font-display); }
.font-medium { font-weight: var(--weight-medium); }
.font-semibold { font-weight: var(--weight-semibold); }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* ---- Mobile typography: bump sizes for readability ---- */
@media (max-width: 767px) {
  :root {
    --text-xs: 0.8125rem;  /* 13px (was 12) */
    --text-sm: 0.875rem;   /* 14px (was 12) */
    --text-base: 1rem;     /* 16px (was 14) */
  }

  /* iOS auto-zoom prevention (inputs must be >=16px) */
  .input, .select, .textarea, input, select, textarea {
    font-size: 16px !important;
  }
}

/* Dark mode: slightly heavier font weight for readability */
[data-theme="dark"] body {
  -webkit-font-smoothing: auto;
}

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