/* ======================================================================
   Cosmos Hotel Group — Design tokens
   Source: Cosmos / Design (Copy).fig (Figma)
   ====================================================================== */

/* --- Type face: Manrope from Google. --- */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;700;800&display=swap');

:root {
  /* ---- Colour primitives ---- */

  /* Brand */
  --cosmos-purple:        #613CC3;  /* primary brand / wordmark mark */
  --cosmos-purple-hover:  #4F2FA8;
  --cosmos-purple-press:  #3E2486;
  --cosmos-purple-tint:   #8163CF;  /* avatar fills, lighter accent */
  --cosmos-lavender:      #B09EE1;  /* outlined badges, soft chips */
  --cosmos-lavender-tint: #B09FFF;

  /* Affirmative — booking / confirm */
  --cosmos-green:         #019F3C;
  --cosmos-green-hover:   #017F30;

  /* Promo / Cosmos Stars (loyalty) */
  --cosmos-orange:        #F29100;
  --cosmos-orange-press:  #CE7B00;

  /* Neutral scale (highest → lowest) */
  --black:        #000000;
  --ink-1:        #101011;  /* default body text */
  --ink-2:        #1B1C1E;
  --ink-3:        #222325;
  --ink-4:        #27292C;
  --ink-5:        #37393D;
  --ink-6:        #4E5157;  /* secondary text */
  --ink-7:        #717479;  /* tertiary text */
  --ink-8:        #8C8E92;  /* placeholder / hint */
  --ink-9:        #A7A8AB;  /* disabled */
  --ink-10:       #D3D3D5;  /* hairline */
  --ink-11:       #EDEEEE;  /* surface tint / divider */
  --ink-12:       #D9D9D9;  /* image placeholder */
  --white:        #FFFFFF;

  /* Surface tints (the 5% grey is THE most-used inset background) */
  --surface-tint:        rgba(78, 81, 87, 0.05);
  --surface-tint-strong: rgba(78, 81, 87, 0.10);

  /* Shadows */
  --shadow-1: 0 1px 2px rgba(0,0,0,0.04);
  --shadow-2: 0 2px 8px rgba(0,0,0,0.06);
  --shadow-3: 0 8px 24px rgba(0,0,0,0.08);
  --shadow-4: 0 16px 32px rgba(0,0,0,0.16);
  --shadow-popover: 0 24px 48px rgba(0,0,0,0.16);

  /* Radii */
  --r-xs: 5px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-pill: 999px;

  /* Spacing scale (4-pt grid) */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 32px;
  --s-8: 40px;
  --s-9: 48px;
  --s-10: 64px;
  --s-11: 80px;
  --s-12: 96px;

  /* Layout */
  --content-max:    1424px;
  --gutter-desktop: 248px;
  --nav-height:     204px;

  /* Typography primitives */
  --font-sans: 'Circe', 'Manrope', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --tracking:  -0.01em;            /* universal default */

  /* ---- Semantic roles ---- */

  /* Foreground / surface */
  --fg-1: var(--ink-1);            /* body text */
  --fg-2: var(--ink-6);            /* secondary text */
  --fg-3: var(--ink-7);            /* tertiary */
  --fg-4: var(--ink-8);            /* placeholder / disabled */
  --bg:           var(--white);
  --bg-inset:     var(--surface-tint);
  --bg-card:      var(--white);
  --bg-elevated:  var(--white);
  --divider:      var(--ink-11);

  /* Action */
  --action-primary-bg:    var(--cosmos-purple);
  --action-primary-fg:    var(--white);
  --action-affirm-bg:     var(--cosmos-green);
  --action-affirm-fg:     var(--ink-1);
  --action-promo-bg:      var(--cosmos-orange);
  --action-promo-fg:      var(--ink-1);
  --action-secondary-bg:  var(--surface-tint);
  --action-secondary-fg:  var(--ink-1);

  /* Status */
  --status-success: var(--cosmos-green);
  --status-warning: var(--cosmos-orange);
  --status-error:   #E03131;
  --status-info:    var(--cosmos-purple);
}

/* ---- Type semantic roles ---- */

/* All Cosmos type uses the universal -0.01em tracking. */
.cosmos-type, .cosmos-type * { letter-spacing: var(--tracking); }

.h-display {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: 64px;
  line-height: 64px;
  letter-spacing: -0.02em;
  color: var(--fg-1);
}
.h-1 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 40px;
  line-height: 44px;
  letter-spacing: -0.015em;
  color: var(--fg-1);
}
.h-2 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 32px;
  line-height: 36px;
  letter-spacing: var(--tracking);
  color: var(--fg-1);
}
.h-3 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 24px;
  line-height: 28px;
  letter-spacing: var(--tracking);
  color: var(--fg-1);
}
.h-4 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 20px;
  line-height: 24px;
  letter-spacing: var(--tracking);
  color: var(--fg-1);
}
.h-5 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 18px;
  line-height: 24px;
  letter-spacing: var(--tracking);
  color: var(--fg-1);
}

/* Body */
.body-lg {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 20px;
  line-height: 28px;
  letter-spacing: var(--tracking);
  color: var(--fg-1);
}
.body-md {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 18px;
  line-height: 24px;
  letter-spacing: var(--tracking);
  color: var(--fg-1);
}
.body-sm {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 20px;
  letter-spacing: var(--tracking);
  color: var(--fg-1);
}
.body-xs {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 14px;
  line-height: 18px;
  letter-spacing: var(--tracking);
  color: var(--fg-1);
}
.caption {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: var(--tracking);
  color: var(--fg-2);
}

/* Label / button text */
.label-lg { font-family: var(--font-sans); font-weight: 400; font-size: 20px; line-height: 20px; letter-spacing: var(--tracking); }
.label-md { font-family: var(--font-sans); font-weight: 400; font-size: 18px; line-height: 18px; letter-spacing: var(--tracking); }
.label-sm { font-family: var(--font-sans); font-weight: 400; font-size: 16px; line-height: 16px; letter-spacing: var(--tracking); }
.label-xs { font-family: var(--font-sans); font-weight: 700; font-size: 10px; line-height: 12px; letter-spacing: 0.04em; text-transform: uppercase; }

/* Price (a Cosmos-specific role: bold, 24/28, displayed prominently on cards) */
.price {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 24px;
  line-height: 28px;
  letter-spacing: var(--tracking);
  color: var(--fg-1);
}
.price .unit {
  font-weight: 400;
  font-size: 16px;
  color: var(--fg-2);
  margin-left: 4px;
}

/* Accent label — purple, used as a tag above headings ("Lable text" in Figma) */
.accent-label {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 14px;
  line-height: 18px;
  letter-spacing: var(--tracking);
  color: var(--cosmos-purple);
}