/* =========================================================
   DESIGN TOKENS: the one place the website's colours, type, sizes,
   spaces, corners, shadows and timings are set. Every stylesheet
   uses these variables instead of its own numbers.

   The values are the Client Login page's own (the PMS app's
   rentals/public/css/tokens.css, from its docs/design-guidelines.md
   section 3), so the website and the login page look like one place.
   They are copied, not linked: a change in the PMS app must not
   quietly change the website. Change a shared value in both files.

   Decided by Anil, 13 November 2026:
   - terracotta is the accent; the yellow goes
   - the menu bar and footer band stay black
   - a light look: no dark film over photos
   - WhatsApp keeps its own green
   - every button is one height, 30% lower than the old 48px hero
     buttons (--size-button)
   ========================================================= */

:root {
  /* Light only, as on the login page. */
  color-scheme: light;

  /* ---------- Colour (shared with the PMS app) ---------- */
  --color-bg: #ffffff;
  --color-bg-grouped: #f4f5f7;
  --color-text: #1a1c1f;
  --color-text-secondary: #5c6370;
  --color-border: #e3e6ea;
  --color-border-control: #80868f;
  /* Terracotta, from the sign-in design of 8 November 2026; it sits with
     the orange of the sun. White on it 5.94:1. */
  --color-accent: #a5472b;
  --color-accent-tint: #f7ede5;
  --color-on-accent: #ffffff;
  --color-success: #1e7a3c;
  --color-warning: #8a5a00;
  --color-danger: #b3261e;

  /* ---------- Colour (website only) ---------- */
  /* The warm off-white behind every other section. */
  --color-bg-tint: #faf6f2;
  /* The menu bar and footer band. */
  --color-bar: #1a1c1f;
  --color-on-bar: #ffffff;
  --color-bar-line: rgb(255 255 255 / 0.1);
  /* WhatsApp's own green, for WhatsApp buttons only. Dark text on it 10:1. */
  --color-whatsapp: #25d366;
  --color-on-whatsapp: #111111;

  /* ---------- Type (shared) ---------- */
  /* The device's own fonts: nothing to download. */
  --font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif;
  --font-family-display: ui-serif, "New York", Georgia, "Noto Serif", "Times New Roman", serif;
  --text-display: 2.125rem;
  --text-welcome: 2.5rem;
  --text-title-1: 1.75rem;
  --text-title-2: 1.375rem;
  --text-headline: 1.0625rem;
  --text-body: 1rem;
  --text-small: 0.875rem;
  --text-caption: 0.8125rem;
  --weight-regular: 400;
  --weight-semibold: 600;

  /* ---------- Type (website only) ---------- */
  /* The home page's opening headline: grows with the window, 36px to 48px. */
  --text-hero: clamp(2.25rem, 1.5rem + 2vw, 3rem);

  /* ---------- Space (shared) ---------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  /* Website only: the gap above and below each page section. */
  --space-8: 4rem;

  --margin-side: var(--space-4);
  --width-reading: 40rem;
  --size-touch: 2.75rem;
  --size-icon: 1.25rem;

  /* ---------- Buttons (website only) ---------- */
  /* One height for every button on the site (Anil, 13 November 2026: the
     hero's 48px less 30%). A finger gets a 44px target all the same: each
     button's tap area reaches 5px above and below what is drawn. */
  --size-button: 2.125rem;
  --button-tap-extra: 0.3125rem;

  /* ---------- Shape and depth (shared) ---------- */
  --radius-control: 0.5rem;
  --radius-surface: 0.875rem;
  --shadow-card: 0 1px 2px rgb(16 24 40 / 0.05), 0 4px 12px rgb(16 24 40 / 0.06);
  --shadow-float: 0 8px 28px rgb(16 24 40 / 0.18);
  --focus-ring: 2px;
  --focus-gap: 2px;

  /* ---------- Motion (shared) ---------- */
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --easing: cubic-bezier(0.2, 0, 0, 1);
}