/**
 * main.css — Hotel Wood Stone Master Design System
 * Internal Operating Platform · Phase 9A.2
 *
 * BRAND IDENTITY:
 *   Private Luxury Hotel Operating Platform.
 *   Every element echoes the Hotel Wood Stone aesthetic:
 *   rich dark warmth, champagne gold, whispered elegance.
 *
 * CONTENTS:
 *   0.  Google Fonts
 *   1.  CSS Custom Properties — The Luxury Token System
 *   2.  Reset & Base
 *   3.  Typography
 *   4.  Layout Primitives
 *   5.  Buttons
 *   6.  Form Elements
 *   7.  Status Pills & Badges
 *   8.  Dividers & Separators
 *   9.  Utility Classes
 *  10.  Custom Scrollbar
 */

/* ═══════════════════════════════════════════════════════════════════════════
   0. GOOGLE FONTS
   Playfair Display — luxury serif headings, cinematic weight
   Cormorant Garamond — refined italic accents
   Inter — clean body text, maximum legibility
   ═══════════════════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Cormorant+Garamond:ital,wght@0,300;0,400;1,300;1,400&family=Inter:wght@300;400;500;600;700&display=swap');

/* ═══════════════════════════════════════════════════════════════════════════
   1. CSS CUSTOM PROPERTIES — THE LUXURY TOKEN SYSTEM
   One block rules the entire aesthetic.
   To retheme, edit ONLY this section.
   ═══════════════════════════════════════════════════════════════════════════ */
