/* ===========================================================================
   Attended, design tokens
   Three faces, each with one job:

   Outfit, Medium 500, the display face.  Headlines, screen titles, the
     wordmark, table numbers and the code box.  Chosen over a serif for one
     operational reason: the codes get printed on tent cards and read from four
     feet away, and typed in a dim hall by someone holding a drink.  Outfit has
     even strokes and open counters, so T07 stays T07.  A high-contrast serif
     goes thin at that distance and its 0 and O sit too close together.

   Schibsted Grotesk, Norwegian newspaper grotesque, four weights, open
     apertures and real numerals.  Carries every interface surface: labels,
     buttons, body, the lot.  Legible at 11px on a lanyard badge, which the
     prettier alternatives are not.

   Instrument Serif Italic, kept for one thing only, the quiet asides:
     "you need to be there to be here", "no messaging yet, on purpose".  Outfit
     has no true italic, and those lines are the product's voice; dropping them
     to a light weight would flatten them.  One face, one job, used sparingly.

   The palette: a hint of purple, a hint of yellow, and two grounded accents.
   Iris carries authority without going corporate navy.  Saffron is the warm
   one, used sparingly, the period in front of the wordmark, the one chip that wants
   a tap.  Jade means it worked.  Clay means it is waiting on someone.
   Everything sits on mist, never white, so the cards have somewhere to float.
   =========================================================================== */

/* The faces are loaded from <head> in _head.php, with a preconnect in front
   of them.  An @import here cannot start until this file has been fetched
   and parsed, which puts every face one whole round trip late and shows the
   fallback for longer than it needs to.  Weights were trimmed to the ones
   actually used: Outfit 500 and 600, Schibsted 400 to 700, Serif italic. */

:root {
  /* ---- type ------------------------------------------------------------ */
  --font-display: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-ui: 'Schibsted Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-aside: 'Instrument Serif', Georgia, serif;   /* italic only, the voice lines */
  --weight-display: 500;   /* Medium. 600 only where a code is printed. */

  /* Four sizes, and that is the whole scale. If something seems to need a
     fifth, the hierarchy is wrong rather than the scale being short.
       caption  what a thing is, not what it says: labels, roles, footnotes
       body     every sentence a visitor is actually meant to read
       title    a heading inside a section
       section  a heading that starts one
     The hero is the one exception, and it is a clamp rather than a step. */
  --step--1: 0.875rem;    /* 14px   caption */
  --step-0:  1.0625rem;   /* 17px   body */
  --step-1:  1.25rem;     /* 20px   title */
  --step-2:  1.75rem;     /* 28px   section */
  --step-3:  2rem;        /* 32px   the typed code and table numbers, only */
  --step-4:  2.75rem;     /* 44px   site hero */

  --tracking-label: 0.06em;
  --tracking-code: 0.12em;   /* typed codes need air between glyphs */
  --tracking-tight: -0.02em; /* display sizes only */

  /* ---- ink ------------------------------------------------------------- */
  --ink:   #2A2140;   /* near-black with purple in it, never pure #000 */
  --soft:  #5B5270;   /* secondary text */
  --mute:  #8B829E;   /* tertiary, placeholders, disabled */
  --line:  #E8E2F0;   /* hairlines */

  /* ---- ground ---------------------------------------------------------- */
  --mist:  #FAF8FC;   /* the page */
  --paper: #FFFFFF;   /* cards */

  /* ---- iris · the primary --------------------------------------------- */
  --iris:       #6B4FB0;   /* 4.9:1 on white, AA for text and buttons */
  --iris-deep:  #55409A;   /* hover, pressed */
  --iris-pale:  #EFE9FA;   /* fills, selected rows */

  /* ---- saffron · the warm one, used once per screen ------------------- */
  --saffron:      #E8B33D;
  --saffron-edge: #EBD39A;
  --saffron-pale: #FDF3DA;

  /* ---- jade · it worked ----------------------------------------------- */
  --jade:      #2F7A62;   /* text and icons, passes AA */
  --jade-dot:  #4FA88B;   /* dots and fills, where contrast does not apply */
  --jade-pale: #E3F2EC;

  /* ---- clay · waiting on someone -------------------------------------- */
  --clay:      #D4785C;
  --clay-ink:  #A14F33;   /* the text version */
  --clay-pale: #FBEAE3;

  /* ---- geometry -------------------------------------------------------- */
  --r-sm: 9px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-pill: 999px;

  --shadow-card: 0 1px 2px rgba(42, 33, 64, .05), 0 8px 24px -12px rgba(42, 33, 64, .12);
  --shadow-sheet: 0 -8px 40px -12px rgba(42, 33, 64, .28);

  --page: 1240px;   /* was 1060. One value, both pages read it. */
  --tap: 44px;  /* nothing interactive is smaller than this, ever */
}

