/* ══════════════════════════════════════════════
   StaxBox design tokens — the single source of truth for the ink/gold
   system. New code MUST use these variables; legacy inline styles are
   migrated in phase U1. (Build-spec addendum #1.)
   ══════════════════════════════════════════════ */
:root {
  /* Palette */
  --stax-gold: #c8a44a;
  --stax-gold-text: #e5c66f;
  --stax-on-gold: #0c0c0e;
  /* Ink on any surface accent (the identity colours are pale in the dark theme). */
  --stax-on-accent: #0c0c0e;
  --stax-gold-soft: rgba(200, 164, 74, 0.15);
  --stax-gold-border: rgba(200, 164, 74, 0.4);
  --stax-ink: #0c0c0e;
  --stax-surface: #121214;
  --stax-surface-2: #18181b;
  --stax-surface-3: #1a1a1d;
  --stax-border: #2a2a2e;
  --stax-border-soft: #242428;
  --stax-text: #e8e4dc;
  /* Secondary text stays readable on every dark surface (>= 4.5:1 on
     #1a1a1d): dim 6.2:1, faint 5.4:1. The hierarchy is in the size and
     weight the components already use, not in pushing faint below AA. */
  --stax-text-dim: #9a9aa0;
  --stax-text-faint: #8f8f96;
  --stax-danger: #ff8179;
  --stax-on-danger: #0c0c0e;
  --stax-danger-soft: rgba(229, 57, 53, 0.12);
  --stax-ok: #73d391;

  /* Semantic surfaces */
  --stax-canvas: var(--stax-ink);
  /* Referenced and never defined (app-shell.css, home.css): aliases, not new colours. */
  --stax-bg: var(--stax-canvas);
  --stax-text-2: var(--stax-text-dim);
  --stax-rail: #141416;
  --stax-sheet: #171719;
  --stax-overlay: rgba(0, 0, 0, 0.56);
  --stax-focus: #f0c85a;

  /* Spacing */
  --stax-space-1: 4px;
  --stax-space-2: 8px;
  --stax-space-3: 12px;
  --stax-space-4: 16px;
  --stax-space-5: 20px;
  --stax-space-6: 24px;
  --stax-space-8: 32px;
  --stax-space-10: 40px;

  /* Shape. Beta 1: one medium scale; the default radius is medium.
     --stax-radius-md was referenced (home.css) and defined nowhere. */
  --stax-radius-sm: 6px;
  --stax-radius-md: 10px;
  --stax-radius: var(--stax-radius-md);
  --stax-radius-lg: 14px;
  --stax-radius-pill: 999px;

  /* Shell geometry. 64rem is the only responsive AppRail breakpoint. */
  --bp-app-rail: 64rem;
  --app-target: 44px;
  --app-rail-row: 56px;
  --app-rail-column: 76px;
  --app-header-row: 52px;
  --app-safe-bottom: env(safe-area-inset-bottom, 0px);
  --app-rail-safe-pad: calc(var(--app-safe-bottom) + var(--stax-space-2));
  --app-rail-outer: calc(var(--app-rail-row) + var(--app-rail-safe-pad));
  --app-canvas-bottom-reserve: calc(var(--app-rail-outer) + var(--stax-space-4));
  --app-list-min: 300px;
  --app-detail-min: 620px;

  /* Elevation and layers */
  /* One elevation scale. `sm` and `lg` were referenced by stylesheets and
     defined nowhere, so those surfaces painted with no shadow at all — the
     composer menu looked like it was opening *behind* the conversation. */
  --stax-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.28);
  --stax-shadow-sheet: 0 -16px 48px rgba(0, 0, 0, 0.45);
  --stax-shadow-float: 0 10px 30px rgba(0, 0, 0, 0.34);
  --stax-shadow-lg: 0 18px 44px rgba(0, 0, 0, 0.42);
  --z-app-rail: 40;
  --z-app-sheet-backdrop: 60;
  --z-app-sheet: 61;
  --z-app-toast: 80;

  /* Type scale */
  --stax-fs-xs: 10px;
  --stax-fs-sm: 12px;
  --stax-fs-base: 13px;
  --stax-fs-md: 14px;
  --stax-fs-lg: 15px;
  --stax-fs-title: 17px;
  --stax-fs-xl: 22px;

  /* Status. Beta 1: warning is its own amber, never the brand gold, and the
     light values live with the other light tokens below (one owner). */
  --stax-success: var(--stax-ok);
  --stax-warning: #e3a857;

  /* Touch */
  --stax-touch: var(--app-target); /* minimum touch target */
}

