/* ============================================================================
   ENSŌ BRAND DESIGN SYSTEM - Quiet Luxury with Frosted Glass
   Based on ENSŌ Brand Bible V1 + Glasmorphism Frosting
   ============================================================================ */

/* ============================================================================
   DESIGN TOKENS & CSS VARIABLES
   ============================================================================ */

:root {
  /* PRIMARY PALETTE - 80% greige, 10% black, 10% white rule */
  --enso-greige: #CFC9BC;
  --enso-black: #000000;
  --enso-room-white: #FFFFF8;
  --enso-sage: #CBD5C0;
  --enso-charcoal: #2B2B2A;

  /* TYPOGRAPHY */
  --font-title: 'Tenor Sans', serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-subtitle: 'Raleway', sans-serif;

  /* SPACING & SIZING */
  --radius-subtle: 4px;
  --radius-soft: 8px;
  --radius-calm: 14px;

  /* SHADOWS - soft, minimal */
  --shadow-minimal: 0 4px 12px rgba(0, 0, 0, 0.04);
  --shadow-soft: 0 8px 32px rgba(0, 0, 0, 0.08);
}

/* ============================================================================
   GLOBAL BODY & LAYOUT - Sacred Space Principles
   ============================================================================ */

body {
  font-family: var(--font-body);
  background-color: var(--enso-room-white);
  color: var(--enso-black);
  line-height: 1.7;
  font-weight: 300;
}

main.page-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 3rem 2rem;
}

/* 70% white/greige space principle */
@media (min-width: 1024px) {
  main.page-container {
    padding: 4rem 3rem;
  }
}

/* ============================================================================
   TYPOGRAPHY - Editorial, Strak, Stil
   ============================================================================ */

h1, h2, h3, h4, h5, h6,
.enso-title,
.brand-text {
  font-family: var(--font-title);
  font-weight: 400;
  letter-spacing: 0.8px;
  color: var(--enso-black);
  margin-bottom: 1.5rem;
}

h1 {
  font-size: 2.5rem;
  letter-spacing: 1.2px;
}

h2 {
  font-size: 2rem;
  letter-spacing: 1px;
}

h3 {
  font-size: 1.5rem;
  letter-spacing: 0.8px;
}

p {
  font-weight: 300;
  opacity: 0.95;
}

.enso-subtitle,
.enso-tagline {
  font-family: var(--font-subtitle);
  font-weight: 200;
  color: var(--enso-charcoal);
  opacity: 0.8;
  letter-spacing: 0.5px;
}

/* ============================================================================
   NAVIGATION & HEADER - Clean, Breathable
   ============================================================================ */

nav.navbar,
header {
  background-color: var(--enso-room-white);
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
  padding: 1.5rem 2rem;
  box-shadow: var(--shadow-minimal);
}

.navbar-brand {
  font-family: var(--font-title);
  font-size: 1.4rem;
  color: var(--enso-black) !important;
  letter-spacing: 1.5px;
  font-weight: 400;
}

nav a,
header a {
  font-family: var(--font-body);
  color: var(--enso-charcoal) !important;
  font-weight: 400;
  text-decoration: none;
  opacity: 0.85;
  transition: opacity 0.3s ease;
  padding: 0.5rem 0;
}

nav a:hover,
header a:hover {
  opacity: 1;
  border-bottom: 1px solid var(--enso-charcoal);
}

/* ============================================================================
   GLASSMORPHISM - FROSTED GLASS UTILITY
   ============================================================================ */

.enso-glass {
  background: rgba(255, 255, 248, 0.4);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: var(--radius-calm);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
  position: relative;
  overflow: hidden;
}

/* Subtle inner highlight for glass effect */
.enso-glass::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-calm);
  background: linear-gradient(
    to bottom right,
    rgba(255, 255, 255, 0.25),
    rgba(255, 255, 255, 0.05)
  );
  pointer-events: none;
}

.enso-glass > * {
  position: relative;
  z-index: 1;
}

/* ============================================================================
   CARDS & CONTAINERS - Soft, Minimal with Optional Frosting
   ============================================================================ */

.card,
.card-like,
.session-card,
.booking-card,
.dashboard-card,
.market-card {
  background-color: var(--enso-room-white);
  border: 1px solid rgba(0, 0, 0, 0.03);
  border-radius: var(--radius-calm);
  box-shadow: var(--shadow-minimal);
  transition: all 0.4s ease;
  padding: 2rem;
}

