/* ==========================================================================
   Travl — "Selat Melayu" design tokens
   --------------------------------------------------------------------------
   Malay/Nusantara heritage: songket brass, sea-green, warm paper, clay accent.
   Loaded AFTER Bootstrap so the Bootstrap CSS variables can be re-pointed at
   these values, and BEFORE travl.css which consumes them.

   Colour rules that keep this from drifting generic:
     * --clay-600 is the ONLY colour used for a primary action or a price.
       One per surface. If a second thing on screen is clay, one of them is wrong.
     * --gold-600 is structural, never a fill: hairlines, eyebrows, icon strokes.
     * --primary-900 is a full-bleed slab colour, not a text colour.
     * The page never sits on pure white — --paper is the ground everywhere.
   ========================================================================== */

:root {
  /* -- Brand ------------------------------------------------------------- */
  --ink:          #14211E;
  --ink-soft:     #3D4A46;

  --primary-900:  #072F29;  /* dark slab / footer */
  --primary-700:  #0E4A41;  /* solid nav, headings */
  --primary-500:  #177566;  /* primary buttons */
  --primary-300:  #6FB3A5;
  --primary-50:   #E7F2EF;  /* tint fills, active states */

  /* -- Accents ----------------------------------------------------------- */
  /* Brass. --gold-600 carries the numbered eyebrows, which are 11px text, so it
     has to clear WCAG AA on all three light surfaces: #A8792A only reached 3.59
     on --paper. --gold-400 is for dark grounds and star fills only. */
  --gold-600:     #8A6220;  /* songket brass — rules, eyebrows, icons */
  --gold-400:     #C9A227;  /* highlights, star ratings — dark grounds only */

  --clay-600:     #B4552F;  /* the single CTA / price accent */
  --clay-500:     #C9663D;
  --clay-50:      #FBEDE7;

  /* -- Surfaces ---------------------------------------------------------- */
  --paper:        #FAF6EF;  /* page ground — warm, never pure white */
  --surface:      #FFFFFF;  /* cards */
  --surface-2:    #F2EADD;  /* alternating band */
  --line:         #E4D8C6;
  --muted:        #6F675C;  /* 4.45 on --paper before, just under AA */

  /* -- Semantic ---------------------------------------------------------- */
  --success:      #2E7D5B;
  --warning:      #C98A12;
  --danger:       #B3402F;
  --info:         #2A6F97;

  /* -- Typography -------------------------------------------------------- */
  --font-display: 'Fraunces', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --font-body:    'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* -- Geometry ---------------------------------------------------------- */
  --radius-sm:    8px;
  --radius:       14px;
  --radius-lg:    20px;   /* product cards */
  --radius-xl:    28px;   /* search card, feature panels */
  --radius-pill:  999px;

  /* The Malay window arch, for homestay and host portraits. */
  --radius-arch:  200px 200px 20px 20px;

  --shadow-sm:    0 1px 2px rgba(7, 47, 41, .05);
  --shadow:       0 4px 16px rgba(7, 47, 41, .07);
  --shadow-lg:    0 18px 48px rgba(7, 47, 41, .14);

  /* Card lift and image zoom share this curve so motion reads as one system. */
  --ease:         cubic-bezier(.22, 1, .36, 1);

  /* Hero scrim — deep enough that white type clears WCAG AA over any photo. */
  --scrim: linear-gradient(180deg, rgba(7, 47, 41, .55) 0%, rgba(7, 47, 41, .85) 100%);

  /* -- Rhythm ------------------------------------------------------------ */
  --section-y:    clamp(4rem, 8vw, 7.5rem);
  --container-x:  clamp(1rem, 4vw, 3rem);

  /* Height of the sticky nav. travl.js measures the real bar on load and on
     resize and overwrites this on :root; the value here is the no-JS fallback,
     and the reason it is a token at all is that the hero cancels the nav with a
     negative margin and must never guess. */
  --nav-h:        5rem;

  /* Minimum comfortable tap area. Controls keep their visual size and grow the
     hit area with a pseudo-element, so nothing on the desktop layout moves. */
  --tap-min:      44px;

  /* ---------------------------------------------------------------------- */
  /* Layer scale.                                                            */
  /* These were ad-hoc numbers scattered through the stylesheet, which is how */
  /* the utility bar's currency menu ended up painting *under* the sticky nav */
  /* — it sat in a static parent at Bootstrap's 1000 against the nav's 1030.  */
  /* The upper values stay inside Bootstrap's own ladder so modals (1055),    */
  /* popovers (1070) and tooltips (1080) keep working.                        */
  /* ---------------------------------------------------------------------- */

  --z-behind:     -1;    /* hero scrim / media, behind their own section */
  --z-card:        2;    /* badges and the wishlist heart over card media */
  --z-overlap:     5;    /* the search card breaking the hero boundary */
  --z-nav:         1030; /* sticky navigation */
  --z-stickybar:   1035; /* mobile booking bar */
  --z-utility:     1040; /* utility bar and its menus — must clear the nav */
  --z-fab:         1045; /* floating WhatsApp button */
  --z-toast:       1090; /* flash region, matches Bootstrap's toast layer */
  --z-skip:        2000; /* skip link, above everything by definition */

  /* ---------------------------------------------------------------------- */
  /* Bootstrap 5.3 variable overrides.                                       */
  /* Bootstrap reads these at runtime, so re-pointing them here re-themes the */
  /* framework without a build step.                                         */
  /* ---------------------------------------------------------------------- */

  --bs-body-bg:            var(--paper);
  --bs-body-color:         var(--ink);
  --bs-body-font-family:   var(--font-body);
  --bs-body-font-size:     1rem;
  --bs-body-line-height:   1.65;

  --bs-emphasis-color:     var(--primary-900);
  --bs-secondary-color:    var(--muted);
  --bs-tertiary-color:     var(--muted);

  --bs-border-color:       var(--line);
  --bs-border-radius:      var(--radius);
  --bs-border-radius-sm:   var(--radius-sm);
  --bs-border-radius-lg:   var(--radius-lg);
  --bs-border-radius-xl:   var(--radius-xl);
  --bs-border-radius-xxl:  var(--radius-xl);
  --bs-border-radius-pill: var(--radius-pill);

  --bs-primary:            var(--primary-500);
  --bs-primary-rgb:        23, 117, 102;
  --bs-secondary:          var(--gold-600);
  /* Kept in step with --gold-600 by hand; it was left at the old #A8792A
     when that token was darkened for contrast. */
  --bs-secondary-rgb:      138, 98, 32;
  --bs-success:            var(--success);
  --bs-success-rgb:        46, 125, 91;
  --bs-info:               var(--info);
  --bs-info-rgb:           42, 111, 151;
  --bs-warning:            var(--warning);
  --bs-warning-rgb:        201, 138, 18;
  --bs-danger:             var(--danger);
  --bs-danger-rgb:         179, 64, 47;
  --bs-light:              var(--surface-2);
  --bs-light-rgb:          242, 234, 221;
  --bs-dark:               var(--primary-900);
  --bs-dark-rgb:           7, 47, 41;

  --bs-link-color:         var(--primary-500);
  --bs-link-color-rgb:     23, 117, 102;
  --bs-link-hover-color:   var(--primary-700);

  --bs-heading-color:      var(--primary-700);

  --bs-box-shadow-sm:      var(--shadow-sm);
  --bs-box-shadow:         var(--shadow);
  --bs-box-shadow-lg:      var(--shadow-lg);
}

