/* ============================================================
   Celeritas Studio — the design system
   ============================================================
   Taken from the HeroUI CRM template, measured off the running
   page rather than eyeballed: its token names, its geometry, its
   component anatomy.

   What was read from it
     radius        --radius .5rem → 8px cards, 12px fields, 4–6px
                   chips and small controls
     spacing       4px base; 12px between cards; 16px inside one
     surfaces      background → surface → surface-secondary →
                   surface-tertiary, four steps, each a clear jump
     type          12 / 14 / 16 / 18 / 24, numbers at 24/600 with
                   -0.6px tracking, labels at 14/500 in muted
     anatomy       card = 1px border + 16px padding + 12px gap;
                   kpi = header row, value, footnote; button =
                   36px tall, 14/500, 8px gap; chip = 12/500
     states        one accent for what is active, muted for the
                   rest, soft tints for status

   What was not taken: the palette's hue. HeroUI's dark is neutral
   black (#060607 → #18181b); the studio is navy and that is the
   brand. The ramp below sits at HeroUI's lightness steps with the
   navy cast kept, so the geometry and rhythm are theirs and the
   colour is still yours. Swapping the six --s-* values below for
   #060607 / #18181b / #232325 / #262728 / #2a2a2d / #9f9fa9 gives
   the template's exact palette.

   This file defines the system. digit-edge.css maps the studio's
   own class names onto it, so pages did not have to be rewritten.
   ============================================================ */

/* The tokens are in tokens.css, linked by every page BEFORE this file
   with a version on the URL. They used to be pulled in from here with
   @import, which cannot be versioned, and that is how a browser kept an
   old palette for a week. */

/* ============================================================
   COMPONENTS
   HeroUI's names on the left of each block, the studio's own on
   the right, so both markups get the same thing and no page had
   to be rewritten to move over.
   ============================================================ */

/* Form controls take the page's font. Without this a <button> or <input>
   with no family of its own falls to the platform default; three elements
   in Daily Races were rendering in Arial on a page set in Inter. */
button, input, select, textarea { font-family: inherit; }

/* ── Card ─────────────────────────────────────────────────────
   .card{border:1px; radius:8; padding:16; gap:12} */
.card,
.de-studio .de-card {
  background: var(--s-1);
  border: 1px solid var(--s-line);
  border-radius: var(--s-radius);
  padding: var(--s-pad);
  box-shadow: var(--s-shadow);
}
.card--secondary { background: var(--s-2); }
.card__header { display: flex; align-items: center; gap: calc(var(--s-space) * 2); margin-bottom: var(--s-space); }
.card__title  { font-size: var(--s-text-sm); font-weight: 600; color: var(--s-fg); margin: 0; }
.card__sub    { font-size: var(--s-text-xs); color: var(--s-fg-muted); margin: 2px 0 0; }

/* ── KPI ──────────────────────────────────────────────────────
   Label on top in muted 14/500, the figure at 24/600 with
   HeroUI's -0.6px tracking, a footnote under it. */
.kpi {
  display: flex; flex-direction: column;
  background: var(--s-1);
  border: 1px solid var(--s-line);
  border-radius: var(--s-radius);
  padding: var(--s-pad);
  box-shadow: var(--s-shadow);
}
.kpi__header { display: flex; align-items: center; gap: calc(var(--s-space) * 2); margin-bottom: var(--s-space); }
.kpi__label  { font-size: var(--s-text-sm); font-weight: 500; color: var(--s-fg-muted); }
.kpi__value  {
  font-size: var(--s-text-2xl); font-weight: 600; line-height: 32px;
  letter-spacing: var(--s-num-track); color: var(--s-fg);
  font-variant-numeric: tabular-nums;
}
.kpi__foot   { margin-top: var(--s-space); font-size: var(--s-text-xs); color: var(--s-fg-subtle); }
.kpi__icon {
  width: 32px; height: 32px; border-radius: var(--s-radius);
  display: grid; place-items: center; flex: none;
  background: var(--s-accent-soft); color: var(--s-accent-hi);
}
.kpi--success .kpi__value { color: var(--s-success); }
.kpi--danger  .kpi__value { color: var(--s-danger); }

/* ── Button ───────────────────────────────────────────────────
   36px tall, 14/500, 8px gap, 8px radius; sm 32, lg 40. */
