/* ---------------------------------------------------------------------------
 * Polo POS — design tokens
 * Palette ported from PoloPayBackoffice/public/global.css. The typographic and
 * spacing scales are POS-specific: this is a touch UI on a tablet, so the base
 * font size is 24px (not 14px) and the radii are 24/36px (not 6/12/24px).
 * ------------------------------------------------------------------------- */

/* Fonts */
@font-face {
  font-family: "roc-grotesk";
  src: url("./assets/fonts/RocGrotesk/Bold.otf") format("opentype");
  font-display: auto;
  font-style: normal;
  font-weight: 600;
  font-stretch: normal;
}

@font-face {
  font-family: "roc-grotesk";
  src: url("./assets/fonts/RocGrotesk/Medium.otf") format("opentype");
  font-display: auto;
  font-style: normal;
  font-weight: 500;
  font-stretch: normal;
}

@font-face {
  font-family: "roc-grotesk";
  src: url("./assets/fonts/RocGrotesk/Regular.otf") format("opentype");
  font-display: auto;
  font-style: normal;
  font-weight: 400;
  font-stretch: normal;
}

/* Colors */
:root {
  /* Ported unchanged from the backoffice palette */
  --blue: #0265ff;
  --white: #ffffff;
  --black: #000000;
  --dark-gray: #646464;
  --gray: #b2b2b2;
  --mid-gray: #d9d9d9;
  --extra-light-gray: #f8f8f8;
  --extra-extra-light-gray: #fafafa;
  --orange: #ff6c02;

  /* POS-specific — these differ from the backoffice (--red:#CF202F, --yellow:#FDC500) */
  --red: #ff0202;
  --yellow: #ffc702;

  /* Dark surfaces. Station setup runs on black while the rest of the POS is light,
     so these live alongside the light palette rather than replacing it. */
  --dark-surface: #0f0f0f;
  --dark-raised: #1f1f1f;
  --dark-border: #2f2f2f;

  /* 5% tints: selected rows, active tabs, count badges, card gradients */
  --blue-tint: rgba(2, 101, 255, 0.05);
  --orange-tint: rgba(255, 108, 2, 0.05);
  --red-tint: rgba(255, 2, 2, 0.05);
  --gray-tint: rgba(100, 100, 100, 0.05);
  --white-tint: rgba(255, 255, 255, 0.1);
}

/* Radii */
:root {
  --radius-card: 36px; /* panels, lists, pill buttons */
  --radius-key: 24px; /* numpad keys, badges, unit chips */
  --radius-field: 12px; /* setup fields and their submit button */
}

/* Typography — every size in the design sits on a 1.2 line-height and 3% tracking */
:root {
  --font-display: 60px;
  --font-title: 34px;
  --font-body: 24px;
  --font-caption: 18px;
  --line-height: 1.2;
  --letter-spacing: 0.03em;
  --control-line-height: 40.8px; /* fixed line box that gives pill buttons their height */
}

/* Spacing */
:root {
  --space-frame: 15px;
  --space-gap: 10px;
  --space-xs: 12px;
  --space-sm: 20px;
  --space-md: 24px;
  --space-lg: 36px;
}

/* Dimensions */
:root {
  --key-height: 120px;
  --key-min-width: 150px;
  --side-panel-width: 480px;
  --badge-size: 100px;
  --row-height: 90px;
}

/* Loading placeholders */
:root {
  --skeleton-block: var(--mid-gray);
  --skeleton-pulse-duration: 1.4s;
  --skeleton-pulse-opacity: 0.45;
  /* A skeleton that shows up for two frames on a fast load reads as a glitch, so it fades
     in only once the wait is long enough for the operator to have noticed the empty screen. */
  --skeleton-fade-duration: 160ms;
  --skeleton-fade-delay: 120ms;
}

/* Error feedback */
:root {
  --shake-duration: 400ms;
  --shake-distance: 12px;
}

/* Screensaver */
:root {
  --screensaver-logo-height: 60px;
  --screensaver-fade-duration: 400ms;
}

/* Z-index */
:root {
  --popover-z-index: 20;
  --overlay-z-index: 30;
  /* Above everything: the screensaver has to cover open popovers and side panels too. */
  --screensaver-z-index: 40;
  /* A rotated tablet must hide the complete app, including the screensaver. */
  --orientation-overlay-z-index: 50;
}

/* Reset */
*,
*::before,
*::after {
  box-sizing: border-box;
  /* The design tracks every size at 3%. Declared here rather than on body because
	   an inherited em value resolves against the *parent* font-size, which would
	   give a 60px title the 0.72px tracking of 24px body text instead of 1.8px. */
  letter-spacing: var(--letter-spacing);
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  background-color: var(--white);
  color: var(--black);
  font-family: "roc-grotesk", sans-serif;
  font-weight: 500;
  font-size: var(--font-body);
  line-height: var(--line-height);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;

  /* Kiosk feel: no rubber-band scroll, no tap flash, no text selection or long-press
     callout. Without these the app reads as a web page the moment a finger touches it. */
  overscroll-behavior: none;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}

/* Text entry is the one place selection must still work. */
input,
textarea {
  user-select: text;
  -webkit-user-select: text;
}

p,
h1,
h2,
h3,
h4 {
  margin: 0;
  font-weight: 500;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  margin: 0;
  padding: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

button:disabled {
  cursor: not-allowed;
}

input {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  outline: none;
  padding: 0;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Touch scroll without visible scrollbars — the POS runs full-screen on a tablet */
.scrollable {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.scrollable::-webkit-scrollbar {
  display: none;
}