/* =========================================================
   Mallen's World — Foundational tokens
   Color + typography variables for the Airbnb-derived system.
   ========================================================= */

/* Inter is loaded as the closest open-source substitute for
   Airbnb Cereal VF. See README "Font Substitutes" note. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* ---------- COLORS ---------- */
  /* Brand & accent */
  --color-primary:               #ff385c;   /* Rausch */
  --color-primary-active:        #e00b41;
  --color-primary-disabled:      #ffd1da;
  --color-primary-error-text:    #c13515;
  --color-primary-error-text-hover: #b32505;
  --color-luxe:                  #460479;   /* sub-brand */
  --color-plus:                  #92174d;   /* sub-brand */

  /* Text */
  --color-ink:                   #222222;
  --color-body:                  #3f3f3f;
  --color-muted:                 #6a6a6a;
  --color-muted-soft:            #929292;
  --color-on-primary:            #ffffff;
  --color-on-dark:               #ffffff;
  --color-star-rating:           #222222;
  --color-legal-link:            #428bff;

  /* Surface */
  --color-canvas:                #ffffff;
  --color-surface-soft:          #f7f7f7;
  --color-surface-card:          #ffffff;
  --color-surface-strong:        #f2f2f2;

  /* Hairlines & borders */
  --color-hairline:              #dddddd;
  --color-hairline-soft:         #ebebeb;
  --color-border-strong:         #c1c1c1;

  /* Scrim */
  --color-scrim:                 rgba(0,0,0,0.5);

  /* Semantic aliases */
  --fg1: var(--color-ink);
  --fg2: var(--color-body);
  --fg3: var(--color-muted);
  --fg4: var(--color-muted-soft);
  --bg1: var(--color-canvas);
  --bg2: var(--color-surface-soft);
  --bg3: var(--color-surface-strong);
  --border: var(--color-hairline);
  --border-soft: var(--color-hairline-soft);

  /* ---------- ELEVATION ---------- */
  /* The single shadow tier used in the system. */
  --shadow-float:
    rgba(0,0,0,0.02) 0 0 0 1px,
    rgba(0,0,0,0.04) 0 2px 6px 0,
    rgba(0,0,0,0.10) 0 4px 8px 0;

  /* ---------- RADII ---------- */
  --radius-none: 0px;
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   14px;
  --radius-lg:   20px;
  --radius-xl:   32px;
  --radius-full: 9999px;

  /* ---------- SPACING ---------- */
  --space-xxs: 2px;
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  12px;
  --space-base:16px;
  --space-lg:  24px;
  --space-xl:  32px;
  --space-xxl: 48px;
  --space-section: 64px;

  /* ---------- TYPOGRAPHY ---------- */
  --font-sans: 'Inter', 'Airbnb Cereal VF', Circular, -apple-system,
               system-ui, Roboto, 'Helvetica Neue', sans-serif;
}

/* =========================================================
   Base type
   ========================================================= */
html, body {
  font-family: var(--font-sans);
  color: var(--color-ink);
  background: var(--color-canvas);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'cv11', 'ss01', 'ss03';
}

/* =========================================================
   Type scale — semantic classes mirroring token names.
   Naming: .t-<token>  e.g. .t-display-xl
   ========================================================= */

.t-rating-display {
  font-family: var(--font-sans);
  font-size: 64px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -1px;
}

.t-display-xl, h1 {
  font-family: var(--font-sans);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.43;
  letter-spacing: 0;
}

.t-display-lg {
  font-family: var(--font-sans);
  font-size: 22px;
  font-weight: 500;
  line-height: 1.18;
  letter-spacing: -0.44px;
}

.t-display-md, h2 {
  font-family: var(--font-sans);
  font-size: 21px;
  font-weight: 700;
  line-height: 1.43;
  letter-spacing: 0;
}

.t-display-sm, h3 {
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.20;
  letter-spacing: -0.18px;
}

.t-title-md {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.25;
}

.t-title-sm {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.25;
}

.t-body-md, p {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
}

.t-body-sm {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.43;
}

.t-caption {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.29;
}

.t-caption-sm {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.23;
}

.t-badge {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.18;
}

.t-micro-label {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.33;
}

.t-uppercase-tag {
  font-family: var(--font-sans);
  font-size: 8px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.32px;
  text-transform: uppercase;
}

.t-button-md { font-size: 16px; font-weight: 500; line-height: 1.25; }
.t-button-sm { font-size: 14px; font-weight: 500; line-height: 1.29; }
.t-link      { font-size: 14px; font-weight: 400; line-height: 1.43;
               color: var(--color-ink); text-decoration: underline; }
.t-nav-link  { font-size: 16px; font-weight: 600; line-height: 1.25; }

/* Tone aliases */
.fg-ink   { color: var(--color-ink); }
.fg-body  { color: var(--color-body); }
.fg-muted { color: var(--color-muted); }
.fg-muted-soft { color: var(--color-muted-soft); }
.fg-rausch { color: var(--color-primary); }