/* ==========================================================================
   Shared utilities
   --------------------------------------------------------------------------
   This file is the one stylesheet both the storefront and the admin load, so
   anything genuinely common lives here.
   ========================================================================== */

/*
 * `place-items-center` was written alongside Bootstrap's `d-grid` in twenty
 * places — avatars, step markers, icon tiles, the voucher scanner — but
 * Bootstrap has no such utility and nothing else defined it. Every one of those
 * circles was rendering its glyph in the top-left corner instead of the middle.
 */
.place-items-center { place-items: center; }
.place-content-center { place-content: center; }

/* The rounded initials badge, which is the same object in both shells. */
.tv-avatar {
  display: grid;
  place-items: center;
  line-height: 1;
  text-align: center;
}


/*
 * The primary action, and numbers that line up in columns.
 *
 * Both were written in `travl.css`, which only the storefront loads, while
 * 36 admin views use `.btn-clay` and 19 use `.tabular`. In the backoffice the
 * save button was therefore a bare Bootstrap `.btn`: transparent background,
 * no border, body-coloured text. They belong here, in the one stylesheet both
 * shells load.
 */
.btn-clay {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--clay-600);
  --bs-btn-border-color: var(--clay-600);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--clay-500);
  --bs-btn-hover-border-color: var(--clay-500);
  --bs-btn-active-bg: #9C4526;
  --bs-btn-active-border-color: #9C4526;
  --bs-btn-disabled-bg: var(--clay-600);
  --bs-btn-disabled-border-color: var(--clay-600);
  --bs-btn-disabled-color: #fff;
}
.btn-clay:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(180, 85, 47, .28); }

@media (prefers-reduced-motion: reduce) {
  .btn-clay:hover { transform: none; }
}

.tabular { font-variant-numeric: tabular-nums; }

/*
 * Bootstrap compiles the button variants with literal colours, so re-pointing
 * --bs-secondary does not reach them: `.btn-outline-secondary` kept its stock
 * #6C757D, which is 4.69:1 on pure white but only 4.35:1 on --paper and
 * 4.37:1 on the admin ground — under AA on every surface these buttons
 * actually sit on. --muted clears 5.1 on all three.
 */
.btn-outline-danger {
  /* Stock #DC3545 is 4.53:1 on pure white and 4.2:1 on either page ground.
     --danger clears 5.28 everywhere, and white on it clears 5.69. */
  --bs-btn-color: var(--danger);
  --bs-btn-border-color: var(--danger);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--danger);
  --bs-btn-hover-border-color: var(--danger);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #8E3325;
  --bs-btn-active-border-color: #8E3325;
  --bs-btn-disabled-color: var(--danger);
  --bs-btn-disabled-border-color: var(--danger);
}

.btn-outline-secondary {
  --bs-btn-color: var(--muted);
  --bs-btn-border-color: var(--line);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--muted);
  --bs-btn-hover-border-color: var(--muted);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--ink);
  --bs-btn-active-border-color: var(--ink);
  --bs-btn-disabled-color: var(--muted);
  --bs-btn-disabled-border-color: var(--line);
}