/* ==========================================================================
   Lispa · Brand system
   --------------------------------------------------------------------------
   One disciplined visual language used across every Lispa surface —
   customer, therapist, admin/HQ, sign-in, booking, emails.
   Import this file once at the top of any surface and everything below
   inherits: palette, typography scale, spacing rhythm, radii, shadows,
   motion, focus discipline, and accessibility primitives.

   Tokens are declared on :root as CSS custom properties. Component styles
   in this file are prefixed `.lb-` so they never collide with page or
   feature CSS. Existing surfaces can continue to use their own component
   class names and simply reference the tokens.

   Rules for use:
     - Do not hard-code #384737 or #A97C45 anywhere. Use var(--olive) etc.
     - Do not add another sans-serif. If you need a numeric font, use the
       tabular-nums feature (already default here) or the system stack.
     - Do not create a new radius, spacing, or easing outside these tokens
       without recording why in the source.
     - Focus visibility is non-negotiable. Do not use `outline: none`
       without a matching :focus-visible replacement.
   ========================================================================== */

/* Self-hosted EB Garamond — 400 / 500 / 600 / 400-italic. Same subset as
   the marketing site so no unicode-range surprises. */
@import url("fonts/eb-garamond.css");

:root {
  /* ---- Palette ---------------------------------------------------------- */
  --olive:            #384737;   /* primary — botanical deep green         */
  --olive-deep:       #2a362a;   /* hover / pressed / rich backgrounds     */
  --olive-soft:       #43533f;   /* mid depth, gradient inflections        */
  --olive-light:      #4a5a48;   /* lighter olive for subtle contrast      */
  --limestone:        #F6F1E8;   /* page ground — warm ivory               */
  --limestone-light:  #FDFCF9;   /* card ground when lifting off limestone */
  --limestone-warm:   #EFE8DA;   /* warm tinted ground, weather ribbons    */
  --paper:            #FDFCF9;   /* card ground on limestone               */
  --travertine:       #D8C6A6;   /* dividers, borders, quiet accents       */
  --travertine-soft:  #E5D8B8;   /* softer variant for large fills         */
  --bronze:           #A97C45;   /* signature accent, italic serifs, links */
  --bronze-deep:      #8B6234;   /* pressed / darker accent moments        */
  --ink:              #1E1E1E;   /* highest-contrast text on light         */
  --muted:            #5C5C50;   /* secondary text                         */
  --muted-light:      #8A8A7A;   /* tertiary text, timestamps              */
  --shell-ink:        #F6F1E8;   /* light text on deep grounds             */

  /* Semantic — kept warm, never fluorescent */
  --good:      #3A6B3A;
  --warn:      #B58A2C;
  --bad:       #8B3A3A;
  --bad-deep:  #742F2F;   /* pressed / hover on destructive actions */
  --sage-mint: #A9C3A6;   /* light sage for status pulses (clock breath) */

  /* Aliases — pages use these names interchangeably with semantic names */
  --green:  var(--good);
  --amber:  var(--warn);
  --red:    var(--bad);
  --danger: var(--bad);
  --charcoal: var(--ink);

  /* ---- Design canon aliases -------------------------------------------- */
  /* Names lifted from claude.ai/artifact/JeyXV8dQAu42dJ41BFFke2 so
     components ported from the canon Just Work. See docs/team-page-
     redesign-sketch.md for the port plan. */
  --sage:        var(--olive);
  --sage-deep:   var(--olive-deep);
  --sage-soft:   var(--olive-soft);
  --copper:      var(--bronze);
  --copper-soft: rgba(169,124,69,.60);
  --ivory:       var(--limestone);
  --stone:       var(--travertine);
  --stone-2:     #C9BFAE;                /* mid-tone stone for chip bricks */
  --paper2:      #EEE9DF;                /* card ground when lifting off paper */
  --lilac:       #777081;                /* lavender break state — timeline, wellbeing */
  --clay:        #C07A5A;                /* warm accent — reserved for guest tags */
  --info:        #7A8FA8;                /* cool tint for info alerts */
  --gold:        var(--warn);            /* review stars, achievement highlights */

  /* Accent translucencies */
  --bronze-soft: rgba(169,124,69,.14);

  /* Translucencies — used for scrims, focus rings, tints */
  --scrim:            rgba(30,30,30,.34);
  --scrim-warm:       rgba(56,71,55,.12);
  --wash-limestone:   rgba(246,241,232,.86);
  --wash-travertine:  rgba(216,198,166,.5);
  --wash-travertine-soft: rgba(216,198,166,.4);
  --wash-bronze:      rgba(169,124,69,.08);

  /* ---- Type scale ------------------------------------------------------- */
  --font-serif:   'EB Garamond', Georgia, 'Times New Roman', serif;
  --font-system:  -apple-system, BlinkMacSystemFont, 'SF Mono', Menlo, monospace;

  --fs-display:   clamp(38px, 5vw, 64px);
  --fs-title:     clamp(24px, 2.6vw, 32px);
  --fs-section:   22px;
  --fs-h3:        18px;
  --fs-body:      15px;
  --fs-body-lg:   16px;
  --fs-small:     13px;
  --fs-micro:     11px;
  --fs-eyebrow:   10px;

  --lh-tight:     1.05;
  --lh-heading:   1.2;
  --lh-body:      1.55;
  --lh-loose:     1.7;

  --ls-display:   -0.02em;
  --ls-tight:     -0.01em;
  --ls-body:      0.02em;
  --ls-caps:      0.14em;
  --ls-eyebrow:   0.28em;

  /* ---- Spacing rhythm (4px base) ---------------------------------------- */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;

  /* ---- Radii ------------------------------------------------------------ */
  --r-1:  2px;   /* buttons, inputs — deliberately restrained              */
  --r-2:  4px;   /* small chips, tags                                       */
  --r-3:  6px;   /* subtle cards                                            */
  --r-4:  8px;   /* panels, main cards                                      */
  --r-5:  10px;  /* modals, hero bands                                      */
  --r-pill: 20px;/* pill controls                                           */
  --r-round: 50%;

  /* ---- Elevation -------------------------------------------------------- */
  --sh-hover:  0 8px 22px rgba(30,30,30,.06);
  --sh-drawer: -10px 0 32px rgba(30,30,30,.14);
  --sh-toast:  0 6px 22px rgba(30,30,30,.16);
  --sh-focus:  0 0 0 3px rgba(169,124,69,.35);
  --shadow:    0 1px 3px rgba(30,30,30,.06);  /* legacy subtle lift */

  /* ---- Borders ---------------------------------------------------------- */
  --border-hairline: 1px solid var(--travertine);
  --border-quiet:    1px solid var(--wash-travertine);

  /* ---- Motion ----------------------------------------------------------- */
  --ease-out-expo:   cubic-bezier(.16, 1, .3, 1);
  --ease-out-quart:  cubic-bezier(.25, 1, .5, 1);
  --ease-standard:   cubic-bezier(.22, .61, .36, 1);

  --dur-micro:  120ms;
  --dur-quick:  180ms;
  --dur-base:   240ms;
  --dur-slow:   360ms;
  --dur-reveal: 560ms;

  /* ---- Layout constants ------------------------------------------------- */
  --content-max:   1200px;
  --workspace-max: 1200px;
  --rail-w:        220px;
  --topbar-h:      50px;
}

