/* ==========================================================================
   璞记 / PUJI — Design Tokens
   The Puxuan Hotel and Spa, Beijing · Guest Relationship System
   --------------------------------------------------------------------------
   Single source of truth for colour, type, radius and spacing.
   Visual reference: ./reference/01–04 .png (the four brand boards)
   Apply with:  var(--jade-700)  etc.
   ========================================================================== */

:root {
  /* ------------------------------------------------------------------
     JADE — the hotel's material. Carries structure, action and depth.
     Suite-aligned toward iKom's teal (chrome only; the 璞记 mark keeps
     its exact #2E6350 / #C0714A — see BRAND.md).
     ------------------------------------------------------------------ */
  --jade-900: #123B34;  /* Jade Ink    — dark surfaces: sidebar, hero grounds  */
  --jade-800: #17493F;  /* raised state on Jade Ink (active nav, staff card)   */
  --jade-700: #277468;  /* Puxuan Jade — PRIMARY action, links, brand accent   */
  --jade-500: #3E9082;  /* Jade Mid    — secondary accents, avatars            */
  --jade-200: #A6D6CE;  /* Jade Light  — decorative strokes on dark            */
  --jade-050: #E7F2F0;  /* Jade Wash   — tint / chip backgrounds               */

  /* ------------------------------------------------------------------
     WARM NEUTRALS — paper, not white. Keeps a dense tool from feeling
     clinical.
     ------------------------------------------------------------------ */
  --ink:       #1E2B25;  /* primary text                                        */
  --body:      #4A554D;  /* body text                                           */
  --stone:     #A99B87;  /* muted text, captions, hex labels                    */
  --sand:      #E6DCCC;  /* hairline strokes, dividers, input borders           */
  --paper:     #F7F3EC;  /* app background                                      */
  --porcelain: #FFFCF7;  /* raised cards                                        */

  /* ------------------------------------------------------------------
     CLAY — the accent. Warmth itself.
     RULE: spend it only where a human moment is recorded — a returning
     guest, a confirmed preference, an anniversary. Never on chrome.
     ------------------------------------------------------------------ */
  --clay:      #C0714A;
  --clay-050:  #F0DCCF;  /* clay tint — chip background */
  --clay-ink:  #A85C36;  /* text on clay tint           */

  /* ------------------------------------------------------------------
     ON-DARK — for use on --jade-900
     ------------------------------------------------------------------ */
  --on-dark:       #F7F3EC;  /* primary text on dark   */
  --on-dark-muted: #B7CFCA;  /* secondary text on dark */
  --on-dark-jade:  #96CBC2;  /* jade arc, reversed     */
  --on-dark-clay:  #D89A6E;  /* clay arc, reversed     */
  --on-dark-faint: #83AEA6;  /* inactive nav icon/label*/

  /* ------------------------------------------------------------------
     STATE — for the operator, never for the guest.
     ------------------------------------------------------------------ */
  --success:   #3E7A55;
  --attention: #C98A2E;
  --escalate:  #B44B3C;
  --info:      #4A6E86;

  /* ------------------------------------------------------------------
     TYPOGRAPHY
     Voice pair  — guest names, arrival dates, occasions. Never chrome.
     UI pair     — everything dense, sortable or repeated.
     NOTE: Fraunces and Manrope carry NO Chinese glyphs. The CJK face
     must always follow in the stack, or Chinese falls back to a system
     serif and the voice collapses.
     ------------------------------------------------------------------ */
  --font-voice: "Fraunces", "Noto Serif SC", "Songti SC", Georgia, serif;
  --font-ui:    "Manrope", "Noto Sans SC", "Microsoft YaHei", "Segoe UI", sans-serif;

  /* type scale — size / line-height */
  --text-display: 48px;  --leading-display: 56px;  /* Fraunces Light          */
  --text-h1:      32px;  --leading-h1:      40px;  /* Fraunces Regular        */
  --text-h2:      22px;  --leading-h2:      30px;  /* Fraunces SemiBold       */
  --text-body:    15px;  --leading-body:    27px;  /* Manrope Regular         */
  --text-label:   13px;  --leading-label:   20px;  /* Manrope SemiBold        */
  --text-caption: 11px;  --leading-caption: 16px;  /* Manrope SemiBold +1.6tr */
  --text-data:    13px;  --leading-data:    18px;  /* Manrope Medium, tabular */

  /* ------------------------------------------------------------------
     RADIUS
     ------------------------------------------------------------------ */
  --radius-input:  8px;
  --radius-chip:   14px;
  --radius-card:   20px;
  --radius-panel:  28px;

  /* ------------------------------------------------------------------
     SPACING — 4 / 8 / 12 / 16 / 24 / 32 / 40 / 64
     (token name = value ÷ 4)
     ------------------------------------------------------------------ */
  --space-1:  4px;
  --space-2:  8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-16: 64px;

  /* ------------------------------------------------------------------
     GRID — 12 columns, 24px gutter, compact density
     ------------------------------------------------------------------ */
  --grid-columns: 12;
  --grid-gutter: 24px;
}