/*
 * Blake Stays Design System
 * Coastal, clean, modern, welcoming
 */

/* Google Font Import */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap');

/* CSS Custom Properties */
:root {
  /* Primary colours */
  --color-ocean-deep: #1a4a6e;
  --color-ocean-mid: #2d6a8f;
  --color-sky-blue: #7cb9d4;
  --color-sky-light: #c5e4f3;
  
  /* Neutral colours */
  --color-sand: #e8dcc4;
  --color-sand-light: #f5f1e8;
  --color-warm-white: #fefcf9;
  
  /* Text colours */
  --color-text-primary: #1a4a6e;
  --color-text-secondary: #2d6a8f;
  --color-text-muted: #6b8a9e;
  
  /* Semantic colours */
  --color-success: #2e7d5a;
  --color-success-light: #e8f5e9;
  --color-warning: #c77d00;
  --color-warning-light: #fff3e0;
  --color-danger: #c0392b;
  --color-danger-light: #fdecea;
}

/* Base Typography */
body {
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--color-text-secondary);
  line-height: 1.6;
}

.font-outfit {
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--color-text-primary);
  font-weight: 600;
  line-height: 1.3;
}

/* ========================================
   Blake Stays Color Utility Classes
   ======================================== */

/* Background Colors */
.bg-ocean-deep { background-color: var(--color-ocean-deep) !important; }
.bg-ocean-mid { background-color: var(--color-ocean-mid) !important; }
.bg-sky-blue { background-color: var(--color-sky-blue) !important; }
.bg-sky-light { background-color: var(--color-sky-light) !important; }
.bg-sand { background-color: var(--color-sand) !important; }
.bg-sand-light { background-color: var(--color-sand-light) !important; }
.bg-warm-white { background-color: var(--color-warm-white) !important; }
.bg-success { background-color: var(--color-success) !important; }
.bg-success-light { background-color: var(--color-success-light) !important; }
.bg-warning { background-color: var(--color-warning) !important; }
.bg-warning-light { background-color: var(--color-warning-light) !important; }
.bg-danger { background-color: var(--color-danger) !important; }
.bg-danger-light { background-color: var(--color-danger-light) !important; }

/* Text Colors */
.text-ocean-deep { color: var(--color-ocean-deep) !important; }
.text-ocean-mid { color: var(--color-ocean-mid) !important; }
.text-sky-blue { color: var(--color-sky-blue) !important; }
.text-sky-light { color: var(--color-sky-light) !important; }
.text-sand { color: var(--color-sand) !important; }
.text-sand-light { color: var(--color-sand-light) !important; }
.text-warm-white { color: var(--color-warm-white) !important; }
.text-success { color: var(--color-success) !important; }
.text-warning { color: var(--color-warning) !important; }
.text-danger { color: var(--color-danger) !important; }

/* Border Colors */
.border-ocean-deep { border-color: var(--color-ocean-deep) !important; }
.border-ocean-mid { border-color: var(--color-ocean-mid) !important; }
.border-sky-blue { border-color: var(--color-sky-blue) !important; }
.border-sky-light { border-color: var(--color-sky-light) !important; }
.border-sand { border-color: var(--color-sand) !important; }
.border-sand-light { border-color: var(--color-sand-light) !important; }
.border-warm-white { border-color: var(--color-warm-white) !important; }
.border-success { border-color: var(--color-success) !important; }
.border-warning { border-color: var(--color-warning) !important; }
.border-danger { border-color: var(--color-danger) !important; }

/* Hover States */
.hover\:bg-ocean-mid:hover { background-color: var(--color-ocean-mid) !important; }
.hover\:bg-ocean-deep:hover { background-color: var(--color-ocean-deep) !important; }
.hover\:bg-sand-light:hover { background-color: var(--color-sand-light) !important; }
.hover\:text-ocean-deep:hover { color: var(--color-ocean-deep) !important; }
.hover\:text-ocean-mid:hover { color: var(--color-ocean-mid) !important; }
.hover\:opacity-80:hover { opacity: 0.8 !important; }
.hover\:opacity-90:hover { opacity: 0.9 !important; }

/* Focus States */
.focus\:border-sky-blue:focus { border-color: var(--color-sky-blue) !important; }
.focus\:ring-sky-blue:focus { --tw-ring-color: var(--color-sky-blue); }
.focus\:ring-sky-light:focus { --tw-ring-color: var(--color-sky-light); }

/* Form Inputs */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="tel"],
textarea,
select {
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* Focus States for Accessibility */
input:focus,
select:focus,
textarea:focus,
button:focus {
  outline: none;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--color-sand-light);
}

::-webkit-scrollbar-thumb {
  background: var(--color-sand);
  border-radius: 9999px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-ocean-mid);
}