.card:hover,
.card-like:hover,
.session-card:hover,
.booking-card:hover,
.market-card:hover {
  box-shadow: var(--shadow-soft);
  transform: translateY(-1px);
}

/* Frosted glass variant for premium cards */
.card.enso-glass,
.session-card.enso-glass,
.booking-card.enso-glass {
  background: rgba(255, 255, 248, 0.4);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.35);
}

.card-header,
.card-like-header {
  background-color: transparent;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
  padding: 0 0 1.5rem 0;
}

.card-title {
  font-family: var(--font-title);
  font-size: 1.25rem;
  color: var(--enso-black);
  letter-spacing: 0.5px;
  margin-bottom: 0.5rem;
}

.card-text,
.card-like-text {
  font-weight: 300;
  color: var(--enso-charcoal);
  opacity: 0.85;
}

/* ============================================================================
   BUTTONS - Minimal, Intentional
   ============================================================================ */

.btn,
button {
  font-family: var(--font-body);
  font-weight: 400;
  transition: all 0.3s ease;
  border: none;
  letter-spacing: 0.3px;
}

/* PRIMARY BUTTON - Black, Calm */
.btn-primary,
.enso-btn-primary {
  background-color: var(--enso-black);
  color: var(--enso-room-white);
  border-radius: var(--radius-calm);
  padding: 0.8rem 2rem;
  box-shadow: var(--shadow-minimal);
  font-weight: 400;
}

.btn-primary:hover,
.btn-primary:focus,
.enso-btn-primary:hover,
.enso-btn-primary:focus {
  background-color: var(--enso-charcoal);
  color: var(--enso-room-white);
  box-shadow: var(--shadow-soft);
  transform: translateY(-1px);
}

/* SECONDARY / GHOST BUTTON - Transparent, Border */
.btn-secondary,
.btn-outline-secondary,
.enso-btn-ghost {
  background-color: transparent;
  border: 1px solid var(--enso-charcoal);
  color: var(--enso-charcoal);
  border-radius: var(--radius-calm);
  padding: 0.8rem 2rem;
  font-weight: 400;
}

.btn-secondary:hover,
.btn-outline-secondary:hover,
.enso-btn-ghost:hover {
  background-color: rgba(0, 0, 0, 0.02);
  border-color: var(--enso-black);
  color: var(--enso-black);
}

/* ============================================================================
   FORMS & INPUTS - Soft Focus
   ============================================================================ */

.form-control,
.form-select,
textarea {
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: var(--radius-soft);
  font-family: var(--font-body);
  padding: 0.75rem 1rem;
  transition: all 0.3s ease;
  background-color: var(--enso-room-white);
  font-weight: 300;
}

.form-control:focus,
.form-select:focus,
textarea:focus {
  border-color: var(--enso-sage);
  box-shadow: 0 0 0 3px rgba(203, 213, 192, 0.1);
  outline: none;
}

.form-label {
  font-family: var(--font-body);
  color: var(--enso-black);
  font-weight: 400;
  margin-bottom: 0.75rem;
  letter-spacing: 0.2px;
}

/* ============================================================================
   MARKET, TIMETABLE & DASHBOARD - Clean Grid, Breathing Space
   ============================================================================ */

.market-title,
.session-title,
.timetable-header {
  font-family: var(--font-title);
  font-size: 1.1rem;
  color: var(--enso-black);
  letter-spacing: 0.5px;
  margin-bottom: 0.75rem;
}

.market-price,
.session-price {
  font-size: 1.3rem;
  color: var(--enso-black);
  font-weight: 500;
  margin: 1rem 0;
  letter-spacing: 0.2px;
}

.market-info,
.session-info {
  font-size: 0.95rem;
  font-weight: 300;
  color: var(--enso-charcoal);
  opacity: 0.8;
  margin: 0.5rem 0;
}

/* Timetable Grid - Minimal lines */
.timetable-grid,
.calendar-grid {
  border-collapse: collapse;
  width: 100%;
  background-color: var(--enso-room-white);
  border-radius: var(--radius-calm);
  overflow: hidden;
  box-shadow: var(--shadow-minimal);
}

