/* ============================================================
   HestiaPMS Design System — Colors & Typography
   Font: Nunito (Google Fonts — substitute for brand font)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,400&display=swap');

/* ============================================================
   COLOR TOKENS — BASE PALETTE
   ============================================================ */
:root {

  /* Navy scale */
  --navy-950: #0A1220;
  --navy-900: #0F1A2E;
  --navy-800: #1A2848;
  --navy-700: #243560;
  --navy-600: #2E4375;
  --navy-500: #3A5490;
  --navy-400: #5572AD;
  --navy-300: #7F97C8;
  --navy-200: #AEBDDE;
  --navy-100: #DCE3F1;
  --navy-50:  #F0F3F9;

  /* Cyan scale (brand primary — "Hestia" wordmark color) */
  --cyan-800: #0688A0;
  --cyan-700: #089ABB;
  --cyan-600: #0AAED4;
  --cyan-500: #0BCFE8;
  --cyan-400: #2DD8EE;
  --cyan-300: #6AE6F3;
  --cyan-200: #A8F1F8;
  --cyan-100: #D8F9FC;
  --cyan-50:  #F0FDFE;

  /* Coral scale (logo crown icon + destructive states) */
  --coral-700: #B81F30;
  --coral-600: #C92B3C;
  --coral-500: #E8374A;
  --coral-400: #EE5C6C;
  --coral-300: #F48895;
  --coral-200: #F9B8C0;
  --coral-100: #FDE3E6;
  --coral-50:  #FEF4F5;

  /* Amber scale (booking engine accent) */
  --amber-800: #5C4020;
  --amber-700: #7A5630;
  --amber-600: #8B6940;
  --amber-500: #A07C52;
  --amber-400: #B89268;
  --amber-300: #CFAD88;
  --amber-200: #E5CDAF;
  --amber-100: #F5ECD8;
  --amber-50:  #FBF6EE;

  /* Neutral scale */
  --neutral-950: #0D0D0D;
  --neutral-900: #1A1A1A;
  --neutral-800: #2E2E2E;
  --neutral-700: #444444;
  --neutral-600: #666666;
  --neutral-500: #888888;
  --neutral-400: #AAAAAA;
  --neutral-300: #CCCCCC;
  --neutral-200: #E0E0E0;
  --neutral-100: #F0F0F0;
  --neutral-50:  #F8F8F8;

  /* ============================================================
     SEMANTIC COLOR TOKENS — PMS Admin Surface
     ============================================================ */

  /* Backgrounds */
  --bg-base:        #F5F6FA;
  --bg-surface:     #FFFFFF;
  --bg-muted:       var(--neutral-50);
  --bg-nav:         var(--navy-800);
  --bg-nav-hover:   var(--navy-700);
  --bg-nav-active:  var(--navy-900);

  /* Foregrounds */
  --fg-primary:     var(--neutral-900);
  --fg-secondary:   var(--neutral-600);
  --fg-muted:       var(--neutral-400);
  --fg-on-dark:     #FFFFFF;
  --fg-on-accent:   #FFFFFF;

  /* Borders */
  --border-subtle:  #E5E7EB;
  --border-default: var(--neutral-300);
  --border-strong:  var(--neutral-500);

  /* Interactive / Brand */
  --accent:         var(--cyan-500);
  --accent-hover:   var(--cyan-600);
  --accent-light:   var(--cyan-100);
  --brand-dark:     var(--navy-800);
  --brand-coral:    var(--coral-500);   /* logo crown only / destructive */

  /* Status */
  --status-success:       #22C55E;
  --status-success-light: #DCFCE7;
  --status-warning:       #F59E0B;
  --status-warning-light: #FEF3C7;
  --status-error:         var(--coral-500);
  --status-error-light:   var(--coral-100);
  --status-info:          #3B82F6;
  --status-info-light:    #DBEAFE;

  /* Reservation status colors (PMS map) */
  --reservation-confirmed:  #22C55E;
  --reservation-pending:    #F59E0B;
  --reservation-cancelled:  var(--coral-500);
  --reservation-checkin:    var(--navy-500);
  --reservation-checkout:   var(--amber-500);

  /* ============================================================
     SEMANTIC TOKENS — Booking Engine (guest-facing)
     ============================================================ */
  --booking-accent:       var(--cyan-500);
  --booking-accent-hover: var(--cyan-600);
  --booking-accent-light: var(--cyan-100);
  --booking-bg:           #FFFFFF;
  --booking-surface:      var(--cyan-50);

  /* ============================================================
     SPACING SCALE
     ============================================================ */
  --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;
  --space-20:  80px;
  --space-24:  96px;

  /* ============================================================
     BORDER RADIUS
     ============================================================ */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-pill: 999px;

  /* ============================================================
     SHADOWS / ELEVATION
     ============================================================ */
  --shadow-0: none;
  --shadow-1: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06);
  --shadow-2: 0 4px 12px rgba(0,0,0,0.10), 0 2px 4px rgba(0,0,0,0.06);
  --shadow-3: 0 8px 24px rgba(0,0,0,0.12), 0 4px 8px rgba(0,0,0,0.06);
  --shadow-4: 0 16px 48px rgba(0,0,0,0.16), 0 8px 16px rgba(0,0,0,0.08);

  /* ============================================================
     TYPOGRAPHY
     ============================================================ */
  --font-sans:  'Nunito', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:  'JetBrains Mono', 'Fira Code', Consolas, monospace;

  /* Scale */
  --text-xs:   11px;
  --text-sm:   13px;
  --text-base: 15px;
  --text-md:   16px;
  --text-lg:   18px;
  --text-xl:   20px;
  --text-2xl:  24px;
  --text-3xl:  30px;
  --text-4xl:  36px;
  --text-5xl:  48px;
  --text-6xl:  60px;

  /* Weights */
  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-extrabold:800;
  --weight-black:    900;

  /* Line heights */
  --leading-tight:  1.2;
  --leading-snug:   1.35;
  --leading-normal: 1.5;
  --leading-relaxed:1.65;

  /* Letter spacing */
  --tracking-tight:  -0.02em;
  --tracking-normal:  0em;
  --tracking-wide:    0.04em;
  --tracking-widest:  0.1em;

  /* ============================================================
     SEMANTIC TYPE STYLES
     ============================================================ */

  /* Display */
  --h1-size:   var(--text-4xl);
  --h1-weight: var(--weight-extrabold);
  --h1-leading:var(--leading-tight);
  --h1-tracking:var(--tracking-tight);

  --h2-size:   var(--text-3xl);
  --h2-weight: var(--weight-bold);
  --h2-leading:var(--leading-tight);

  --h3-size:   var(--text-2xl);
  --h3-weight: var(--weight-bold);
  --h3-leading:var(--leading-snug);

  --h4-size:   var(--text-xl);
  --h4-weight: var(--weight-semibold);
  --h4-leading:var(--leading-snug);

  --h5-size:   var(--text-lg);
  --h5-weight: var(--weight-semibold);
  --h5-leading:var(--leading-normal);

  /* Body */
  --body-lg-size:   var(--text-lg);
  --body-base-size: var(--text-base);
  --body-sm-size:   var(--text-sm);
  --body-weight:    var(--weight-regular);
  --body-leading:   var(--leading-relaxed);

  /* UI */
  --label-size:    var(--text-sm);
  --label-weight:  var(--weight-semibold);
  --label-tracking:var(--tracking-wide);

  --caption-size:  var(--text-xs);
  --caption-weight:var(--weight-medium);
  --caption-tracking:var(--tracking-wide);

  /* ============================================================
     TRANSITIONS
     ============================================================ */
  --transition-fast:   150ms ease;
  --transition-base:   200ms ease;
  --transition-slow:   300ms ease;
}