/* ==========================================================================
   Global elements
   Applied when this stylesheet is loaded early on a surface. Existing
   surface CSS remains sovereign — these are the tasteful baseline the
   rest builds on.
   ========================================================================== */
html { color-scheme: light; }
body {
  margin: 0;
  background: var(--limestone);
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body);
  font-feature-settings: "kern", "liga", "onum" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Italic bronze `em` is a brand signature. Preserve it wherever
   headings live inside the HQ / customer surfaces. */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  font-weight: 400;
  color: var(--olive);
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-heading);
}
h1 em, h2 em, h3 em { font-style: italic; color: var(--bronze); padding-right: .04em; }

/* Descender safety — load-bearing brand invariant. Every heading child that
   is `em` or `span` gets a floor of 0.14em under it so italic descenders
   (g, j, p, q, y) never clip against tight leading. Ported from
   artifact/JeyXV8dQAu42dJ41BFFke2. If you break this globally, sanity-check
   every hero — memory: feedback_descender_safety.md. */
h1 > em, h1 > span, h2 > em, h2 > span, h3 > em, h3 > span,
h4 > em, h4 > span, h5 > em, h5 > span, h6 > em, h6 > span {
  padding-bottom: 0.14em;
}

/* Italic serif numerics — the artifact's signature "reading" number style.
   Use anywhere a metric is meant to feel personal (earnings, streaks,
   duration, target vs actual) instead of the default `font-variant-numeric:
   tabular-nums` sans-serif. Sits alongside `.num` (which is bold + tabular). */