/* Dark mode is deliberately out of scope for v1: every screen that matters is
   read in a bright convention hall, and a half-done dark theme looks worse
   than none.  When it lands it goes here, under prefers-color-scheme. */

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

html { -webkit-text-size-adjust: 100%; }

a { text-decoration: none; }

body {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--step-0);
  line-height: 1.5;
  color: var(--ink);
  background: var(--mist);
  -webkit-font-smoothing: antialiased;
  /* iOS: keep content clear of the notch and the home bar once installed */
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
           env(safe-area-inset-bottom) env(safe-area-inset-left);
}

h1, h2, h3, .display {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  letter-spacing: var(--tracking-tight);
  line-height: 1.18;   /* a sans needs more room than the serif did */
  margin: 0;
}

.aside {                      /* the quiet voice: "on purpose", "not yet" */
  font-family: var(--font-aside);
  font-style: italic;
  color: var(--soft);
}

.label {                      /* every uppercase micro-heading */
  font-size: 11px;
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--mute);
}

.wordmark {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--step-1);
  letter-spacing: -0.02em;
}
.wordmark::before { content: '.'; color: var(--saffron); margin-right: 0.01em; }
/* The period leads the wordmark: .Attended, not Attended.  Saffron, always,
   and it is the same dot as the mark's counter and the connection rails. */

/* ---- the code box.  The single most important input in the product. ---- */
.code-input {
  font-family: var(--font-display);
  font-weight: 600;   /* heavier than the rest: it is read across a room */
  font-size: var(--step-3);
  letter-spacing: var(--tracking-code);
  text-transform: uppercase;
  text-align: center;
  width: 100%;
  min-height: 62px;
  padding: 10px 14px;
  color: var(--ink);
  background: var(--paper);
  border: 1.5px solid var(--ink);
  border-radius: var(--r-md);
}
.code-input::placeholder { color: var(--mute); letter-spacing: var(--tracking-code); }
.code-input:focus-visible { outline: 3px solid var(--iris-pale); border-color: var(--iris); }

/* ---- buttons ---------------------------------------------------------- */
.btn {
  font: inherit; font-weight: 600;
  min-height: var(--tap);
  padding: 13px 18px;
  border: 0; border-radius: var(--r-md);
  background: var(--iris); color: #fff;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.btn:hover { background: var(--iris-deep); }
.btn--quiet { background: transparent; color: var(--ink); border: 1.5px solid var(--line); }
.btn--warm  { background: var(--saffron-pale); color: var(--ink); border: 1px solid var(--saffron-edge); }
.btn:focus-visible { outline: 3px solid var(--iris-pale); outline-offset: 2px; }

/* ---- cards and chips -------------------------------------------------- */
.card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 16px; }
.chip { font-size: var(--step--1); font-weight: 500; border-radius: var(--r-pill); padding: 5px 11px;
        background: var(--iris-pale); color: var(--iris-deep); }
.chip--warm { background: var(--saffron-pale); color: #8A6212; }
.chip--good { background: var(--jade-pale); color: var(--jade); }
.chip--wait { background: var(--clay-pale); color: var(--clay-ink); }

/* ---- the three states a person can be in at a table ------------------- */
.state-seated    { color: var(--mute); }
.state-offered   { color: var(--clay-ink); }
.state-shared    { color: var(--jade); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}