/* ==========================================================================
   tokens.css — design tokens, font faces, reset.
   Brand-locked palette. Logical properties only: never left / right.
   ========================================================================== */

/* --- Self-hosted faces. No Google Fonts link: the kiosk runs offline. ------
   Tajawal (OFL) carries the Arabic; Inter (OFL) carries the Latin at a
   matching optical weight. unicode-range lets the browser pick per glyph, so
   a bean's Arabic and Latin names sit evenly on the same line.            */

@font-face {
  font-family: 'FL Sans';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url('../assets/fonts/tajawal-400-arabic.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1,
                 U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41,
                 U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: 'FL Sans';
  font-style: normal;
  font-weight: 500;
  font-display: block;
  src: url('../assets/fonts/tajawal-500-arabic.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1,
                 U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41,
                 U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: 'FL Sans';
  font-style: normal;
  font-weight: 700;
  font-display: block;
  src: url('../assets/fonts/tajawal-700-arabic.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1,
                 U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41,
                 U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: 'FL Sans';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url('../assets/fonts/inter-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F,
                 U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}
@font-face {
  font-family: 'FL Sans';
  font-style: normal;
  font-weight: 500;
  font-display: block;
  src: url('../assets/fonts/inter-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F,
                 U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}
@font-face {
  font-family: 'FL Sans';
  font-style: normal;
  font-weight: 700;
  font-display: block;
  src: url('../assets/fonts/inter-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F,
                 U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}

:root {
  /* --- Brand palette. Do not extend without the roastery. --------------- */
  --cream: #FDF7EA;      /* background */
  --ink: #2B3018;        /* headings */
  --olive: #4A5A32;      /* primary UI, active states */
  --olive-mid: #7E8C63;  /* secondary text */
  --hairline: #C9CBB4;   /* dividers */
  --accent: #4A5A32;     /* overwritten at runtime from the picked flavors */

  /* Derived surfaces, all from the five above. */
  --cream-sunk: #F6EFDE;
  --ink-soft: rgba(43, 48, 24, 0.62);
  --accent-wash: color-mix(in srgb, var(--accent) 12%, var(--cream));
  --accent-edge: color-mix(in srgb, var(--accent) 42%, var(--cream));

  /* --- Type ------------------------------------------------------------
     One root size drives the whole layout. min(vw, vh) keeps a 4:3 iPad
     identical at 1024x768, 1080x810 and 1366x1024, and the clamp stops a
     stray desktop window from exploding it.                               */
  --font-sans: 'FL Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --step--1: 0.82rem;
  --step-0: 1rem;
  --step-1: 1.3rem;
  --step-2: 1.7rem;
  --step-3: 2.3rem;
  --step-4: 3.2rem;
  --step-5: 4.6rem;

  --leading-tight: 1.12;
  --leading-body: 1.62;
  --measure: 34ch;        /* Arabic runs denser than Latin; ~60 Latin chars. */

  /* --- Space ----------------------------------------------------------- */
  --space-1: 0.35rem;
  --space-2: 0.7rem;
  --space-3: 1.15rem;
  --space-4: 1.8rem;
  --space-5: 2.8rem;
  --space-6: 4.2rem;
  --space-7: 6rem;

  /* --- Shape ----------------------------------------------------------- */
  --radius-sm: 0.6rem;
  --radius-md: 1.1rem;
  --radius-lg: 1.8rem;
  --radius-pill: 999rem;
  --hairline-width: 1px;

  /* --- Motion ----------------------------------------------------------
     Budget, not decoration: one bold moment on screen 4, everything else
     answers a touch inside 240ms.                                         */
  --dur-tap: 140ms;
  --dur-move: 240ms;
  --dur-settle: 600ms;
  --dur-beat: 800ms;        /* the pause after the 3rd pick */
  --dur-assembly: 2500ms;   /* screen 4, the one indulgence */
  --ease-out: cubic-bezier(0.22, 0.9, 0.28, 1);
  --ease-spring: cubic-bezier(0.34, 1.42, 0.42, 1);

  /* --- Touch ------------------------------------------------------------ */
  --tap-min: 4.4rem;
}

/* ==========================================================================
   Reset — kiosk flavoured: nothing scrolls, nothing selects, nothing
   highlights blue when a finger lands on it.
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: clamp(14px, min(1.5vw, 2vh), 26px);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  block-size: 100dvh;
  inline-size: 100vw;
  overflow: hidden;
  overscroll-behavior: none;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--step-0);
  font-weight: 400;
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  touch-action: manipulation;
  cursor: none;              /* the kiosk iPad has no pointer to show */
}

/* On a laptop the app is being reviewed, not used by a customer, and an
   invisible pointer makes that impossible. A fine pointer -- mouse or
   trackpad -- gets a brand-coloured ring; touch keeps `cursor: none` above,
   so nothing appears on the iPad. Encoded inline because the kiosk is offline
   and a cursor file would be one more asset to cache. */
@media (pointer: fine) {
  body {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Ccircle cx='14' cy='14' r='9' fill='none' stroke='%234A5A32' stroke-width='2' opacity='0.85'/%3E%3C/svg%3E") 14 14, none;
  }

  /* Filled over anything tappable, so the ring reads as a state, not decoration. */
  button,
  label,
  .orb-hit,
  .screen--attract {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Ccircle cx='14' cy='14' r='10' fill='%234A5A32' fill-opacity='0.22' stroke='%234A5A32' stroke-width='2'/%3E%3C/svg%3E") 14 14, none;
  }
}

h1, h2, h3 {
  font-weight: 700;
  line-height: var(--leading-tight);
  letter-spacing: -0.005em;
  text-wrap: balance;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  /* Inherit rather than fall back to `default`, so a touch device shows no
     pointer over a button either. The fine-pointer block below overrides it. */
  cursor: inherit;
  touch-action: manipulation;
}

canvas,
svg,
img {
  display: block;
  max-inline-size: 100%;
}

input {
  font: inherit;
  color: inherit;
}

/* The body disables selection for the whole kiosk; a text field has to opt
   back in or iOS will not let the customer place a caret in it. */
input[type='tel'],
input[type='text'] {
  -webkit-user-select: text;
  user-select: text;
  touch-action: manipulation;
}

/* Keyboard focus still has to work for the setup technician. */
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

/* --- Reduced motion: the assembly becomes a crossfade, everything else
       simply stops moving. ------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- Utilities -------------------------------------------------------- */

/* Any component rule that sets `display` would otherwise beat the UA style for
   [hidden], and a screen that is meant to be gone would stay on the glass. */
[hidden] { display: none !important; }

.is-hidden { display: none !important; }

.visually-hidden {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}