/* =========================================================
   Reinvent CoWork · Goaly design system (ledger look, moss theme)
   Single source of truth for color, radius, shadow and shared
   interaction polish. Linked LAST in every page's <head>, so it
   wins over the older inline hex snapshots.

   Rule: set a base token once, derive every soft/border/tint
   variant from it with color-mix(). That is what stops dark mode
   (or anything else) drifting to a mismatched accent again.

   Deliberate divergence from the Reinvent app: Reinvent's
   Nocturne uses a warm amber accent. CoWork's dark mode stays
   moss green. Do not "fix" this back to amber.
   ========================================================= */

/* ---------- Semantic tokens (theme-agnostic bases) ---------- */
:root {
  --gain: oklch(0.564 0.127 152);
  --risk: oklch(0.595 0.147 44);
  --live: oklch(0.627 0.159 44);
  --ease: cubic-bezier(.2,.7,.3,1);
}

/* ---------- Ledger look (authoritative, from Reinvent app) ---------- */
[data-look="ledger"] {
  --canvas: oklch(0.966 0.004 85);    --surface: oklch(0.995 0.002 85);
  --surface-2: oklch(0.951 0.006 85); --surface-3: oklch(0.918 0.008 83);
  --ink: oklch(0.205 0.012 58);       --ink-2: oklch(0.36 0.012 55);
  --ink-soft: oklch(0.52 0.012 55);   --ink-faint: oklch(0.66 0.010 55);
  --rule: oklch(0.89 0.006 85);       --rule-soft: oklch(0.93 0.005 85);
  --r-sm: 10px; --r: 14px; --r-lg: 22px; --r-xl: 28px; --r-pill: 999px;
  --shadow: 0 1px 2px rgba(20,20,20,.04), 0 16px 36px -28px rgba(20,20,20,.16);
  --shadow-lg: 0 2px 6px rgba(20,20,20,.05), 0 32px 64px -32px rgba(20,20,20,.20);
  --card-border: 1px solid var(--rule);
}

/* ---------- Moss theme (CoWork accent, light) ---------- */
/* :root too, so an unknown saved theme value still gets moss */
:root, [data-theme="moss"] {
  --accent: oklch(0.52 0.105 152);      --accent-deep: oklch(0.40 0.085 152);
  --accent-soft: oklch(0.93 0.045 150); --accent-ink: oklch(0.38 0.085 152);
  --on-accent: oklch(0.985 0.01 150);
}

/* ---------- Nocturne (dark) · base surfaces from Reinvent, moss accent kept ---------- */
[data-theme="nocturne"] {
  --canvas: oklch(0.185 0.012 58);    --surface: oklch(0.224 0.014 58);
  --surface-2: oklch(0.262 0.016 56); --surface-3: oklch(0.305 0.018 54);
  --ink: oklch(0.952 0.012 84);       --ink-2: oklch(0.82 0.012 80);
  --ink-soft: oklch(0.63 0.012 74);   --ink-faint: oklch(0.50 0.012 70);
  --rule: oklch(0.34 0.016 54);       --rule-soft: oklch(0.285 0.016 54);
  --shadow: 0 1px 0 rgba(0,0,0,.3), 0 22px 56px -38px rgba(0,0,0,.7);
  --shadow-lg: 0 1px 0 rgba(0,0,0,.4), 0 44px 90px -44px rgba(0,0,0,.8);

  /* Moss green, lifted for dark surfaces (was #3ea968 / #4dc47f / #6fcf97). */
  --accent: oklch(0.66 0.135 153);
  --accent-deep: oklch(0.74 0.140 155);
  --accent-ink: oklch(0.80 0.115 156);
  --accent-soft: color-mix(in oklab, var(--accent) 18%, var(--surface));
  --on-accent: oklch(0.22 0.040 158);

  --gain: oklch(0.70 0.140 152);
  --risk: oklch(0.66 0.150 45);
  --live: oklch(0.68 0.155 45);
}

/* ---------- Derived tokens · always follow the active accent ---------- */
:root, [data-theme] {
  --gain-soft: color-mix(in oklab, var(--gain) 16%, var(--surface));
  --risk-soft: color-mix(in oklab, var(--risk) 16%, var(--surface));
  --accent-line: color-mix(in oklab, var(--accent), transparent 65%);
  --accent-tint: color-mix(in oklab, var(--accent), transparent 91%);
  --focus-ring: 2px solid var(--accent);
}

/* ---------- Ambient accent glow behind the page ---------- */
body {
  background:
    radial-gradient(ellipse 900px 500px at 50% -8%, color-mix(in oklab, var(--accent), transparent 91%), transparent 68%),
    var(--canvas);
  background-attachment: fixed;
}

/* ---------- Keyboard focus rings ---------- */
:where(a, button, input, select, textarea, summary, [tabindex], [role="button"]):focus-visible {
  outline: var(--focus-ring);
  outline-offset: 2px;
}
.input:focus-visible, .textarea:focus-visible, .select:focus-visible { outline: none; }

/* ---------- Clickable card lift ---------- */
.hoverable {
  transition: transform .16s var(--ease), box-shadow .18s, border-color .18s;
  cursor: pointer;
}
.hoverable:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
  border-color: color-mix(in oklab, var(--accent), transparent 70%);
}
.hoverable:active { transform: translateY(0) scale(.99); box-shadow: var(--shadow); }
.session-ticket.past { cursor: default; }
.session-ticket.past:hover, .session-ticket.past:active { transform: none; box-shadow: var(--shadow); border-color: var(--rule); }
.session-ticket.live { border-color: var(--accent-line); }

/* ---------- Live chip · real pulse ---------- */
.chip-live {
  background: color-mix(in oklab, var(--live), transparent 86%);
  border-color: color-mix(in oklab, var(--live), transparent 62%);
  color: var(--live);
}
.chip-live .dot {
  position: relative;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--live);
  animation: none;
}
.chip-live .dot::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: var(--live);
  animation: livepulse 1.6s cubic-bezier(.2,.7,.3,1) infinite;
}
@keyframes livepulse {
  0%   { transform: scale(1);   opacity: .7; }
  80%, 100% { transform: scale(2.8); opacity: 0; }
}

/* ---------- Presence dot · breathing ring ---------- */
.pulse {
  position: relative; display: inline-block;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent);
}
.pulse::after {
  content: ""; position: absolute; inset: -3px; border-radius: 50%;
  border: 1.5px solid var(--accent);
  animation: presence 2.2s ease-out infinite;
}
@keyframes presence {
  0%   { transform: scale(.7); opacity: .9; }
  100% { transform: scale(1.9); opacity: 0; }
}

/* ---------- Chips and avatars derive from tokens ---------- */
.chip-accent { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent-ink); }
.av.accent   { border-color: color-mix(in oklab, var(--accent), transparent 72%); }
.input:focus, .textarea:focus, .select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent), transparent 80%);
}

/* ---------- Floating pill tab bar (mobile) ---------- */
@media (max-width: 900px) {
  .tabbar {
    display: flex !important;
    position: fixed; z-index: 80;
    left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom));
    padding: 6px;
    gap: 2px;
    justify-content: space-between;
    background: color-mix(in oklab, var(--surface), transparent 8%);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
    backdrop-filter: blur(20px) saturate(1.4);
    border: 1px solid var(--rule);
    border-top: 1px solid var(--rule);
    border-radius: var(--r-pill);
    box-shadow: var(--shadow-lg);
  }
  .tab {
    position: relative; isolation: isolate;
    flex: 1 1 0; min-width: 0;
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 8px 2px;
    border: 0; border-radius: var(--r-pill);
    background: transparent !important;
    color: var(--ink-faint);
    font-size: 10px; font-weight: 600; letter-spacing: .01em;
    white-space: nowrap;
    transition: color .15s;
  }
  .tab svg { width: 20px; height: 20px; }
  .tab:hover { color: var(--ink-2); }
  /* Fixed-size highlight pill, independent of label length */
  .tab::before {
    content: ""; position: absolute; z-index: -1;
    top: 50%; left: 50%;
    width: 60px; height: 46px;
    transform: translate(-50%, -50%) scale(.85);
    border-radius: var(--r-pill);
    background: var(--accent-soft);
    opacity: 0;
    transition: opacity .18s, transform .22s var(--ease);
  }
  .tab.on { color: var(--accent-ink); }
  .tab.on::before { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  .page, .cowork-main { padding-bottom: calc(96px + env(safe-area-inset-bottom)) !important; }
}
@media (min-width: 901px) {
  .tabbar { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .chip-live .dot::after, .pulse::after { animation: none; }
  .hoverable:hover, .hoverable:active { transform: none; }
}