.button,
.de-studio .de-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: calc(var(--s-space) * 2);
  height: 36px; padding: 0 calc(var(--s-space) * 3);
  border: 1px solid transparent; border-radius: var(--s-radius);
  font-family: inherit; font-size: var(--s-text-sm); font-weight: 500;
  line-height: 20px; white-space: nowrap; text-decoration: none;
  cursor: pointer;
  transition: background-color var(--s-dur) var(--s-ease),
              border-color var(--s-dur) var(--s-ease),
              color var(--s-dur) var(--s-ease);
}
/* A button with no variant on it.
   The base above gives every button a transparent border and no fill,
   which is right for .button because you always pair it with a variant.
   The studio's own markup does not: 37 places write class="de-btn" and
   nothing else, and those were rendering as a label with no edge and no
   fill — Stream Tools' "Open live chat" and "Reset to defaults" read as
   plain text sitting next to a blue Save. The attribute selector matches
   only the bare ones, so the 30 buttons that carry a module's own class
   (the borderless icon buttons in a toolbar, mostly) are left alone. */
.de-studio [class="de-btn"] {
  background: transparent;
  color: var(--s-fg);
  border-color: var(--s-line-strong);
}
.de-studio [class="de-btn"]:hover { border-color: var(--s-fg-subtle); background: var(--s-3); }

