/* ══════════════════════════════════════════════════════════════════════
   RDx Decks · Studio chrome — the standardised design-system layer.
   Builds on tokens.css (Ricoh Paper). One component set: buttons, inputs,
   badges, cards, chips, the top bar. RDx green (#00A76F) is the ink.
   ══════════════════════════════════════════════════════════════════════ */

:root {
  /* RDx division ink — surfaces primary actions, focus, active states. */
  --brand-color: #00A76F;
  --brand-color-hover: #00935f;
  --brand-color-pressed: #007f51;
  --brand-text: #ffffff;
  /* AI accent — a calm violet→teal the studio uses for assistant surfaces. */
  --studio-ai-1: oklch(0.62 0.16 285);
  --studio-ai-2: oklch(0.66 0.12 200);
  --topbar-h: 56px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
  font-family: var(--font-sans);
  background: var(--surface-base);
  color: var(--text-primary);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "lnum" 1;
  transition: background-color var(--motion) var(--ease), color var(--motion) var(--ease);
}
#root { height: 100%; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-default); border: 3px solid var(--surface-base); border-radius: 100px; }
::-webkit-scrollbar-thumb:hover { background: var(--border-strong); }
::selection { background: color-mix(in srgb, var(--brand-primary) 22%, transparent); }

/* ─── Type helpers ─────────────────────────────────────────────────── */
.t-display-lg { font-size: var(--fs-display-lg); font-weight: var(--fw-semibold); line-height: var(--lh-tight); letter-spacing: -0.01em; }
.t-display { font-size: var(--fs-display); font-weight: var(--fw-semibold); line-height: var(--lh-tight); letter-spacing: -0.005em; }
.t-label { font-size: var(--fs-label); font-weight: var(--fw-medium); }
.t-body { font-size: var(--fs-body); }
.t-body-sm { font-size: var(--fs-body-sm); color: var(--text-secondary); }
.t-tag { font-size: var(--fs-tag); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: var(--tracking-tag); color: var(--text-tertiary); }
.t-caption { font-size: var(--fs-caption); font-weight: var(--fw-medium); color: var(--text-tertiary); }
.t-serif { font-family: var(--font-serif); font-weight: 400; letter-spacing: -0.02em; }
.t-num { font-variant-numeric: tabular-nums; }

/* ─── Buttons — one base, intents × sizes × shapes ─────────────────── */
.btn {
  --_h: 36px;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: var(--_h); padding: 0 14px;
  font-family: var(--font-sans); font-size: var(--fs-label); font-weight: var(--fw-medium);
  line-height: 1; white-space: nowrap;
  border: 1px solid transparent; border-radius: var(--radius-sm);
  background: transparent; color: var(--text-primary); cursor: pointer;
  transition: background var(--motion-fast) var(--ease), border-color var(--motion-fast) var(--ease),
              color var(--motion-fast) var(--ease), box-shadow var(--motion-fast) var(--ease),
              transform var(--motion-fast) var(--ease);
  user-select: none;
}
.btn:active { transform: translateY(0.5px); }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--brand-focus-ring); }
.btn .ico { width: 16px; height: 16px; flex: none; }
.btn[disabled] { opacity: 0.45; pointer-events: none; }

.btn--sm { --_h: 30px; padding: 0 11px; font-size: var(--fs-body-sm); }
.btn--lg { --_h: 44px; padding: 0 20px; font-size: var(--fs-body); }
.btn--icon { width: var(--_h); padding: 0; }
.btn--icon.btn--sm { width: 30px; }
.btn--pill { border-radius: var(--radius-pill); }
.btn--block { width: 100%; }