:focus-visible {
  outline: 2px solid var(--stax-focus);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Shared primitives new views build on */
.stax-btn {
  min-height: var(--stax-touch);
  padding: 0 16px;
  border: none;
  border-radius: var(--stax-radius);
  background: var(--stax-gold);
  color: var(--stax-on-gold);
  font-family: inherit;
  font-size: var(--stax-fs-sm);
  font-weight: 700;
  cursor: pointer;
}

.stax-btn--ghost {
  background: var(--stax-surface-2);
  color: var(--stax-gold-text);
  border: 1px solid var(--stax-border);
}

.stax-btn--danger {
  background: var(--stax-danger-soft);
  color: var(--stax-danger);
  border: 1px solid var(--stax-danger);
}

.stax-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--stax-radius-pill);
  border: 1px solid var(--stax-border);
  background: var(--stax-surface-2);
  color: var(--stax-text);
  font-size: var(--stax-fs-xs);
  font-weight: 600;
}

.stax-chip--gold {
  border-color: var(--stax-gold-border);
  color: var(--stax-gold-text);
  background: var(--stax-gold-soft);
}

.stax-chip--danger {
  border-color: color-mix(in srgb, var(--stax-danger) 52%, transparent);
  color: var(--stax-danger);
  background: var(--stax-danger-soft);
}

.stax-chip--ok {
  border-color: color-mix(in srgb, var(--stax-ok) 52%, transparent);
  color: var(--stax-ok);
  background: color-mix(in srgb, var(--stax-ok) 12%, transparent);
}

/* Pending / draft treatment — addendum #3: drafts are unmistakable */
.stax-pending {
  border: 1px dashed var(--stax-gold) !important;
  background: transparent !important;
  position: relative;
}

.stax-pending::before {
  content: 'Not sent yet';
  display: block;
  font-size: var(--stax-fs-xs);
  font-weight: 700;
  color: var(--stax-gold);
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Empty state — addendum #5: teach + one action */
.stax-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 40px 24px;
  text-align: center;
  color: var(--stax-text-dim);
  font-size: var(--stax-fs-base);
  line-height: 1.6;
}

.stax-empty svg { opacity: 0.3; }
.stax-empty b { color: var(--stax-text); }

/* Quiet identity accents. Status colors remain independent. */
:root {
  --stax-identity-gold: #c8a44a;
  --stax-identity-blue: #86acd1;
  --stax-identity-sage: #91b39b;
  --stax-identity-slate: #a4adbc;
  --stax-identity-amber: #c4a579;
  --stax-identity-violet: #b2a1cc;
  --stax-identity-rose: #c99cab;
  /* Beta 1: Stax's own identity. Gold is no longer the global identity; it
     stays only in customer-facing content (booking page and site accents). */
  --stax-identity-stax: #5cbcae;
  --app-accent: var(--stax-identity-stax);
  /* Semantic roles: the five durable-work states and selection. */
  --stax-working: var(--stax-identity-blue);
  --stax-paused: var(--stax-text-dim);
  --stax-selected: var(--app-accent-soft);
  /* Section identity (architecture lock): Stax teal, Work ochre/amber,
     Channels blue, Studio plum/rose, Tools slate. Colour is only a secondary
     cue - every selection also has an icon, text and a weight or edge - and
     warning/success/error never take a section colour. */
  --stax-accent-stax: var(--stax-identity-stax);
  --stax-accent-channels: var(--stax-identity-blue);
  --stax-accent-work: var(--stax-identity-amber);
  --stax-accent-studio: var(--stax-identity-rose);
  --stax-accent-tools: var(--stax-identity-slate);
  --stax-accent-system: var(--stax-accent-tools);
  /* The global emphasis family follows Stax's identity; inside an app it is
     remapped to that app's accent below. */
  --stax-gold: var(--stax-identity-stax);
  --stax-gold-text: var(--stax-identity-stax);
  --stax-gold-soft: color-mix(in srgb, var(--stax-identity-stax) 15%, transparent);
  --stax-gold-border: color-mix(in srgb, var(--stax-identity-stax) 40%, transparent);
  --stax-on-gold: var(--stax-on-accent);
  --stax-focus: var(--stax-identity-stax);
  /* The brand mark's own gold, for the few places that name the brand. */
  --stax-brand-gold: #c8a44a;
  --app-accent-soft: color-mix(in srgb, var(--app-accent) 12%, transparent);
  --app-accent-border: color-mix(in srgb, var(--app-accent) 40%, transparent);
}
:root[data-theme="light"] {
  --stax-identity-gold: #80601c;
  --stax-identity-blue: #3f6486;
  --stax-identity-sage: #466e52;
  --stax-identity-slate: #576373;
  --stax-identity-amber: #805d2c;
  --stax-identity-violet: #6b5686;
  --stax-identity-rose: #885264;
  --stax-identity-stax: #146e68;
  /* Semantic text keeps AA contrast on the light chip surfaces. One owner for
     the light status values (theme.css no longer repeats them). */
  --stax-danger: #9f2520;
  --stax-on-danger: #ffffff;
  --stax-ok: #226d3c;
  --stax-success: #226d3c;
  --stax-warning: #8a5410;
  /* The light identity colours are deep; white reads on all of them, and the
     focus ring must clear 3:1 on paper, which the dark theme's pale gold does not. */
  --stax-on-accent: #ffffff;
  /* Elevation. The dark values are 34%/45% black, which on a near-white
     surface reads as a grey smear rather than a lift. Light mode wants a
     shallower, warmer shadow tinted with the ink colour. */
  --stax-shadow-sm: 0 2px 8px rgba(27, 26, 23, 0.07);
  --stax-shadow-float: 0 10px 30px rgba(27, 26, 23, 0.10);
  --stax-shadow-sheet: 0 -16px 48px rgba(27, 26, 23, 0.14);
  --stax-shadow-lg: 0 18px 44px rgba(27, 26, 23, 0.13);
  /* A red tint mixed for a dark backdrop; on white it needs less alpha. */
  --stax-danger-soft: rgba(159, 37, 32, 0.10);
}

/* The accent is set per surface (on body for the active app, inline on launcher
   entries). Its derived tokens are computed where it is set; defined only on
   :root they would keep the root's gold whatever the surface. */
body,
[style*="--app-accent"],
#tx-app-content {
  --app-accent-soft: color-mix(in srgb, var(--app-accent) 12%, transparent);
  --app-accent-border: color-mix(in srgb, var(--app-accent) 40%, transparent);
}

/* Inside an app, that app's accent takes the place of the OS-wide emphasis
   (Stax's identity) for emphasis, outlines and focus. */
#tx-shell:not([data-active-app="home"]) #tx-app-content {
  --stax-gold: var(--app-accent);
  --stax-gold-text: var(--app-accent);
  --stax-gold-soft: var(--app-accent-soft);
  --stax-gold-border: var(--app-accent-border);
  --stax-on-gold: var(--stax-on-accent);
  --stax-focus: var(--app-accent);
  /* The older shared controls (.btn-primary, active sidebar rows, badges)
     read the --os-accent family; inside an app it is the surface accent too,
     so a Settings or Forms primary button is not the OS gold. */
  --os-accent: var(--app-accent);
  --os-accent-hover: color-mix(in srgb, var(--app-accent) 86%, #000);
  --os-accent-glow: var(--app-accent-soft);
  --os-accent-bg: color-mix(in srgb, var(--app-accent) 8%, transparent);
  --os-border-accent: var(--app-accent);
  --os-text-inverse: var(--stax-on-accent);
}

/* One way to open, browse or preview a record: an outlined control in the
   surface's accent, 44px, named by what it opens. The id prefix outranks an
   app's own single-class rule for the same control. */
#tx-app-content .stax-btn--open,
.stax-btn--open {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: var(--stax-touch);
  padding: 0 14px;
  border: 1px solid var(--app-accent-border);
  border-radius: var(--stax-radius);
  background: var(--app-accent-soft);
  color: var(--app-accent);
  font: inherit;
  font-size: var(--stax-fs-sm);
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
}
#tx-app-content .stax-btn--open:hover,
#tx-app-content .stax-btn--open:focus-visible,
.stax-btn--open:hover,
.stax-btn--open:focus-visible {
  border-color: var(--app-accent);
}
#tx-app-content .stax-btn--open[disabled],
.stax-btn--open[disabled] {
  opacity: 0.55;
  cursor: default;
}