.button--sm, .de-studio .de-btn-sm { height: 32px; padding: 0 calc(var(--s-space) * 2.5); font-size: var(--s-text-xs); }
.button--lg { height: 40px; padding: 0 calc(var(--s-space) * 4); font-size: var(--s-text-base); }
.button--primary,
.de-studio .de-btn-primary {
  background: var(--s-accent); color: var(--s-accent-fg); border-color: transparent;
}
.button--primary:hover,
.de-studio .de-btn-primary:hover { background: var(--s-accent-hi); }
.button--secondary,
.de-studio .de-btn-secondary {
  background: var(--s-3); color: var(--s-fg); border-color: var(--s-line);
}
.button--secondary:hover { background: var(--s-2); border-color: var(--s-line-strong); }
.button--ghost, .de-studio .de-btn-ghost {
  background: transparent; color: var(--s-fg-muted); border-color: transparent;
}
.button--ghost:hover { background: var(--s-3); color: var(--s-fg); }
.button--outline { background: transparent; color: var(--s-fg); border-color: var(--s-line-strong); }
.button--outline:hover { border-color: var(--s-fg-subtle); }
.button--danger { background: var(--s-danger); color: #fff; }
.button--danger-soft { background: var(--s-danger-soft); color: var(--s-danger); }
.button--icon-only { width: 36px; padding: 0; }
.button:focus-visible, .de-studio .de-btn:focus-visible {
  outline: 2px solid var(--s-accent-hi); outline-offset: 2px;
}

/* ── Field ────────────────────────────────────────────────────
   HeroUI gives inputs a wider radius than buttons (radius * 1.5). */
.input,
.de-studio .de-input,
.de-studio .de-select {
  width: 100%; height: 36px; padding: 0 calc(var(--s-space) * 3);
  background: var(--s-bg);
  border: 1px solid var(--s-line-strong);
  border-radius: var(--s-radius-field);
  color: var(--s-fg);
  font-family: inherit; font-size: var(--s-text-sm); line-height: 20px;
  transition: border-color var(--s-dur) var(--s-ease), box-shadow var(--s-dur) var(--s-ease);
}
.input::placeholder, .de-studio .de-input::placeholder { color: var(--s-fg-subtle); }
.input:focus, .de-studio .de-input:focus, .de-studio .de-select:focus {
  outline: none; border-color: var(--s-accent);
  box-shadow: 0 0 0 3px var(--s-accent-soft);
}
.label, .de-studio .de-label {
  display: block; margin-bottom: calc(var(--s-space) * 1.5);
  font-size: var(--s-text-xs); font-weight: 500; color: var(--s-fg-muted);
}

/* ── Chip ─────────────────────────────────────────────────────
   12/500, 6px radius, tight padding — a label, not a button. */
.chip,
.de-studio .de-card-chip,
.de-studio .de-status {
  display: inline-flex; align-items: center; gap: calc(var(--s-space) * 0.5);
  padding: 2px calc(var(--s-space) * 2);
  border-radius: var(--s-radius-md);
  background: var(--s-3); color: var(--s-fg-muted);
  font-size: var(--s-text-xs); font-weight: 500; line-height: 20px;
  white-space: nowrap;
}
.chip--accent  { background: var(--s-accent-soft);  color: var(--s-accent-hi); }
.chip--success, .de-studio .de-status-success { background: var(--s-success-soft); color: var(--s-success); }
.chip--warning, .de-studio .de-status-warning { background: var(--s-warning-soft); color: var(--s-warning); }
.chip--danger,  .de-studio .de-status-error   { background: var(--s-danger-soft);  color: var(--s-danger); }
.chip--pill { border-radius: var(--s-radius-pill); }

/* ── Table ────────────────────────────────────────────────────
   Head in muted 12/500, rows 14, one hairline, hover lift. */
.table { width: 100%; border-collapse: collapse; }
.table thead th,
.de-studio table thead th {
  padding: calc(var(--s-space) * 2.5) calc(var(--s-space) * 3);
  background: var(--s-2);
  border-bottom: 1px solid var(--s-line);
  color: var(--s-fg-muted);
  font-size: var(--s-text-xs); font-weight: 500; text-align: left;
  letter-spacing: 0.02em;
}
.table tbody td,
.de-studio table tbody td {
  padding: calc(var(--s-space) * 2.5) calc(var(--s-space) * 3);
  border-bottom: 1px solid var(--s-line);
  font-size: var(--s-text-sm); vertical-align: middle;
}
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr, .de-studio table tbody tr { transition: background-color var(--s-dur) var(--s-ease); }
.table tbody tr:hover, .de-studio table tbody tr:hover { background: var(--s-3); }
.table .num, .table .amount, .tabular { font-variant-numeric: tabular-nums; letter-spacing: var(--s-num-track); }

/* ── Sidebar item ─────────────────────────────────────────────
   36px tall, 8px radius, 14/500, accent only when active. */
.sidebar__item,
.de-studio .nav-item {
  display: flex; align-items: center; gap: calc(var(--s-space) * 3);
  width: 100%; min-height: 36px;
  padding: 0 calc(var(--s-space) * 3);
  border: 0; border-radius: var(--s-radius);
  background: transparent; color: var(--s-fg-muted);
  font-family: inherit; font-size: var(--s-text-sm); font-weight: 500;
  text-align: left; text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color var(--s-dur) var(--s-ease), color var(--s-dur) var(--s-ease);
}
.sidebar__item:hover, .de-studio .nav-item:hover { background: var(--s-3); color: var(--s-fg); }
.sidebar__item[aria-current], .sidebar__item.is-active,
.de-studio .active-nav, .de-studio .active-nav:hover {
  background: var(--s-accent-soft); color: var(--s-accent-hi);
}

/* ── Tabs ─────────────────────────────────────────────────────
   A rail of underlines, not a band of colour. */
.tabs { display: flex; align-items: stretch; gap: 0; border-bottom: 1px solid var(--s-line); }
.tab {
  display: inline-flex; align-items: center; gap: calc(var(--s-space) * 2);
  min-height: 44px; padding: 0 calc(var(--s-space) * 4);
  margin-bottom: -1px;
  border: 0; border-bottom: 2px solid transparent;
  background: transparent; color: var(--s-fg-muted);
  font-family: inherit; font-size: var(--s-text-sm); font-weight: 500;
  cursor: pointer; text-decoration: none;
  transition: color var(--s-dur) var(--s-ease), border-color var(--s-dur) var(--s-ease);
}
.tab:hover { color: var(--s-fg); }
.tab.is-active { color: var(--s-accent-hi); border-bottom-color: var(--s-accent); }

/* ── Surfaces that pop ────────────────────────────────────────
   Menus, dialogs and popovers sit on the second surface with a
   real shadow, because they are above the page rather than in it. */
.popover, .de-studio .ui-menu-pop, .de-studio .ui-dialog,
.de-studio .ui-modal-panel, .de-studio .ui-cal-pop {
  background: var(--s-1);
  border: 1px solid var(--s-line);
  border-radius: var(--s-radius);
  box-shadow: var(--s-shadow-pop);
  color: var(--s-fg);
}

/* ── Layout rhythm ────────────────────────────────────────────
   12px between cards, 16px inside — the template's whole spacing
   story, and the thing that makes a page look composed. */
.stack   { display: flex; flex-direction: column; gap: var(--s-gap); }
.row     { display: flex; align-items: center; gap: calc(var(--s-space) * 2); }
.grid-2, .grid-3, .grid-4 { display: grid; gap: var(--s-gap); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px)  { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }