/* ============================================================
   Coop Design System
   ------------------------------------------------------------
   Single source of truth for color, type, spacing, and component
   tokens across the marketing site, dashboard, and session pages.

   Mount points:
     • Layout.astro  — <style> block (move tokens out of here)
     • index.astro   — home page, previously inlined everything
     • dashboard.astro
     • dashboard/sessions/[name].astro

   Usage:
     Import once from Layout.astro:
       <link rel="stylesheet" href="/styles/coop-ds.css" />
     Or inline the :root block and keep the rest of this file
     imported as a stylesheet.

   Every value below is tokenized. Raw hexes, magic numbers, or
   px values in page styles are drift and should be replaced.
   ============================================================ */

:root {
  /* ─── Surfaces (dark only; light theme TBD) ──────────── */
  --bg:           #0f0f0f;
  --surface:      #1a1a1a;   /* cards, team-group shell */
  --surface-2:    #111;      /* mini-term body, inputs, code wrap */
  --surface-3:    #0a0a0a;   /* code block inside mini-term */

  --border:       #2a2a2a;   /* default hairlines */
  --border-soft:  #222;      /* code block borders */

  /* ─── Text ────────────────────────────────────────── */
  --text:    #e8e8e8;        /* primary body */
  --text-2:  #bbb;           /* feature body copy */
  --text-3:  #ccc;           /* code text inside terminals */
  --muted:   #888;           /* labels, timestamps, captions */

  /* ─── Accent ─────────────────────────────────────── */
  --accent:       #e8925b;
  --accent-hover: #f0a873;
  --accent-15:    rgba(232, 146, 91, 0.15);
  --accent-30:    rgba(232, 146, 91, 0.30);

  /* ─── Semantic / signal ──────────────────────────── */
  --ok:       #28c840;      /* success, "delivered", online dot */
  --warn:     #febc2e;      /* pending, indexing */
  --err:      #ff5f57;      /* error dot (terminal-style) */
  --danger:   #ef4444;      /* destructive button fill */
  --presence:            #6bff6b;
  --presence-connecting: #e8c75b;

  /* ─── Notification tones (warm amber) ─────────────── */
  --notif-bg:     #1f1710;
  --notif-border: #3d2e1c;

  /* ─── Code-wrap backgrounds (command blocks) ──────── */
  --code-wrap-1: rgba(0, 0, 0, 0.2);
  --code-wrap-2: rgba(0, 0, 0, 0.3);

  /* ─── Radii ───────────────────────────────────────── */
  --r-xs:  2px;
  --r-sm:  3px;
  --r-md:  4px;       /* buttons */
  --r-lg:  6px;       /* inputs, command blocks */
  --r-xl:  0.4rem;    /* cards, mini terminals */
  --r-2xl: 0.5rem;    /* session console, modals */

  /* ─── Spacing rhythm (4/8 base) ───────────────────── */
  --s-1:  0.25rem;
  --s-2:  0.5rem;
  --s-3:  0.75rem;
  --s-4:  1rem;
  --s-5:  1.25rem;
  --s-6:  1.5rem;
  --s-8:  2rem;
  --s-12: 3rem;

  /* ─── Type scale ──────────────────────────────────── */
  /* Use these. Off-scale values (0.525, 0.55, 0.6875, 0.825, etc.) are drift. */
  --t-tiny:    0.575rem;   /* legend, mini titles */
  --t-micro:   0.625rem;   /* terminal lines, dense tables */
  --t-label:   0.75rem;    /* uppercase labels, chips */
  --t-body:    0.8125rem;  /* paragraph body inside features */
  --t-ui:      0.875rem;   /* standard UI text, nav, buttons */
  --t-lead:    1rem;       /* modal titles, hero subtext */
  --t-h3:      1.25rem;    /* section h2 */
  --t-h2:      1.5rem;
  --t-h1:      1.75rem;    /* page h1 */
  --t-display: 3rem;       /* hero */

  /* ─── Fonts ───────────────────────────────────────── */
  --ff-mono: 'SF Mono', 'Fira Code', 'Cascadia Code',
             ui-monospace, Menlo, Consolas, monospace;

  /* ─── Motion ──────────────────────────────────────── */
  --m-fast:   0.15s;
  --m-normal: 0.3s;
  --ease:     cubic-bezier(0.4, 0, 0.2, 1);

  font-family: var(--ff-mono);
}

/* ============================================================
   Reset + globals
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
}
body { display: flex; flex-direction: column; }
a { color: inherit; text-decoration: none; }
code { font-family: inherit; }

@media (prefers-reduced-motion: reduce) {
  /* Global motion fallback. Keeps mini-terms legible when
     animations are off (Safari pauses opacity keyframes). */
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .ml, .dot-anim, .fan-dot, .pipe-dot-1, .pipe-dot-2,
  .beam-packet, .pulse { opacity: 1 !important; }
}