:root {

  /* ── Core Brand Palette ──────────────────────────────────────────────── */
  --hws-black          : #0A0202;   /* Rich Black — primary background      */
  --hws-espresso       : #1B0D0A;   /* Espresso Brown — secondary surface   */
  --hws-burgundy       : #5A0507;   /* Deep Burgundy — gradient anchor      */
  --hws-wine           : #3A1516;   /* Wine Red — mid gradient tone         */
  --hws-smoky          : #3D2B29;   /* Smoky Brown — elevated surface       */

  /* ── Luxury Accent Metals ────────────────────────────────────────────── */
  --hws-gold           : #D3A173;   /* Champagne Gold — primary accent      */
  --hws-gold-muted     : #B88A63;   /* Muted Gold — secondary accent        */
  --hws-bronze         : #C2936C;   /* Soft Bronze — tertiary accent        */
  --hws-gold-glow      : rgba(211,161,115,0.15); /* gold ambient glow       */
  --hws-gold-glow-soft : rgba(211,161,115,0.08); /* whispered gold          */
  --hws-gold-border    : rgba(211,161,115,0.25); /* subtle gold border      */

  /* ── Typography Palette ──────────────────────────────────────────────── */
  --hws-ivory          : #F3EAE2;   /* Ivory White — primary text           */
  --hws-beige          : #C8B2A4;   /* Warm Beige — secondary text          */
  --hws-sand           : #D8C0AE;   /* Soft Sand — muted / placeholder      */
  --hws-stone          : #8C7B74;   /* Warm Stone — disabled / subtle text  */
  --hws-ash            : #4A3B38;   /* Dark Ash — faintest text / hairlines */

  /* ── Semantic Colours (warm-toned, not corporate) ────────────────────── */
  --hws-success        : #7DAF7A;   /* Soft sage green                      */
  --hws-success-bg     : rgba(125,175,122,0.12);
  --hws-success-border : rgba(125,175,122,0.30);

  --hws-warning        : #D4954A;   /* Warm amber                           */
  --hws-warning-bg     : rgba(212,149,74,0.12);
  --hws-warning-border : rgba(212,149,74,0.30);

  --hws-danger         : #C25959;   /* Muted crimson                        */
  --hws-danger-bg      : rgba(194,89,89,0.12);
  --hws-danger-border  : rgba(194,89,89,0.30);

  --hws-info           : #7A9DBF;   /* Steel blue-grey                      */
  --hws-info-bg        : rgba(122,157,191,0.12);
  --hws-info-border    : rgba(122,157,191,0.30);

  /* ── Surface Hierarchy ───────────────────────────────────────────────── */
  --surface-0          : var(--hws-black);      /* page background          */
  --surface-1          : var(--hws-espresso);   /* primary card / panel     */
  --surface-2          : var(--hws-wine);       /* elevated card            */
  --surface-3          : var(--hws-smoky);      /* tooltip / dropdown       */
  --surface-input      : rgba(255,255,255,0.04);/* form input background    */
  --surface-hover      : rgba(255,255,255,0.04);/* row / item hover         */

  /* ── Border System ───────────────────────────────────────────────────── */
  --border-subtle      : rgba(211,161,115,0.10);/* hairline                 */
  --border-soft        : rgba(211,161,115,0.18);/* standard card border     */
  --border-medium      : rgba(211,161,115,0.28);/* emphasized border        */
  --border-strong      : rgba(211,161,115,0.45);/* focus / active border    */
  --border-input       : rgba(255,255,255,0.10);/* form input default       */
  --border-focus       : rgba(211,161,115,0.60);/* input focus state        */

  /* ── Typography ──────────────────────────────────────────────────────── */
  --font-serif         : 'Playfair Display', 'Georgia', serif;
  --font-accent        : 'Cormorant Garamond', 'Palatino', serif;
  --font-sans          : 'Inter', 'Segoe UI', system-ui, sans-serif;

  --font-display       : var(--font-serif);  /* hero headings, KPI labels  */
  --font-heading       : var(--font-serif);  /* section titles, card heads */
  --font-body          : var(--font-sans);   /* all body copy              */
  --font-ui            : var(--font-sans);   /* buttons, nav, form labels  */

  --text-primary       : var(--hws-ivory);
  --text-secondary     : var(--hws-beige);
  --text-muted         : var(--hws-sand);
  --text-subtle        : var(--hws-stone);
  --text-gold          : var(--hws-gold);

  /* Type scale — refined, wide-tracked headings */
  --text-3xs   : 10px;
  --text-2xs   : 11px;
  --text-xs    : 12px;
  --text-sm    : 13px;
  --text-base  : 14px;
  --text-md    : 15px;
  --text-lg    : 18px;
  --text-xl    : 22px;
  --text-2xl   : 28px;
  --text-3xl   : 36px;
  --text-4xl   : 48px;

  --weight-light    : 300;
  --weight-regular  : 400;
  --weight-medium   : 500;
  --weight-semibold : 600;
  --weight-bold     : 700;

  --leading-tight   : 1.2;
  --leading-snug    : 1.4;
  --leading-base    : 1.65;
  --leading-loose   : 1.85;

  --tracking-tight  : -0.02em;
  --tracking-normal : 0em;
  --tracking-wide   : 0.04em;
  --tracking-wider  : 0.08em;
  --tracking-widest : 0.14em;

  /* ── Spacing Scale ───────────────────────────────────────────────────── */
  --sp-1  :  4px;
  --sp-2  :  8px;
  --sp-3  : 12px;
  --sp-4  : 16px;
  --sp-5  : 20px;
  --sp-6  : 24px;
  --sp-7  : 28px;
  --sp-8  : 32px;
  --sp-10 : 40px;
  --sp-12 : 48px;
  --sp-16 : 64px;
  --sp-20 : 80px;

  /* ── Border Radius ───────────────────────────────────────────────────── */
  --radius-none : 0;
  --radius-xs   : 2px;
  --radius-sm   : 4px;
  --radius-md   : 8px;
  --radius-lg   : 12px;
  --radius-xl   : 16px;
  --radius-2xl  : 24px;
  --radius-full : 999px;

  /* ── Shadow System — warm, deep, luxurious ───────────────────────────── */
  --shadow-xs   : 0 1px 2px rgba(10,2,2,0.6);
  --shadow-sm   : 0 2px 8px rgba(10,2,2,0.5), 0 1px 2px rgba(10,2,2,0.4);
  --shadow-md   : 0 4px 16px rgba(10,2,2,0.6), 0 2px 6px rgba(10,2,2,0.4);
  --shadow-lg   : 0 8px 32px rgba(10,2,2,0.7), 0 4px 12px rgba(10,2,2,0.5);
  --shadow-xl   : 0 16px 56px rgba(10,2,2,0.8), 0 8px 20px rgba(10,2,2,0.5);
  --shadow-gold : 0 0 0 1px var(--hws-gold-border), 0 4px 20px rgba(211,161,115,0.12);
  --shadow-card : 0 2px 12px rgba(10,2,2,0.5), inset 0 1px 0 rgba(255,255,255,0.04);
  --shadow-inset: inset 0 1px 3px rgba(0,0,0,0.4);

  /* ── Transitions — measured, never rushed ────────────────────────────── */
  --ease-luxury    : cubic-bezier(0.25, 0.1, 0.25, 1.0);
  --ease-out-soft  : cubic-bezier(0.0,  0.0, 0.2,  1.0);
  --ease-in-soft   : cubic-bezier(0.4,  0.0, 1.0,  1.0);

  --duration-instant : 80ms;
  --duration-fast    : 150ms;
  --duration-base    : 250ms;
  --duration-slow    : 400ms;
  --duration-slower  : 600ms;

  --transition-fast  : var(--duration-fast)  var(--ease-luxury);
  --transition-base  : var(--duration-base)  var(--ease-luxury);
  --transition-slow  : var(--duration-slow)  var(--ease-out-soft);

  /* ── Layout Dimensions ───────────────────────────────────────────────── */
  --sidebar-width      : 248px;
  --sidebar-collapsed  : 68px;
  --header-height      : 64px;

  /* ── Z-Index Layers ──────────────────────────────────────────────────── */
  --z-base     :   1;
  --z-raised   :  10;
  --z-dropdown : 100;
  --z-sidebar  : 200;
  --z-header   : 300;
  --z-modal    : 400;
  --z-toast    : 500;
  --z-supreme  : 600;
}

