/* ============================================================
   Fallowing Space — base.css
   Shared design tokens, reset, and common UI primitives.
   Aesthetic: warm, calm, professional. Not clinical.
   Loaded by index, controller, and display.
   ============================================================ */

:root {
  /* --- Surfaces & ink --- */
  --sand:       #F3EADD;   /* page background */
  --cream:      #FBF6EE;   /* raised surface / cards */
  --cream-2:    #FFFDF9;   /* highest surface */
  --ink:        #2B2520;   /* primary text */
  --ink-soft:   #6E6155;   /* secondary text */
  --ink-faint:  #A2937F;   /* tertiary / hints */

  /* --- Brand & accents --- */
  --rust:       #BF5A2E;   /* primary action */
  --rust-deep:  #9C441F;   /* pressed / hover */
  --rust-tint:  #F0DBcf;   /* soft rust fill */
  --clay:       #E7D6C4;   /* soft borders / fills */
  --sage:       #7E8C6F;   /* calm secondary accent */
  --sage-tint:  #E4E8DC;

  /* --- Status (functional, fixed meanings) --- */
  --ok:    #4F7A4C;        /* green  — session healthy */
  --warn:  #D69B3C;        /* amber  — 10 min remaining */
  --alert: #C0392B;        /* red    — 5 min remaining */

  /* --- Lines & shadow --- */
  --line:       rgba(43, 37, 32, 0.10);
  --line-strong:rgba(43, 37, 32, 0.18);
  --shadow-sm:  0 1px 2px rgba(43, 37, 32, 0.06), 0 2px 6px rgba(43, 37, 32, 0.05);
  --shadow-md:  0 4px 14px rgba(43, 37, 32, 0.10);
  --shadow-lg:  0 10px 30px rgba(43, 37, 32, 0.14);

  /* --- Type --- */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-ui: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, sans-serif;

  /* --- Geometry --- */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-pill: 999px;

  /* --- Tap targets (tablet-first) --- */
  --tap: 60px;            /* minimum comfortable tap height */
  --tap-lg: 96px;         /* primary action height */

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

* { box-sizing: border-box; }

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

body {
  font-family: var(--font-ui);
  color: var(--ink);
  background: var(--sand);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.45;
}

/* Warm atmospheric background for therapist-facing surfaces */
.warm-bg {
  background:
    radial-gradient(1200px 700px at 12% -10%, rgba(191, 90, 46, 0.07), transparent 60%),
    radial-gradient(900px 600px at 110% 10%, rgba(126, 140, 111, 0.08), transparent 55%),
    var(--sand);
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: 0;
}

button {
  font-family: var(--font-ui);
  cursor: pointer;
  border: none;
  background: none;
}

/* ---------- Card ---------- */
.card {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}

.card-title {
  font-family: var(--font-ui);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0;
}

/* ---------- Pill / status ---------- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.85rem;
  border-radius: var(--r-pill);
  font-size: 0.82rem;
  font-weight: 600;
  background: var(--cream-2);
  border: 1px solid var(--line);
  color: var(--ink-soft);
  white-space: nowrap;
}

.dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--ink-faint);
  flex: none;
  box-shadow: 0 0 0 0 rgba(79, 122, 76, 0.5);
}
.dot.live {
  background: var(--ok);
  animation: pulse 2.2s var(--ease) infinite;
}
.dot.waiting { background: var(--warn); }

@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(79, 122, 76, 0.45); }
  70%  { box-shadow: 0 0 0 7px rgba(79, 122, 76, 0); }
  100% { box-shadow: 0 0 0 0 rgba(79, 122, 76, 0); }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: var(--tap);
  padding: 0 1.4rem;
  border-radius: var(--r-md);
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
  background: var(--cream-2);
  border: 1px solid var(--line-strong);
  transition: transform 0.12s var(--ease), background 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.btn:active { transform: scale(0.98); }
.btn.primary {
  background: var(--rust);
  color: #fff;
  border-color: var(--rust-deep);
  box-shadow: var(--shadow-md);
}
.btn.primary:active { background: var(--rust-deep); }

/* ---------- Licence lock screen ---------- */
.fs-lock {
  position: fixed; inset: 0; z-index: 9999;
  background: var(--cream, #fbf6ee);
  display: flex; align-items: center; justify-content: center;
  padding: 1.4rem;
}
.fs-lock-card {
  width: 100%; max-width: 420px; text-align: center;
  background: var(--cream-2, #fff); border: 1px solid var(--line, #e7ddcf);
  border-radius: var(--r-lg, 18px); padding: 2rem 1.6rem;
  box-shadow: var(--shadow-md, 0 4px 14px rgba(43,37,32,.1));
}
.fs-lock-logo { font-family: var(--font-display, Georgia, serif); font-size: 1.8rem; font-weight: 600; margin-bottom: 0.8rem; }
.fs-lock-logo .a { color: var(--rust, #bf5a2e); }
.fs-lock-msg { color: var(--ink-soft, #5b5248); margin: 0 0 1rem; line-height: 1.45; }
.fs-key {
  width: 100%; resize: vertical; font-family: monospace; font-size: 0.9rem;
  padding: 0.7rem 0.8rem; border: 1px solid var(--line-strong, #d8ccb8);
  border-radius: var(--r-md, 12px); background: #fff; margin-bottom: 0.6rem;
}
.fs-err { color: var(--alert, #c0392b); font-size: 0.85rem; min-height: 1.1rem; margin-bottom: 0.4rem; }
.fs-lock-card .btn { width: 100%; min-height: var(--tap, 48px); }
.fs-fine { color: var(--ink-faint, #9a8f80); font-size: 0.78rem; margin: 1rem 0 0; line-height: 1.4; }