.btn--primary { background: var(--brand-primary); color: var(--brand-on-primary); border-color: var(--brand-primary); }
.btn--primary:hover { background: var(--brand-primary-hover); border-color: var(--brand-primary-hover); }
.btn--secondary { background: var(--surface-raised); color: var(--text-primary); border-color: var(--border-default); box-shadow: var(--shadow-sm); }
.btn--secondary:hover { background: var(--surface-hover); border-color: var(--border-strong); }
.btn--ghost { background: transparent; color: var(--text-secondary); }
.btn--ghost:hover { background: var(--hover-overlay); color: var(--text-primary); }
.btn--ai { color: #fff; border: none; background: linear-gradient(115deg, var(--studio-ai-1), var(--studio-ai-2)); }
.btn--ai:hover { filter: brightness(1.06); }
.btn--danger { background: transparent; color: var(--error-strong); border-color: color-mix(in srgb, var(--error-strong) 35%, transparent); }
.btn--danger:hover { background: var(--error-soft); }

/* ─── Inputs ───────────────────────────────────────────────────────── */
.input, .textarea, .select {
  width: 100%; font-family: var(--font-sans); font-size: var(--fs-body);
  color: var(--text-primary); background: var(--surface-raised);
  border: 1px solid var(--border-default); border-radius: var(--radius-sm);
  padding: 9px 12px; transition: border-color var(--motion-fast) var(--ease), box-shadow var(--motion-fast) var(--ease);
}
.input::placeholder, .textarea::placeholder { color: var(--text-tertiary); }
.input:focus, .textarea:focus, .select:focus { outline: none; border-color: var(--brand-primary); box-shadow: 0 0 0 3px var(--brand-focus-ring); }
.textarea { resize: none; line-height: var(--lh-body); }
.select { appearance: none; cursor: pointer; padding-right: 30px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 9px center; }

/* ─── Badges / tags ────────────────────────────────────────────────── */
.badge { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px;
  font-size: var(--fs-tag); font-weight: var(--fw-semibold); letter-spacing: 0.02em;
  border-radius: var(--radius-pill); background: var(--chip-bg); color: var(--text-secondary); white-space: nowrap; }
.badge--dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge--emerald { background: var(--accent-emerald-bg); color: var(--accent-emerald-text); }
.badge--amber { background: var(--accent-amber-bg); color: var(--accent-amber-text); }
.badge--sky { background: var(--accent-sky-bg); color: var(--accent-sky-text); }
.badge--rose { background: var(--accent-rose-bg); color: var(--accent-rose-text); }
.badge--brand { background: color-mix(in srgb, var(--brand-primary) 14%, transparent); color: var(--brand-primary); }
.tag-eyebrow { font-size: var(--fs-tag); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: var(--tracking-tag); color: var(--text-tertiary); }

/* ─── Card ─────────────────────────────────────────────────────────── */
.card { background: var(--surface-raised); border: 1px solid var(--border-subtle); border-radius: var(--radius); }

/* ─── Chip (nav tabs, filters) ─────────────────────────────────────── */
.chip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px;
  font-size: var(--fs-body-sm); font-weight: var(--fw-medium); color: var(--text-secondary);
  background: transparent; border: 1px solid transparent; border-radius: var(--radius-pill); cursor: pointer;
  transition: background var(--motion-fast) var(--ease), color var(--motion-fast) var(--ease); white-space: nowrap; }
.chip:hover { background: var(--hover-overlay); color: var(--text-primary); }
.chip[aria-pressed="true"], .chip.is-active { background: var(--chip-active-bg); color: var(--text-primary); }

/* ─── Segmented control ────────────────────────────────────────────── */
.segmented { display: inline-flex; padding: 3px; gap: 2px; background: var(--surface-sunken);
  border: 1px solid var(--border-subtle); border-radius: var(--radius-pill); }
.segmented button { height: 28px; padding: 0 13px; border: none; background: transparent; cursor: pointer;
  font-family: var(--font-sans); font-size: var(--fs-body-sm); font-weight: var(--fw-medium);
  color: var(--text-secondary); border-radius: var(--radius-pill); display: inline-flex; align-items: center; gap: 6px;
  transition: background var(--motion-fast) var(--ease), color var(--motion-fast) var(--ease); }
.segmented button.is-active { background: var(--surface-raised); color: var(--text-primary); box-shadow: var(--shadow-sm); }

/* ─── Keycap ───────────────────────────────────────────────────────── */
kbd { font-family: var(--font-mono); font-size: 11px; padding: 2px 6px; border-radius: 5px;
  background: var(--surface-sunken); border: 1px solid var(--border-default); color: var(--text-secondary);
  box-shadow: 0 1px 0 var(--border-default); }

/* ─── Top bar (chrome) ─────────────────────────────────────────────── */
.topbar { height: var(--topbar-h); display: flex; align-items: center; gap: var(--s-4);
  padding: 0 var(--s-4) 0 var(--s-5); background: var(--glass-bg); backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur); border-bottom: 1px solid var(--border-subtle);
  position: sticky; top: 0; z-index: 50; }
.brandmark { display: flex; align-items: center; gap: 9px; font-weight: var(--fw-semibold); letter-spacing: -0.01em; }
.brandmark .r { width: 22px; height: 22px; display: grid; place-items: center; color: var(--brand-primary); }
.brandmark .r svg { width: 100%; height: 100%; }
.brandmark .sep { width: 1px; height: 18px; background: var(--border-default); margin: 0 2px; }
.brandmark .product { color: var(--text-primary); font-size: 15px; }

.icon-btn { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: var(--radius-sm);
  border: none; background: transparent; color: var(--text-secondary); cursor: pointer;
  transition: background var(--motion-fast) var(--ease), color var(--motion-fast) var(--ease); }
.icon-btn:hover { background: var(--hover-overlay); color: var(--text-primary); }
.icon-btn svg { width: 18px; height: 18px; }

.avatar { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: var(--brand-primary); color: var(--brand-on-primary); font-size: 12px; font-weight: var(--fw-semibold); }

/* ─── Utility ──────────────────────────────────────────────────────── */
.row { display: flex; align-items: center; }
.col { display: flex; flex-direction: column; }
.gap-1 { gap: var(--s-1); } .gap-2 { gap: var(--s-2); } .gap-3 { gap: var(--s-3); } .gap-4 { gap: var(--s-4); }
.spacer { flex: 1 1 auto; }
.muted { color: var(--text-secondary); }
.faint { color: var(--text-tertiary); }
.divider-h { height: 1px; background: var(--border-subtle); width: 100%; }

@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop { 0% { opacity: 0; transform: scale(0.96); } 100% { opacity: 1; transform: scale(1); } }
.rise { animation: rise var(--motion) var(--ease) both; }
.fade { animation: fade var(--motion) var(--ease) both; }

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