/* ═══════════════════════════════════════════════════════════════════════════
   2. RESET & BASE
   ═══════════════════════════════════════════════════════════════════════════ */
*, *::before, *::after {
  box-sizing  : border-box;
  margin      : 0;
  padding     : 0;
}

html {
  font-size       : var(--text-base);
  scroll-behavior : smooth;
  color-scheme    : dark;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family             : var(--font-body);
  font-size               : var(--text-base);
  font-weight             : var(--weight-regular);
  line-height             : var(--leading-base);
  color                   : var(--text-primary);
  background-color        : var(--surface-0);
  min-height              : 100vh;
  -webkit-font-smoothing  : antialiased;
  -moz-osx-font-smoothing : grayscale;
  text-rendering          : optimizeLegibility;
}

a {
  color           : var(--hws-gold);
  text-decoration : none;
  transition      : color var(--transition-fast);
}
a:hover { color: var(--hws-ivory); }

img, svg, video { display: block; max-width: 100%; }

ul, ol { list-style: none; }

button, input, select, textarea {
  font-family : inherit;
  font-size   : inherit;
}

button { cursor: pointer; border: none; background: none; }

hr {
  border     : none;
  border-top : 1px solid var(--border-subtle);
  margin     : var(--sp-6) 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   3. TYPOGRAPHY
   Headings use Playfair Display for that luxury editorial feel.
   Body uses Inter for clean readability on dark backgrounds.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Heading defaults */
h1, h2, h3, h4, h5, h6 {
  font-family  : var(--font-heading);
  color        : var(--hws-ivory);
  line-height  : var(--leading-tight);
  font-weight  : var(--weight-medium);
  letter-spacing: var(--tracking-tight);
}

h1 { font-size: var(--text-3xl); font-weight: var(--weight-bold); letter-spacing: -0.03em; }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl);  }
h4 { font-size: var(--text-lg);  font-family: var(--font-body); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-normal); }
h5 { font-size: var(--text-md);  font-family: var(--font-body); font-weight: var(--weight-medium); letter-spacing: var(--tracking-normal); }
h6 { font-size: var(--text-base);font-family: var(--font-body); font-weight: var(--weight-medium); letter-spacing: var(--tracking-wide); text-transform: uppercase; }