.num-italic {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.005em;
}

a { color: var(--bronze); text-decoration: none; }
a:hover { color: var(--olive); }

hr {
  border: 0; border-top: var(--border-hairline);
  margin: var(--sp-8) 0;
}

::selection { background: rgba(169,124,69,.20); color: var(--olive-deep); }

/* Focus visibility — non-negotiable. Use focus-visible to keep pointer
   users clean but keyboard/AT users protected. */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--bronze);
  outline-offset: 3px;
  border-radius: var(--r-1);
}

/* Skip link — invisible until tab-focused. Every surface with a rail or
   top-bar should include one at the top of body. */
.lb-skip {
  position: absolute;
  top: -100%; left: var(--sp-4);
  z-index: 500;
  padding: var(--sp-3) var(--sp-6);
  background: var(--olive);
  color: var(--shell-ink);
  font-family: var(--font-serif);
  font-size: var(--fs-small);
  text-decoration: none;
  border-radius: 0 0 var(--r-2) var(--r-2);
  transition: top var(--dur-quick) var(--ease-standard);
}
.lb-skip:focus, .lb-skip:focus-visible { top: 0; }

/* Reduced-motion — collapse decorative movement, preserve fades. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: var(--dur-micro) !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   Utility components — prefixed `.lb-`
   These are opt-in. Existing surface CSS is not touched.
   ========================================================================== */

/* Editorial eyebrow — the tiny caps that sit above titles */
.lb-eyebrow {
  font-family: var(--font-serif);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--bronze);
}

/* The ✦ ornament — brand signature grace note. Use once per page maximum. */
.lb-ornament {
  display: inline-block;
  color: var(--bronze);
  font-size: 14px;
  letter-spacing: .6em;
  padding-left: .6em;
  opacity: .9;
}

/* Card / panel */
.lb-card {
  background: var(--paper);
  border: var(--border-hairline);
  border-radius: var(--r-4);
  padding: var(--sp-6);
  transition: border-color var(--dur-base) var(--ease-standard),
              box-shadow  var(--dur-base) var(--ease-standard),
              transform   var(--dur-base) var(--ease-standard);
}
.lb-card:hover { border-color: var(--bronze); }
.lb-card--interactive:hover { transform: translateY(-2px); box-shadow: var(--sh-hover); }

/* Button — quiet, restrained, letter-spaced */
.lb-btn {
  font-family: var(--font-serif);
  font-size: 12px;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  padding: 10px 18px;
  border-radius: var(--r-1);
  border: 1px solid var(--olive);
  background: var(--olive);
  color: var(--shell-ink);
  cursor: pointer;
  transition: background var(--dur-quick) var(--ease-standard),
              border-color var(--dur-quick) var(--ease-standard),
              color        var(--dur-quick) var(--ease-standard),
              transform    var(--dur-micro) var(--ease-out-quart);
  min-height: 44px; /* tap target */
}
.lb-btn:hover  { background: var(--olive-deep); }
.lb-btn:active { transform: translateY(1px); }
.lb-btn--ghost { background: transparent; color: var(--olive); }
.lb-btn--ghost:hover { background: rgba(56,71,55,.06); }
.lb-btn--danger { border-color: var(--bad); background: var(--bad); }
.lb-btn--danger:hover { background: var(--bad-deep); }
.lb-btn:disabled { opacity: .5; cursor: not-allowed; }