.timetable-grid th,
.calendar-grid th {
  background-color: var(--enso-greige);
  color: var(--enso-black);
  padding: 1.2rem;
  text-align: left;
  font-family: var(--font-title);
  font-weight: 400;
  font-size: 0.95rem;
  letter-spacing: 0.4px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

.timetable-grid td,
.calendar-grid td {
  padding: 1.2rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.03);
  font-weight: 300;
}

.timetable-grid tr:hover,
.calendar-grid tr:hover {
  background-color: rgba(207, 201, 188, 0.08);
}

/* ============================================================================
   MODAL & BOOKING OVERLAY - Serene, Spacious with Frosting
   ============================================================================ */

.modal-content,
.booking-modal {
  background-color: var(--enso-room-white);
  border: 1px solid rgba(0, 0, 0, 0.04);
  border-radius: var(--radius-calm);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
}

/* Frosted glass modal variant */
.modal-content.enso-glass,
.booking-modal.enso-glass {
  background: rgba(255, 255, 248, 0.4);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
}

.modal-header,
.booking-modal-header {
  background-color: transparent;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
  padding: 2rem;
}

.modal-title {
  font-family: var(--font-title);
  color: var(--enso-black);
  font-weight: 400;
  font-size: 1.25rem;
  letter-spacing: 0.5px;
}

.modal-body,
.booking-modal-body {
  padding: 2rem;
}

.modal-footer {
  border-top: 1px solid rgba(0, 0, 0, 0.04);
  padding: 2rem;
  background-color: transparent;
}

/* ============================================================================
   DASHBOARD - Intentional Information Hierarchy
   ============================================================================ */

.dashboard-header,
.dashboard-section {
  padding: 2.5rem;
  margin-bottom: 2rem;
  background-color: var(--enso-room-white);
  border-radius: var(--radius-calm);
  box-shadow: var(--shadow-minimal);
}

/* Frosted glass dashboard variant */
.dashboard-header.enso-glass,
.dashboard-section.enso-glass {
  background: rgba(255, 255, 248, 0.4);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.35);
}

.dashboard-title {
  font-family: var(--font-title);
  font-size: 1.75rem;
  color: var(--enso-black);
  letter-spacing: 0.8px;
  margin-bottom: 1.5rem;
}

.dashboard-stat,
.summary-card {
  background-color: var(--enso-room-white);
  border: 1px solid rgba(0, 0, 0, 0.03);
  border-radius: var(--radius-calm);
  padding: 2rem;
  text-align: center;
  box-shadow: var(--shadow-minimal);
}

/* Frosted glass stat variant */
.dashboard-stat.enso-glass,
.summary-card.enso-glass {
  background: rgba(255, 255, 248, 0.4);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.35);
}

.dashboard-stat-number {
  font-family: var(--font-title);
  font-size: 2rem;
  color: var(--enso-black);
  font-weight: 400;
  letter-spacing: 0.5px;
}

.dashboard-stat-label {
  font-size: 0.95rem;
  font-weight: 300;
  color: var(--enso-charcoal);
  opacity: 0.8;
  margin-top: 0.75rem;
  letter-spacing: 0.2px;
}

/* ============================================================================
   AUTHENTICATION PAGES - Sacred, Intentional Flow
   ============================================================================ */

.auth-form,
.login-form,
.register-form {
  max-width: 420px;
  margin: 4rem auto;
  padding: 3rem;
  background-color: var(--enso-room-white);
  border-radius: var(--radius-calm);
  box-shadow: var(--shadow-minimal);
}

/* Frosted glass auth form */
.auth-form.enso-glass,
.login-form.enso-glass,
.register-form.enso-glass {
  background: rgba(255, 255, 248, 0.4);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.35);
}

.auth-form-title {
  font-family: var(--font-title);
  font-size: 1.75rem;
  text-align: center;
  margin-bottom: 2.5rem;
  color: var(--enso-black);
  letter-spacing: 0.8px;
}

.auth-form-group {
  margin-bottom: 1.5rem;
}

/* ============================================================================
   SUCCESS & CONFIRMATION - Celebration of Space
   ============================================================================ */

.success-container,
.booking-success,
.confirmation-card {
  max-width: 500px;
  margin: 3rem auto;
  padding: 3rem;
  text-align: center;
  background-color: var(--enso-room-white);
  border-radius: var(--radius-calm);
  box-shadow: var(--shadow-minimal);
}

/* Frosted glass success variant */
.success-container.enso-glass,
.booking-success.enso-glass,
.confirmation-card.enso-glass {
  background: rgba(255, 255, 248, 0.4);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.35);
}