p { color: var(--text-secondary); line-height: var(--leading-loose); }

/* Type utility classes */
.type-display {
  font-family    : var(--font-display);
  font-size      : var(--text-3xl);
  font-weight    : var(--weight-bold);
  letter-spacing : var(--tracking-tight);
  color          : var(--hws-ivory);
  line-height    : var(--leading-tight);
}

.type-serif {
  font-family : var(--font-serif);
  font-weight : var(--weight-medium);
}

.type-label {
  font-family    : var(--font-ui);
  font-size      : var(--text-2xs);
  font-weight    : var(--weight-semibold);
  letter-spacing : var(--tracking-widest);
  text-transform : uppercase;
  color          : var(--hws-gold-muted);
}

.type-overline {
  font-size      : var(--text-3xs);
  font-weight    : var(--weight-semibold);
  letter-spacing : var(--tracking-widest);
  text-transform : uppercase;
  color          : var(--text-subtle);
}

.type-caption  { font-size: var(--text-xs);  color: var(--text-muted); }
.type-small    { font-size: var(--text-sm);   color: var(--text-secondary); }
.type-gold     { color: var(--hws-gold); }
.type-ivory    { color: var(--hws-ivory); }
.type-muted    { color: var(--text-muted); }
.type-subtle   { color: var(--text-subtle); }
.type-italic   { font-style: italic; }

/* ═══════════════════════════════════════════════════════════════════════════
   4. LAYOUT PRIMITIVES
   ═══════════════════════════════════════════════════════════════════════════ */
.flex           { display: flex; }
.flex-col       { display: flex; flex-direction: column; }
.items-center   { align-items: center; }
.items-start    { align-items: flex-start; }
.items-end      { align-items: flex-end; }
.justify-center { justify-content: center; }
.justify-between{ justify-content: space-between; }
.justify-end    { justify-content: flex-end; }
.flex-1         { flex: 1; }
.flex-shrink-0  { flex-shrink: 0; }
.flex-wrap      { flex-wrap: wrap; }

.gap-1 { gap: var(--sp-1); }
.gap-2 { gap: var(--sp-2); }
.gap-3 { gap: var(--sp-3); }
.gap-4 { gap: var(--sp-4); }
.gap-5 { gap: var(--sp-5); }
.gap-6 { gap: var(--sp-6); }
.gap-8 { gap: var(--sp-8); }

.w-full { width: 100%; }
.h-full { height: 100%; }

/* Base card — the luxury panel */
.card {
  background    : var(--surface-1);
  border        : 1px solid var(--border-soft);
  border-radius : var(--radius-lg);
  box-shadow    : var(--shadow-card);
  padding       : var(--sp-6);
  position      : relative;
  overflow      : hidden;
}

/* Subtle top-edge gold accent line on cards */
.card::before {
  content    : '';
  position   : absolute;
  top        : 0; left : 0; right : 0;
  height     : 1px;
  background : linear-gradient(90deg, transparent 0%, var(--hws-gold-border) 40%, var(--hws-gold-border) 60%, transparent 100%);
}

/* Elevated card variant */
.card-elevated {
  background : linear-gradient(145deg, var(--hws-wine) 0%, var(--hws-espresso) 100%);
  border-color: var(--border-medium);
  box-shadow  : var(--shadow-lg);
}

/* Gold accent card */
.card-gold {
  border-color: var(--hws-gold-border);
  box-shadow  : var(--shadow-gold);
}

.hidden { display: none !important; }
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   5. BUTTONS
   Gold = action. Ghost = secondary. Danger = destructive.
   ═══════════════════════════════════════════════════════════════════════════ */
