/* ============================================================================
   ClickStay — Andaman Ferry Board
   Design tokens. Light = ticket stock in daylight. Dark = hull at night.

   Colour discipline, and the whole reason this rack stays readable:
   the rack encodes FOUR state dimensions, and only ONE of them is colour.
     colour  -> room / booking state
     stub    -> payment state          (left end of the bar)
     stamp   -> ตม.30 compliance state (top-right corner of the bar)
     code    -> booking source         (right end of the bar)
   Adding a fifth colour dimension is how this turns into a sweet shop.
   ========================================================================= */

:root {
  /* --- Ticket stock ground -------------------------------------------- */
  --ground:        #F0EBDF;  /* the board itself — ticket stock */
  --surface:       #FBF8F1;  /* panels resting on the board */
  --surface-2:     #E7E0D0;  /* recessed: date scale, headers, lane gutters */
  --surface-sunk:  #DED5C2;  /* deepest recess — closed days, disabled */

  --ink:           #131A1D;  /* hull black */
  --ink-2:         #4C5B61;  /* secondary — tinted from the hull, never grey */
  /* Tertiary still has to clear 4.5:1 on the ticket ground: it carries the
     search placeholder and the day-of-week row, and this screen is read in
     open-air glare. #77848A measured 3.4:1 and was raised. */
  --ink-3:         #5A6A71;
  --ink-inv:       #F6F2E8;  /* text on enamel plates */

  --rule:          #D2C9B4;  /* printed rule on ticket stock */
  --rule-2:        #BFB39A;  /* stronger rule — lane separators, table heads */
  --rule-ink:      #0B3C49;  /* the drawn rule: today marker, focus */

  /* --- Enamel plates. These are pigment: they hold across both themes. -- */
  --enamel-hull:   #0B3C49;  /* เข้าพักแล้ว  in-house */
  --enamel-ticket: #F2C14E;  /* จองแล้ว     reserved, not arrived */
  --enamel-sea:    #2F6B5A;  /* ทำความสะอาด cleaning */
  --enamel-rust:   #BE3F1C;  /* ซ่อมบำรุง   maintenance (hatched) */
  --enamel-signal: #E4572E;  /* alert only — ตม.30 overdue, overdue balance */

  --on-hull:       #F6F2E8;
  --on-ticket:     #131A1D;
  --on-sea:        #F6F2E8;
  --on-rust:       #F6F2E8;

  /* Tints of the enamel colours, for backgrounds that carry ink text */
  --tint-hull:     #DCE6E9;
  --tint-ticket:   #FAEDCB;
  --tint-sea:      #DDE9E4;
  --tint-rust:     #F7DFD6;

  /* --- Depth. Plates sit on a board; they do not float in space. ------- */
  --lift-1: 0 1px 1px rgba(11, 60, 73, .10), 0 1px 3px rgba(11, 60, 73, .07);
  --lift-2: 0 1px 2px rgba(11, 60, 73, .12), 0 4px 12px rgba(11, 60, 73, .10);
  --lift-3: 0 2px 4px rgba(11, 60, 73, .14), 0 12px 32px rgba(11, 60, 73, .16);
  --lift-drag: 0 4px 6px rgba(11, 60, 73, .18), 0 16px 36px rgba(11, 60, 73, .28);

  /* Hatch fill for rooms that cannot be sold. Pattern, not colour. */
  --hatch-rust: repeating-linear-gradient(-45deg,
                  #BE3F1C 0 2px, transparent 2px 7px);
  --hatch-ink:  repeating-linear-gradient(-45deg,
                  #131A1D 0 2px, transparent 2px 7px);
  --hatch-bed:  #EDE4D2;

  color-scheme: light;
}

:root[data-theme="dark"] {
  /* Hull at night, under the wheelhouse lamp. Cream ink, never white. */
  --ground:        #0A1215;
  --surface:       #101D22;
  --surface-2:     #16272E;
  --surface-sunk:  #0D181C;

  --ink:           #EDE6D6;
  --ink-2:         #9DB0B7;
  --ink-3:         #7E9199;   /* clears 4.5:1 on --surface, not just on --ground */
  --ink-inv:       #F6F2E8;

  --rule:          #1E323A;
  --rule-2:        #2A4451;
  --rule-ink:      #6FB3C4;

  /* Deep hull teal disappears into a night ground, so the plate is lit. */
  --enamel-hull:   #15697F;
  --enamel-ticket: #F2C14E;
  --enamel-sea:    #3A8871;
  --enamel-rust:   #D24A20;
  --enamel-signal: #FF6A3D;

  --on-hull:       #F1FAFC;
  --on-ticket:     #131A1D;
  --on-sea:        #F4FBF8;
  --on-rust:       #FFF3EE;

  --tint-hull:     #123039;
  --tint-ticket:   #3B3116;
  --tint-sea:      #16332B;
  --tint-rust:     #3A1A11;

  --lift-1: 0 1px 1px rgba(0, 0, 0, .40), 0 1px 3px rgba(0, 0, 0, .30);
  --lift-2: 0 1px 2px rgba(0, 0, 0, .45), 0 4px 12px rgba(0, 0, 0, .38);
  --lift-3: 0 2px 4px rgba(0, 0, 0, .50), 0 12px 32px rgba(0, 0, 0, .50);
  --lift-drag: 0 4px 6px rgba(0, 0, 0, .55), 0 16px 36px rgba(0, 0, 0, .65);

  --hatch-rust: repeating-linear-gradient(-45deg,
                  #D24A20 0 2px, transparent 2px 7px);
  --hatch-ink:  repeating-linear-gradient(-45deg,
                  #9DB0B7 0 2px, transparent 2px 7px);
  --hatch-bed:  #0F1C21;

  color-scheme: dark;
}

:root {
  /* --- Type ------------------------------------------------------------
     Bai Jamjuree: signage voice. Room plates, board header, big numerals.
     Anuphan: the working face. Both Thai-first, both by Cadson Demak.
     Latin fallbacks exist only for the split second before the woff2 lands.
  */
  --face-sign: 'Bai Jamjuree', 'Helvetica Neue', Arial, sans-serif;
  --face-ui:   'Anuphan', 'Helvetica Neue', Arial, sans-serif;
  --face-my:   'Noto Sans Myanmar', 'Padauk', sans-serif;

  --t-code:  10.5px; /* agent codes, stub labels — tracked uppercase */
  --t-micro: 11.5px; /* lane labels, table column heads */
  --t-small: 12.5px;
  --t-base:  13.5px; /* the rack's working size */
  --t-form:  15px;   /* anything a guest is standing there waiting for */
  --t-lg:    17px;
  --t-xl:    21px;
  --t-2xl:   27px;
  --t-3xl:   36px;

  /* Thai needs headroom: upper vowels and tone marks stack two levels above
     the x-height, lower vowels one below. A 1.2 line-height tuned on Latin
     clips them. Nothing here goes below 1.35. */
  --lh-tight: 1.35;
  --lh-base:  1.55;
  --lh-loose: 1.7;

  --track-code: .09em;
  --track-sign: .01em;

  /* --- Space ----------------------------------------------------------- */
  --s-1: 2px;   --s-2: 4px;   --s-3: 6px;   --s-4: 8px;
  --s-5: 12px;  --s-6: 16px;  --s-7: 20px;  --s-8: 24px;
  --s-9: 32px;  --s-10: 40px; --s-11: 48px; --s-12: 64px;

  /* --- Shape. Enamel plates have a hint of a radius; ticket stubs none. */
  --r-plate: 2px;
  --r-panel: 4px;
  --r-field: 3px;

  /* --- The board's own geometry ---------------------------------------- */
  --lane-h: 30px;        /* one room lane */
  --lane-gap: 3px;
  /* Wide enough for the longest untruncated label the plate can carry
     ("Standard Fan" at 11.5px beside a 34px room id). Narrower than this and
     the plate clips in English at sizes where nothing else is tight. */
  --room-col: 134px;
  --day-w: 62px;         /* one night on the date scale */
  --bar-inset: 2px;

  /* --- Motion. One authored moment: the ticket sliding into its detent. */
  --ease-detent: cubic-bezier(.16, 1, .3, 1);
  --ease-out:    cubic-bezier(.22, 1, .36, 1);
  --dur-snap: 190ms;
  --dur-slide: 280ms;
  --dur-panel: 240ms;

  /* Touch: the counter tablet is finger-only. */
  --tap: 44px;
}

/* The owner's dense view tightens the board; the receptionist's does not. */
:root[data-density="dense"] {
  --lane-h: 25px;
  --lane-gap: 2px;
  --day-w: 54px;
  --t-base: 12.5px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-snap: 1ms; --dur-slide: 1ms; --dur-panel: 1ms;
  }
}