/* ============================================================
   BASE ELEMENT STYLES
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  color: var(--fg-primary);
  background: var(--bg-base);
  -webkit-font-smoothing: antialiased;
}

h1 {
  font-size: var(--h1-size);
  font-weight: var(--h1-weight);
  line-height: var(--h1-leading);
  letter-spacing: var(--h1-tracking);
  margin: 0 0 var(--space-4);
}
h2 {
  font-size: var(--h2-size);
  font-weight: var(--h2-weight);
  line-height: var(--h2-leading);
  margin: 0 0 var(--space-4);
}
h3 {
  font-size: var(--h3-size);
  font-weight: var(--h3-weight);
  line-height: var(--h3-leading);
  margin: 0 0 var(--space-3);
}
h4 {
  font-size: var(--h4-size);
  font-weight: var(--h4-weight);
  line-height: var(--h4-leading);
  margin: 0 0 var(--space-2);
}
h5, h6 {
  font-size: var(--h5-size);
  font-weight: var(--h5-weight);
  line-height: var(--h5-leading);
  margin: 0 0 var(--space-2);
}
p {
  font-size: var(--body-base-size);
  line-height: var(--body-leading);
  margin: 0 0 var(--space-4);
  color: var(--fg-secondary);
}
small {
  font-size: var(--text-sm);
  color: var(--fg-muted);
}
code {
  font-family: var(--font-mono);
  font-size: 0.875em;
  background: var(--neutral-100);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  color: var(--coral-600);
}