.btn {
  display         : inline-flex;
  align-items     : center;
  justify-content : center;
  gap             : var(--sp-2);
  padding         : 9px var(--sp-5);
  font-family     : var(--font-ui);
  font-size       : var(--text-sm);
  font-weight     : var(--weight-medium);
  letter-spacing  : var(--tracking-wide);
  border-radius   : var(--radius-sm);
  border          : 1px solid transparent;
  cursor          : pointer;
  text-decoration : none;
  white-space     : nowrap;
  transition      :
    background    var(--transition-fast),
    border-color  var(--transition-fast),
    box-shadow    var(--transition-fast),
    color         var(--transition-fast),
    transform     var(--transition-fast);
  position        : relative;
  overflow        : hidden;
}

.btn:disabled,
.btn[disabled] {
  opacity  : 0.38;
  cursor   : not-allowed;
  pointer-events: none;
}

/* Primary — Champagne Gold */
.btn-primary {
  background   : linear-gradient(135deg, var(--hws-gold) 0%, var(--hws-bronze) 100%);
  color        : var(--hws-black);
  border-color : var(--hws-gold);
  box-shadow   : 0 2px 8px rgba(211,161,115,0.25);
  font-weight  : var(--weight-semibold);
}
.btn-primary:hover {
  background : linear-gradient(135deg, #E0B48A 0%, var(--hws-gold) 100%);
  box-shadow : 0 4px 16px rgba(211,161,115,0.35);
  transform  : translateY(-1px);
}
.btn-primary:active { transform: translateY(0); box-shadow: 0 1px 4px rgba(211,161,115,0.2); }

/* Secondary — Transparent + Gold Border */
.btn-secondary {
  background   : var(--surface-input);
  color        : var(--hws-gold);
  border-color : var(--border-medium);
}
.btn-secondary:hover {
  background   : var(--hws-gold-glow);
  border-color : var(--border-strong);
  color        : var(--hws-ivory);
  box-shadow   : 0 0 0 1px var(--hws-gold-border);
}

/* Ghost — fully transparent */
.btn-ghost {
  background   : transparent;
  color        : var(--text-secondary);
  border-color : transparent;
}
.btn-ghost:hover {
  background : var(--surface-hover);
  color      : var(--hws-ivory);
}

/* Danger */
.btn-danger {
  background   : var(--hws-danger-bg);
  color        : var(--hws-danger);
  border-color : var(--hws-danger-border);
}
.btn-danger:hover {
  background : var(--hws-danger);
  color      : var(--hws-ivory);
}

/* Sizes */
.btn-xs  { padding: 5px var(--sp-3); font-size: var(--text-xs); }
.btn-sm  { padding: 7px var(--sp-4); font-size: var(--text-xs); }
.btn-lg  { padding: 12px var(--sp-7); font-size: var(--text-md); letter-spacing: var(--tracking-wider); }
.btn-xl  { padding: 14px var(--sp-10); font-size: var(--text-lg); font-family: var(--font-serif); }

/* Icon-only button */
.btn-icon {
  padding         : var(--sp-2);
  width           : 32px;
  height          : 32px;
  border-radius   : var(--radius-md);
}

/* ═══════════════════════════════════════════════════════════════════════════
   6. FORM ELEMENTS
   Dark luxury inputs. Gold focus glow.
   ═══════════════════════════════════════════════════════════════════════════ */
.form-group {
  display        : flex;
  flex-direction : column;
  gap            : var(--sp-2);
}

.form-label {
  font-family    : var(--font-ui);
  font-size      : var(--text-2xs);
  font-weight    : var(--weight-semibold);
  letter-spacing : var(--tracking-widest);
  text-transform : uppercase;
  color          : var(--hws-gold-muted);
}

.form-control {
  width           : 100%;
  padding         : 10px var(--sp-4);
  font-family     : var(--font-body);
  font-size       : var(--text-sm);
  color           : var(--hws-ivory);
  background      : var(--surface-input);
  border          : 1px solid var(--border-input);
  border-radius   : var(--radius-sm);
  outline         : none;
  transition      :
    border-color  var(--transition-fast),
    box-shadow    var(--transition-fast),
    background    var(--transition-fast);
  -webkit-appearance: none;
}

.form-control::placeholder {
  color : var(--hws-stone);
}

.form-control:hover {
  border-color : var(--border-soft);
  background   : rgba(255,255,255,0.06);
}

.form-control:focus {
  border-color : var(--border-focus);
  background   : rgba(255,255,255,0.06);
  box-shadow   : 0 0 0 3px rgba(211,161,115,0.12),
                 inset 0 1px 3px rgba(0,0,0,0.3);
}

.form-control:disabled {
  opacity      : 0.4;
  cursor       : not-allowed;
}

select.form-control {
  cursor                    : pointer;
  background-image          : url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23B88A63' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
  background-repeat         : no-repeat;
  background-position       : right var(--sp-4) center;
  padding-right             : var(--sp-8);
}

/* Select option styling — forced dark in supported browsers */
select.form-control option {
  background : var(--hws-espresso);
  color      : var(--hws-ivory);
}

textarea.form-control {
  resize     : vertical;
  min-height : 96px;
  line-height: var(--leading-base);
}

.form-hint {
  font-size : var(--text-xs);
  color     : var(--text-subtle);
  margin-top: var(--sp-1);
}

.form-error-msg {
  font-size : var(--text-xs);
  color     : var(--hws-danger);
  margin-top: var(--sp-1);
}

.form-control.is-error { border-color: var(--hws-danger-border); }
.form-control.is-success{ border-color: var(--hws-success-border); }

/* ═══════════════════════════════════════════════════════════════════════════
   7. STATUS PILLS & BADGES
   Warm-toned, never harsh. Designed for room/booking/task statuses.
   ═══════════════════════════════════════════════════════════════════════════ */
.badge {
  display       : inline-flex;
  align-items   : center;
  gap           : 5px;
  padding       : 3px 10px;
  font-family   : var(--font-ui);
  font-size     : var(--text-xs);
  font-weight   : var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  border-radius : var(--radius-full);
  border        : 1px solid transparent;
  white-space   : nowrap;
}

/* Dot accent before text */
.badge::before {
  content       : '';
  display       : inline-block;
  width         : 5px;
  height        : 5px;
  border-radius : 50%;
  background    : currentColor;
  opacity       : 0.7;
  flex-shrink   : 0;
}

.badge-success {
  background   : var(--hws-success-bg);
  color        : var(--hws-success);
  border-color : var(--hws-success-border);
}
.badge-warning {
  background   : var(--hws-warning-bg);
  color        : var(--hws-warning);
  border-color : var(--hws-warning-border);
}
.badge-danger {
  background   : var(--hws-danger-bg);
  color        : var(--hws-danger);
  border-color : var(--hws-danger-border);
}
.badge-info {
  background   : var(--hws-info-bg);
  color        : var(--hws-info);
  border-color : var(--hws-info-border);
}
.badge-gold {
  background   : rgba(211,161,115,0.15);
  color        : var(--hws-gold);
  border-color : var(--hws-gold-border);
}
.badge-neutral {
  background   : rgba(255,255,255,0.06);
  color        : var(--text-subtle);
  border-color : var(--border-subtle);
}

/* Notification counter dot */
.notif-dot {
  display         : inline-flex;
  align-items     : center;
  justify-content : center;
  min-width       : 18px;
  height          : 18px;
  padding         : 0 5px;
  background      : var(--hws-gold);
  color           : var(--hws-black);
  font-family     : var(--font-ui);
  font-size       : 10px;
  font-weight     : var(--weight-bold);
  border-radius   : var(--radius-full);
  line-height     : 1;
}

/* ═══════════════════════════════════════════════════════════════════════════
   8. DIVIDERS & SEPARATORS
   ═══════════════════════════════════════════════════════════════════════════ */
.divider {
  border     : none;
  border-top : 1px solid var(--border-subtle);
  margin     : var(--sp-5) 0;
}

.divider-gold {
  border-top-color: var(--border-medium);
}

/* Ornamental section divider */
.divider-ornament {
  display         : flex;
  align-items     : center;
  gap             : var(--sp-4);
  color           : var(--hws-gold-muted);
  font-size       : var(--text-xs);
  letter-spacing  : var(--tracking-widest);
  text-transform  : uppercase;
  margin          : var(--sp-6) 0;
}
.divider-ornament::before,
.divider-ornament::after {
  content  : '';
  flex     : 1;
  height   : 1px;
  background: linear-gradient(90deg, transparent, var(--border-medium));
}
.divider-ornament::after {
  background: linear-gradient(90deg, var(--border-medium), transparent);
}

/* ═══════════════════════════════════════════════════════════════════════════
   9. UTILITY CLASSES
   ═══════════════════════════════════════════════════════════════════════════ */

/* Spacing */
.mt-1  { margin-top:    var(--sp-1);  } .mb-1  { margin-bottom: var(--sp-1);  }
.mt-2  { margin-top:    var(--sp-2);  } .mb-2  { margin-bottom: var(--sp-2);  }
.mt-3  { margin-top:    var(--sp-3);  } .mb-3  { margin-bottom: var(--sp-3);  }
.mt-4  { margin-top:    var(--sp-4);  } .mb-4  { margin-bottom: var(--sp-4);  }
.mt-6  { margin-top:    var(--sp-6);  } .mb-6  { margin-bottom: var(--sp-6);  }
.mt-8  { margin-top:    var(--sp-8);  } .mb-8  { margin-bottom: var(--sp-8);  }
.p-4   { padding:       var(--sp-4);  }
.p-5   { padding:       var(--sp-5);  }
.p-6   { padding:       var(--sp-6);  }
.px-4  { padding-left:  var(--sp-4);  padding-right:  var(--sp-4); }
.py-2  { padding-top:   var(--sp-2);  padding-bottom: var(--sp-2); }

/* Text align */
.text-left   { text-align: left;   }
.text-center { text-align: center; }
.text-right  { text-align: right;  }

/* Overflow */
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.overflow-hidden { overflow: hidden; }

/* Cursor */
.cursor-pointer { cursor: pointer; }

/* Opacity */
.opacity-50 { opacity: 0.5; }
.opacity-70 { opacity: 0.7; }

/* Rounded */
.rounded    { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-full { border-radius: var(--radius-full); }

/* Shadow */
.shadow-sm  { box-shadow: var(--shadow-sm); }
.shadow-md  { box-shadow: var(--shadow-md); }
.shadow-lg  { box-shadow: var(--shadow-lg); }
.shadow-gold{ box-shadow: var(--shadow-gold); }

/* Border */
.border-subtle { border: 1px solid var(--border-subtle); }
.border-soft   { border: 1px solid var(--border-soft);   }
.border-gold   { border: 1px solid var(--border-medium); }

/* Background surfaces */
.bg-surface-0 { background: var(--surface-0); }
.bg-surface-1 { background: var(--surface-1); }
.bg-surface-2 { background: var(--surface-2); }

/* Glassmorphism utility */
.glass {
  background          : rgba(27,13,10,0.65);
  backdrop-filter     : blur(12px) saturate(1.4);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  border              : 1px solid var(--border-soft);
}

/* Gold gradient text */
.text-gradient-gold {
  background          : linear-gradient(135deg, var(--hws-gold) 0%, var(--hws-ivory) 60%, var(--hws-gold-muted) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip     : text;
}

/* ═══════════════════════════════════════════════════════════════════════════
   10. CUSTOM SCROLLBAR — refined, unobtrusive
   ═══════════════════════════════════════════════════════════════════════════ */
::-webkit-scrollbar          { width: 5px; height: 5px; }
::-webkit-scrollbar-track    { background: transparent; }
::-webkit-scrollbar-thumb    {
  background    : rgba(211,161,115,0.2);
  border-radius : var(--radius-full);
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(211,161,115,0.4);
}
::-webkit-scrollbar-corner { background: transparent; }

/* Firefox scrollbar */
* { scrollbar-width: thin; scrollbar-color: rgba(211,161,115,0.2) transparent; }