/* ============================================================
   Page chrome — nav, main, footer
   ============================================================ */
.app-nav {
  border-bottom: 1px solid var(--border);
  padding: 0 var(--s-8);
  height: 3rem;
  display: flex;
  align-items: center;
  gap: var(--s-8);
}
.app-nav a       { color: var(--text); font-size: var(--t-ui); }
.app-nav a:hover { color: var(--accent-hover); }
.app-nav .logo   { font-weight: 700; color: var(--accent); margin-right: auto; }

main {
  flex: 1;
  padding: var(--s-8);
  max-width: 60rem;
  margin: 0 auto;
  width: 100%;
}

footer {
  border-top: 1px solid var(--border);
  padding: var(--s-4) var(--s-8);
  text-align: center;
  color: var(--muted);
  font-size: var(--t-label);
}

/* ============================================================
   Layout primitives
   ============================================================ */
.page-stack {
  display: flex;
  flex-direction: column;
  gap: var(--s-8);
  padding-top: var(--s-8);
}

.page-header {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.page-header h1 {
  font-size: var(--t-h1);
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.01em;
}
.page-header .page-meta {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
  font-size: var(--t-label);
  color: var(--muted);
}
.page-header .page-meta a { color: var(--accent); }

.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--t-ui);
  color: var(--muted);
}
.breadcrumb a { color: var(--accent); }
.breadcrumb a:hover { color: var(--accent-hover); }
.breadcrumb .sep { color: var(--border); }

/* ============================================================
   Card / section
   ============================================================ */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-2xl);
  padding: var(--s-6);
}
.card-title {
  font-size: var(--t-ui);
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--s-4);
}
.callout {
  /* Generic informational card — quiet surface, small padding */
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-2xl);
  padding: var(--s-4);
  font-size: var(--t-ui);
  color: var(--muted);
}
.callout strong { color: var(--text); }

.muted-text {
  font-size: var(--t-ui);
  color: var(--muted);
  font-style: italic;
}

/* ============================================================
   Buttons
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-4);
  border: 1px solid transparent;
  border-radius: var(--r-md);
  font-family: inherit;
  font-size: var(--t-ui);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--m-fast), border-color var(--m-fast), color var(--m-fast);
}

.btn-primary {
  background: var(--accent);
  color: var(--bg);             /* ~6.2:1 — not #fff */
}
.btn-primary:hover { background: var(--accent-hover); }

.btn-secondary {
  background: transparent;
  color: var(--muted);
  border-color: var(--border);
}
.btn-secondary:hover { border-color: var(--muted); color: var(--text); }

.btn-ghost {
  background: var(--surface);
  color: var(--accent);
  border-color: var(--border);
  font-size: var(--t-label);
  padding: var(--s-1) var(--s-3);
}
.btn-ghost:hover:not(:disabled) { border-color: var(--accent); color: var(--accent-hover); }
.btn-ghost:disabled { opacity: 0.4; cursor: not-allowed; }

.btn-danger {
  background: var(--danger);
  color: var(--bg);             /* not #fff */
}
.btn-danger:hover { filter: brightness(1.1); }

.btn-icon {
  background: transparent;
  border: none;
  color: var(--muted);
  padding: var(--s-1) var(--s-2);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: color var(--m-fast), background var(--m-fast);
}
.btn-icon:hover { color: var(--danger); background: rgba(239, 68, 68, 0.1); }

/* The "Sign in" button with a chicken icon — name kept for migration */
.coop-sign-in {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  padding: var(--s-1) var(--s-3);
  border-radius: var(--r-md);
  font-size: var(--t-ui);
  cursor: pointer;
  transition: border-color var(--m-fast), color var(--m-fast);
}
.coop-sign-in:hover { border-color: var(--accent); color: var(--accent-hover); }
.coop-sign-in img   { image-rendering: pixelated; }

/* ============================================================
   Forms
   ============================================================ */
.field {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}
.field-label {
  font-size: var(--t-ui);
  font-weight: 600;
  color: var(--text);
}
.field-label .optional { font-weight: 400; color: var(--muted); }

.field-input {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--s-2) var(--s-3);
  font-family: inherit;
  font-size: var(--t-ui);
  color: var(--text);
}
.field-input:focus { outline: none; border-color: var(--accent); }
.field-input.is-valid   { border-color: var(--ok); }
.field-input.is-invalid { border-color: var(--danger); }

.field-hint         { font-size: var(--t-label); color: var(--muted); }
.field-hint.is-error { color: var(--danger); }
.field-hint.is-ok    { color: var(--ok); }

/* ============================================================
   Tags — function-specific, NOT a general "tag" grab-bag
   ============================================================ */