/* Input primitives */
.lb-input, .lb-textarea, .lb-select {
  font-family: var(--font-serif);
  font-size: var(--fs-body-lg);
  color: var(--olive);
  background: var(--limestone);
  border: 1px solid var(--travertine);
  border-radius: var(--r-2);
  padding: 10px 12px;
  width: 100%;
  outline: none;
  transition: border-color var(--dur-quick) var(--ease-standard),
              box-shadow   var(--dur-quick) var(--ease-standard);
  box-sizing: border-box;
  min-height: 44px;
}
.lb-input:focus, .lb-textarea:focus, .lb-select:focus {
  border-color: var(--bronze);
  box-shadow: var(--sh-focus);
}
.lb-textarea { resize: vertical; min-height: 84px; }

.lb-label {
  display: block;
  font-family: var(--font-serif);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}

/* Reveal — a soft rise-in used on cards or hero blocks. Add
   .lb-reveal to trigger; JS may add .lb-in when the element is
   visible, but this class also self-reveals on load via the
   `lb-in` selector automatically once the DOM is ready. */
.lb-reveal {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--dur-reveal) var(--ease-out-expo),
              transform var(--dur-reveal) var(--ease-out-expo);
}
.lb-in, .lb-reveal.lb-in { opacity: 1; transform: none; }

/* Tabular numerals utility */
.lb-nums { font-variant-numeric: tabular-nums; }

/* Icon-only button — square, no label */
.lb-btn--icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  width: 36px; height: 36px;
  min-height: 36px;
  background: transparent;
  border: none;
  color: var(--muted);
  cursor: pointer;
  border-radius: var(--r-1);
  transition: color var(--dur-quick) var(--ease-standard),
              background var(--dur-quick) var(--ease-standard);
  font-size: 18px;
  line-height: 1;
}
.lb-btn--icon:hover { color: var(--bronze); background: var(--wash-bronze); }

/* Table */
.lb-tbl { width: 100%; border-collapse: collapse; }
.lb-tbl th {
  font-family: var(--font-system);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
  text-align: left;
  padding: 8px 10px;
  border-bottom: var(--border-hairline);
}
.lb-tbl td {
  font-family: var(--font-serif);
  font-size: var(--fs-small);
  color: var(--olive);
  padding: 10px;
  border-bottom: 1px dotted var(--travertine);
  vertical-align: top;
}
.lb-tbl tr:last-child td { border-bottom: none; }
.lb-tbl tr:hover td { background: var(--wash-bronze); }

/* Tabs */
.lb-tabs {
  display: flex;
  gap: 0;
  border-bottom: var(--border-hairline);
  margin-bottom: var(--sp-6);
}
.lb-tab {
  font-family: var(--font-serif);
  font-size: var(--fs-small);
  color: var(--muted);
  background: transparent;
  border: none;
  padding: 10px 16px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color var(--dur-quick) var(--ease-standard),
              border-color var(--dur-quick) var(--ease-standard);
  letter-spacing: var(--ls-body);
}
.lb-tab:hover { color: var(--olive); }
.lb-tab.active, .lb-tab[aria-selected="true"] {
  color: var(--olive);
  border-bottom-color: var(--bronze);
}

/* State indicators */
.lb-loading {
  text-align: center;
  padding: var(--sp-10) var(--sp-6);
  font-family: var(--font-serif);
  font-size: var(--fs-body);
  font-style: italic;
  color: var(--muted);
  animation: lb-pulse 1.8s ease-in-out infinite;
}
@keyframes lb-pulse { 50% { opacity: .5; } }

.lb-empty {
  text-align: center;
  padding: var(--sp-10) var(--sp-6);
  font-family: var(--font-serif);
  font-size: var(--fs-body);
  font-style: italic;
  color: var(--muted);
}

.lb-error {
  padding: var(--sp-4) var(--sp-5);
  background: rgba(139,58,58,.06);
  border: 1px solid var(--bad);
  border-left: 3px solid var(--bad);
  border-radius: var(--r-2);
  font-family: var(--font-serif);
  font-size: var(--fs-small);
  color: var(--bad);
  font-style: italic;
}

.lb-denied {
  text-align: center;
  padding: var(--sp-12) var(--sp-6);
  font-family: var(--font-serif);
  font-size: var(--fs-body);
  color: var(--muted);
  font-style: italic;
}
.lb-denied::before {
  content: "⊘";
  display: block;
  font-size: 28px;
  color: var(--travertine);
  margin-bottom: var(--sp-4);
  font-style: normal;
}