/* =============================================================================
   Grand Yan Hotel — Design Tokens & Base Layer
   Source of truth: docs/design/2026-06-26-hk-cockpit/hk-cockpit.dc.html
   ============================================================================= */

/* =============================================================================
   DESIGN TOKENS
   ============================================================================= */
:root {

  /* --- Surfaces & Brand Palette --- */
  --c-cream:          #F4EFE5;  /* page background, primary surface            */
  --c-cream-2:        #EDE5D0;  /* cards, KPI tiles, hub tiles                 */
  --c-straw:          #DDD6C5;  /* avatar bg, placeholders                     */
  --c-gold:           #B8893C;  /* primary accent: bars, indicators            */
  --c-gold-dk:        #8B6028;  /* interactive gold: hover, eyebrow            */
  --c-gold-lt:        #E8C77A;  /* gold on dark: chips, counters               */
  --c-gold-text:      #6E4A1C;  /* small gold text on light (AA 6.9:1)         */
  --c-brown:          #6B5F45;  /* secondary text, lead, meta                  */
  --c-dark:           #1F1B14;  /* near-black: body text, top-bar, CTA         */
  --c-line:           rgba(31, 27, 20, 0.12);  /* hairline border on light     */
  --c-line-2:         rgba(31, 27, 20, 0.06);  /* even softer divider          */
  --c-line-on-dark:   rgba(244, 239, 229, 0.14); /* hairline border on dark    */

  /* --- Room Status Tokens (bg / border / text) --- */
  --st-dirty-bg:      #ECD9C4;
  --st-dirty-bd:      #9C5A2E;
  --st-dirty-tx:      #6E3C1B;

  --st-clean-bg:      #DEE4CE;
  --st-clean-bd:      #6C7A46;
  --st-clean-tx:      #44502A;

  --st-insp-bg:       #CDD8B2;
  --st-insp-bd:       #51632F;
  --st-insp-tx:       #34431C;

  --st-ooo-bg:        #DBD4C5;
  --st-ooo-bd:        #8A8270;
  --st-ooo-tx:        #575142;

  --st-occ-bg:        #EDE5D0;
  --st-occ-bd:        rgba(31, 27, 20, 0.18);
  --st-occ-tx:        #1F1B14;

  /* --- HK Priority (muted warm-earth ramp; left-bar 6px + overdue dots only) --- */
  --hk-prio-1:        #B23B3B;  /* critical   */
  --hk-prio-2:        #C2622E;  /* high       */
  --hk-prio-3:        #C8962F;  /* medium     */
  --hk-prio-4:        #6C7A46;  /* low        */

  /* --- Semantic / Feedback --- */
  --sem-success:      #6C7A46;
  --sem-danger:       #B23B3B;
  --sem-danger-bg:    rgba(178, 59, 59, 0.07);
  --sem-danger-deep:  #8E2A2A;
  --sem-warn:         #8B6028;
  --sem-warn-bg:      rgba(184, 137, 60, 0.07);
  --sem-muted-bg:     rgba(107, 95, 69, 0.06);
  --sem-disabled-bg:  #E2DAC8;
  --sem-disabled-text:#8A8270;
  --sem-success-bg:   rgba(108, 122, 70, 0.12);

  /* --- Maid Identity Tints (low-saturation, straw→brown hue band) --- */
  --tint-anya:        #E6DCC2;
  --tint-lena:        #E3D9CC;
  --tint-ira:         #DED7C0;

  /* --- Shape --- */
  --radius:           6px;
  --radius-sm:        2px;

  /* --- Elevation --- */
  --shadow-card:      0 18px 40px -24px rgba(31, 27, 20, 0.30);
  --shadow-float:     0 16px 48px -24px rgba(31, 27, 20, 0.18);
  --shadow-drawer:    0  20px 40px      rgba(31, 27, 20, 0.30);

  /* --- Spacing rhythm --- */
  --pad:              clamp(20px, 4vw, 48px);
  --sp-1:             4px;
  --sp-2:             8px;
  --sp-3:             12px;
  --sp-4:             16px;
  --sp-6:             24px;
  --sp-8:             32px;
  --sp-12:            48px;

  /* --- Touch targets --- */
  --tap:              48px;   /* min interactive target     */
  --tap-touch:        64px;   /* maid full-width primaries  */

  /* --- Typography --- */
  --ui-font:          'Inter', system-ui, -apple-system, sans-serif;
  --ui-mono:          'JetBrains Mono', ui-monospace, monospace;

  /* --- Type Scale --- */
  /* Sizes */
  --fs-h1:            clamp(36px, 5.4vw, 56px);
  --fs-h2:            clamp(28px, 3.6vw, 40px);
  --fs-h3:            clamp(20px, 2.2vw, 26px);
  --fs-lede:          clamp(15px, 1.3vw, 17px);
  --fs-body:          15px;
  --fs-eyebrow:       11px;
  --fs-button:        11px;
  --fs-nav:           11px;
  --fs-meta:          13px;
  --fs-mono:          12px;
  --fs-mono-big:      clamp(26px, 3vw, 38px);

  /* Weights */
  --fw-regular:       400;
  --fw-medium:        500;
  --fw-semibold:      600;
  --fw-bold:          700;

  /* Line-heights */
  --lh-heading:       1.05;
  --lh-h3:            1.08;
  --lh-lede:          1.6;
  --lh-body:          1.55;
  --lh-tight:         1.2;

  /* Letter-spacing */
  --ls-heading:       -0.02em;
  --ls-eyebrow:        0.22em;
  --ls-button:         0.13em;
  --ls-nav:            0.04em;
  --ls-wordmark:       0.18em;
  --ls-mono:           0.2em;

  /* --- Gap-fills: tokens used by ui.css not in the original canvas root --- */
  --c-surface:        #FFFFFF;                /* white card/input surface     */
  --st-ooo-stripe:    #CFC7B6;               /* diagonal stripe in OOO cells */
  --chrome-active:    rgba(184,137,60,0.18); /* nav/sidebar active highlight */

  /* ==========================================================================
     COMMAND-CENTER BACK-COMPAT ALIASES
     Legacy dashboard/command-center tokens → canvas token values.
     All pages that loaded docs/design/tokens.css continue to resolve correctly
     without a separate file; the canvas tokens are now the single source.
     ========================================================================== */

  /* surfaces */
  --bg:               var(--c-cream);
  --bg-2:             var(--c-cream-2);
  --surface:          var(--c-surface);
  --surface-2:        #FAF7F0;

  /* text */
  --ink:              var(--c-dark);
  --ink-2:            var(--c-brown);
  --ink-3:            #9A8E72;

  /* borders */
  --line:             var(--c-line);
  --line-2:           rgba(31,27,20,0.22);

  /* gold ramp */
  --gold:             var(--c-gold);
  --gold-dark:        var(--c-gold-dk);
  --gold-light:       var(--c-gold-lt);
  --gold-text:        var(--c-gold-text);
  --gold-wash:        rgba(184,137,60,0.10);

  /* chrome (dark top-bar) */
  --chrome:           var(--c-dark);
  --chrome-2:         #2A2418;
  --chrome-ink:       var(--c-cream);
  --chrome-ink-2:     #B7A98A;
  --chrome-line:      var(--c-line-on-dark);
  --chrome-gold:      var(--c-gold-lt);

  /* semantic feedback */
  --success:          var(--sem-success);
  --success-deep:     #0F6E56;
  --success-bg:       var(--sem-success-bg);
  --warn:             var(--sem-warn);
  --warn-deep:        var(--c-gold-dk);
  --warn-bg:          var(--sem-warn-bg);
  --danger:           var(--sem-danger);
  --danger-deep:      var(--sem-danger-deep);
  --danger-bg:        var(--sem-danger-bg);
  --info:             #5B7390;
  --info-bg:          rgba(91,115,144,0.10);

  /* legacy HK surface colours (used by dashboard) */
  --hk-dirty:         var(--st-dirty-bg);
  --hk-clean:         var(--st-clean-bg);
  --hk-inspected:     var(--st-insp-bg);
  --hk-ooo:           var(--st-ooo-bg);
  --hk-ink:           #5A4A30;

  /* badge helpers */
  --badge-checkin:    var(--c-gold);
  --badge-rebook:     var(--sem-danger);

  /* elevation (legacy short names) */
  --shadow:           0 1px 2px rgba(31,27,20,0.06), 0 1px 3px rgba(31,27,20,0.05);
  --shadow-pop:       var(--shadow-float);
}

/* =============================================================================
   BASE LAYER — Light Reset + Body
   ============================================================================= */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  font-feature-settings: 'ss01', 'cv11';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: var(--c-cream);
  color: var(--c-dark);
}

::selection {
  background: #E8C77A;
  color: #1F1B14;
}

/* --- Headings --- */
h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-weight: var(--fw-semibold);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  color: var(--c-dark);
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); }
h4 { font-size: var(--fs-lede); font-weight: var(--fw-semibold); letter-spacing: 0; }

/* --- Links --- */
a {
  color: var(--c-gold-text);
  text-decoration: underline;
  text-decoration-color: var(--c-line);
  text-underline-offset: 2px;
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}

a:hover {
  color: var(--c-gold-dk);
  text-decoration-color: var(--c-gold-dk);
}

a:focus-visible {
  outline: 2px solid var(--c-gold);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* --- Monospace utility --- */
code,
kbd,
pre,
.mono {
  font-family: 'JetBrains Mono', ui-monospace, 'Cascadia Code', monospace;
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-mono);
}