.tag-role {
  /* Role on a membership (owner, member) — outlined */
  font-size: var(--t-tiny);
  padding: 0 var(--s-2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 1.4rem;
}
.tag-jurisdiction {
  /* Geographic / regulatory chip — accent filled */
  font-size: var(--t-tiny);
  padding: 0 var(--s-2);
  background: var(--accent-15);
  border: 1px solid var(--accent-30);
  border-radius: var(--r-sm);
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 1.4rem;
}
.tag-status {
  font-size: var(--t-tiny);
  padding: 0 var(--s-2);
  border-radius: var(--r-sm);
  line-height: 1.4rem;
  font-weight: 600;
}
.tag-status.ok   { color: var(--ok);     background: rgba(40, 200, 64, 0.1); }
.tag-status.warn { color: var(--warn);   background: rgba(254, 188, 46, 0.1); }
.tag-status.err  { color: var(--danger); background: rgba(239, 68, 68, 0.1); }

/* ============================================================
   Modal
   ============================================================ */
.modal {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-2xl);
  padding: var(--s-6);
  color: var(--text);
  max-width: 28rem;
  width: 90vw;
}
.modal::backdrop { background: rgba(0, 0, 0, 0.6); }
.modal-title {
  font-size: var(--t-lead);
  font-weight: 700;
  margin-bottom: var(--s-4);
}
.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--s-2);
  margin-top: var(--s-2);
}

/* ============================================================
   Form message (success / error banners)
   ============================================================ */
.form-msg {
  font-size: var(--t-ui);
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-md);
  border: 1px solid transparent;
}
.form-msg.success { color: var(--ok);     background: rgba(40, 200, 64, 0.1);  border-color: rgba(40, 200, 64, 0.2); }
.form-msg.error   { color: var(--danger); background: rgba(239, 68, 68, 0.1);  border-color: rgba(239, 68, 68, 0.2); }

/* ============================================================
   Presence dot
   ============================================================ */
.presence-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  display: inline-block;
  background: var(--border);
}
.presence-dot.online     { background: var(--presence); }
.presence-dot.connecting { background: var(--presence-connecting); }
.presence-dot.offline    { background: var(--border); }

/* ============================================================
   Mini terminal (marketing graphic — home page)
   ============================================================ */
.mini-term {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  overflow: hidden;
}
.mini-bar {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-1) var(--s-3);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.mini-dots { display: flex; gap: 0.2rem; }
.mini-dots i {
  width: 0.35rem; height: 0.35rem;
  border-radius: 50%;
  display: block;
}
.mini-dots i:nth-child(1) { background: var(--err); }
.mini-dots i:nth-child(2) { background: var(--warn); }
.mini-dots i:nth-child(3) { background: var(--ok); }
.mini-title { font-size: var(--t-tiny); color: var(--muted); }

.mini-body {
  padding: var(--s-3);
  font-size: var(--t-micro);
  line-height: 1.6;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.pr   { color: var(--accent); font-weight: 700; }
.cl   { color: var(--accent); font-weight: 700; font-size: var(--t-tiny); text-transform: uppercase; letter-spacing: 0.04em; }
.cmd  { color: var(--ok); font-weight: 700; }
.sys  { color: var(--accent); font-style: italic; font-size: var(--t-tiny); }

.code-block {
  display: block;
  background: var(--surface-3);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-sm);
  padding: var(--s-1) var(--s-2);
  font-size: var(--t-tiny);
  color: var(--text-3);
  line-height: 1.5;
  white-space: pre;
  font-family: inherit;
}

/* ============================================================
   Notification card (marketing + session empty states)
   Reserved for @mentions — warm amber band.
   ============================================================ */
.notif {
  background: var(--notif-bg);
  border: 1px solid var(--notif-border);
  border-radius: var(--r-sm);
  padding: var(--s-1) var(--s-2);
}
.notif-hd {
  font-size: var(--t-tiny);
  color: var(--accent-hover);
  font-weight: 700;
  margin-bottom: 0.15rem;
}
.notif-bd {
  font-size: var(--t-tiny);
  color: var(--text-3);
  line-height: 1.5;
}

/* ============================================================
   Segmented control (scope tabs, invite tabs)
   ============================================================ */
.segmented {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
}
.segmented > button,
.segmented > .opt {
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: var(--t-label);
  padding: var(--s-1) var(--s-3);
  cursor: pointer;
  font-family: inherit;
}
.segmented > .opt + .opt,
.segmented > button + button { border-left: 1px solid var(--border); }
.segmented > .active,
.segmented > .opt.active,
.segmented > button.active { background: var(--surface); color: var(--text); }

/* ============================================================
   GatedFeature (enabled / exhausted / locked)
   Used by ContextSearch, audit log, SSO surfaces.
   ============================================================ */
.gated {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  font-size: var(--t-ui);
}
.gated.is-locked    { border-style: dashed; color: var(--muted); }
.gated.is-exhausted { border-color: var(--warn); }
.gated .gated-meter { margin-left: auto; color: var(--muted); font-size: var(--t-label); }
.gated .gated-cta   { margin-left: auto; color: var(--accent); font-weight: 700; }