.success-title {
  font-family: var(--font-title);
  font-size: 1.75rem;
  color: var(--enso-black);
  letter-spacing: 0.8px;
  margin-bottom: 1.5rem;
}

.success-message {
  font-size: 1rem;
  font-weight: 300;
  color: var(--enso-charcoal);
  opacity: 0.85;
  margin-bottom: 2rem;
  line-height: 1.8;
}

.qr-code-container {
  background-color: var(--enso-greige);
  border-radius: var(--radius-calm);
  padding: 2rem;
  display: inline-block;
  margin: 2rem 0;
  box-shadow: var(--shadow-minimal);
}

/* ============================================================================
   ALERTS & MESSAGING - Subtle, Informative
   ============================================================================ */

.alert,
.alert-container {
  border-radius: var(--radius-calm);
  border: 1px solid rgba(0, 0, 0, 0.04);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  font-weight: 300;
}

.alert-success {
  background-color: rgba(203, 213, 192, 0.15);
  border-color: var(--enso-sage);
  color: var(--enso-charcoal);
}

.alert-info {
  background-color: rgba(207, 201, 188, 0.12);
  border-color: var(--enso-greige);
  color: var(--enso-charcoal);
}

.alert-warning {
  background-color: rgba(224, 215, 200, 0.15);
  border-color: #E0D7C8;
  color: var(--enso-charcoal);
}

.alert-danger {
  background-color: rgba(200, 180, 170, 0.15);
  border-color: #C8A89A;
  color: var(--enso-charcoal);
}

/* ============================================================================
   FOOTER - Grounded, Spacious
   ============================================================================ */

footer {
  background-color: var(--enso-room-white);
  border-top: 1px solid rgba(0, 0, 0, 0.04);
  padding: 3rem 2rem;
  margin-top: 3rem;
}

footer a {
  color: var(--enso-charcoal);
  text-decoration: none;
  opacity: 0.75;
  transition: opacity 0.3s ease;
  font-weight: 300;
}

footer a:hover {
  opacity: 1;
}

footer p {
  color: var(--enso-charcoal);
  opacity: 0.7;
  margin: 0.5rem 0;
  font-weight: 300;
}

/* ============================================================================
   UTILITY CLASSES - Breathing Room Helpers
   ============================================================================ */

.enso-bg-light { background-color: var(--enso-room-white); }
.enso-bg-greige { background-color: var(--enso-greige); }
.enso-bg-sage { background-color: var(--enso-sage); }
.enso-text-dark { color: var(--enso-black); }
.enso-text-muted { color: var(--enso-charcoal); opacity: 0.8; }

.enso-rounded-soft { border-radius: var(--radius-soft); }
.enso-rounded-calm { border-radius: var(--radius-calm); }

.enso-shadow-minimal { box-shadow: var(--shadow-minimal); }
.enso-shadow-soft { box-shadow: var(--shadow-soft); }

/* Breathing room */
.enso-spacious {
  padding: 2rem;
  margin: 2rem 0;
}

/* ============================================================================
   RESPONSIVE - Calm on all Screens
   ============================================================================ */

@media (max-width: 768px) {
  main.page-container {
    padding: 2rem 1rem;
  }

  h1 { font-size: 2rem; }
  h2 { font-size: 1.5rem; }

  .card,
  .market-card,
  .dashboard-header {
    padding: 1.5rem;
    margin-bottom: 1.5rem;
  }

  .btn {
    padding: 0.75rem 1.5rem;
  }

  .modal-content {
    margin: 1rem;
  }

  .auth-form,
  .success-container {
    margin: 2rem 1rem;
    padding: 2rem;
  }

  nav.navbar,
  header {
    padding: 1rem;
  }
}

/* ============================================================================
   ENSŌ ESSENCE - Quiet Luxury with Intentional Frosting
   ============================================================================ */

/* 
   ENSŌ is calm. Pure. Minimal. Sacred.
   
   With frosted glass for premium UI moments:
   - Session cards (.enso-glass)
   - Booking popups (.enso-glass)
   - Timetable overlays (.enso-glass)
   - Dashboard cards (.enso-glass)
   - Success confirmations (.enso-glass)
   
   Core palette: Greige. Black. White. Sage.
   Lots of breathing room.
   Intentional typography.
   Warm, grounded, present.
   Premium but soft.
*/