/* Civic Ledger — Phase-1 design-token skin for the registry console.
 *
 * Source of truth: the Console/Registry design handoff ("Design Tokens").
 * This sheet carries only tokens and base component classes; it is not yet
 * linked from any template. No fonts are fetched here — the Spectral /
 * Archivo / Spline Sans Mono stacks fall back to system faces until the
 * font files ship.
 *
 * House rules baked in:
 *   - square corners on all Console/Registry surfaces (radius token = 0);
 *   - status color is never the only signal — chips always carry a label;
 *   - numerals, money, area and hashes are mono with tabular figures.
 */

:root {
  /* ---- palette -------------------------------------------------------- */
  --cl-ink:            #1C2420; /* primary text, dark nav */
  --cl-brand:          #1A5C4A; /* primary buttons, links, active nav */
  --cl-brand-hover:    #0E3D30;
  --cl-brand-deep:     #143A30; /* token-area hero card */
  --cl-paper:          #FAF8F4; /* card/surface background */
  --cl-desk:           #E9E7E2; /* app background behind cards (console) */
  --cl-desk-registry:  #EFEFEC; /* app background (public registry) */
  --cl-line:           #D8D3C8; /* card borders / dividers */
  --cl-line-inner:     #E4E0D5; /* inner row rules */
  --cl-muted:          #6B6960; /* secondary text */
  --cl-caption:        #8A8578; /* captions */

  /* ---- semantic status (text + bg pairs; pair with a label, never color
         alone) --------------------------------------------------------- */
  --cl-success-text:   #14613F; /* success / active / executed / confirmed */
  --cl-success-bg:     #E4EFE7;
  --cl-pending-text:   #8A6A12; /* pending / under-review */
  --cl-pending-bg:     #F5ECD4;
  --cl-error-text:     #A03024; /* error / frozen / rejected */
  --cl-error-bg:       #F6E2DE;
  --cl-info-text:      #2B4F8A; /* informational / approved / allocation */
  --cl-info-bg:        #E2E9F4;
  --cl-neutral-text:   #5B584F; /* neutral / terminal */
  --cl-neutral-bg:     #ECEADF;

  /* ---- typography ------------------------------------------------------ */
  --cl-font-display: "Spectral", "Iowan Old Style", "Palatino Linotype",
                     Georgia, "Times New Roman", serif;
  --cl-font-ui:      "Archivo", "Helvetica Neue", Helvetica, Arial,
                     system-ui, sans-serif;
  --cl-font-mono:    "Spline Sans Mono", ui-monospace, "SF Mono",
                     "Cascadia Mono", Menlo, Consolas, monospace;

  /* type scale */
  --cl-size-display:   2.25rem;  /* Spectral 400–600 */
  --cl-size-h1:        1.75rem;
  --cl-size-body:      1rem;     /* Archivo 400–700 */
  --cl-size-secondary: .875rem;
  --cl-size-caption:   .75rem;

  /* Civic Ledger: square corners on Console/Registry surfaces. */
  --cl-radius: 0;
}

/* ---- typography helpers ------------------------------------------------- */

.cl-display {
  font-family: var(--cl-font-display);
  font-size: var(--cl-size-display);
  font-weight: 500;
  color: var(--cl-ink);
  line-height: 1.15;
}

.cl-h1 {
  font-family: var(--cl-font-display);
  font-size: var(--cl-size-h1);
  font-weight: 600;
  color: var(--cl-ink);
  line-height: 1.2;
}

.cl-body      { font-family: var(--cl-font-ui); font-size: var(--cl-size-body);      color: var(--cl-ink); }
.cl-secondary { font-family: var(--cl-font-ui); font-size: var(--cl-size-secondary); color: var(--cl-muted); }
.cl-caption   { font-family: var(--cl-font-ui); font-size: var(--cl-size-caption);   color: var(--cl-caption); }

/* Numbers, money, area, hashes: mono + tabular figures, always. */
.cl-num {
  font-family: var(--cl-font-mono);
  font-variant-numeric: tabular-nums;
}

/* ---- chip (status) ------------------------------------------------------ */
/* Spec: font-weight 600, 11px, 3px 8px padding, square corners. */

.cl-chip {
  display: inline-block;
  font-family: var(--cl-font-ui);
  font-weight: 600;
  font-size: 11px;
  line-height: 1.35;
  padding: 3px 8px;
  border-radius: var(--cl-radius);
  color: var(--cl-neutral-text);
  background: var(--cl-neutral-bg);
  white-space: nowrap;
}

.cl-chip--success { color: var(--cl-success-text); background: var(--cl-success-bg); }
.cl-chip--pending { color: var(--cl-pending-text); background: var(--cl-pending-bg); }
.cl-chip--error   { color: var(--cl-error-text);   background: var(--cl-error-bg); }
.cl-chip--info    { color: var(--cl-info-text);    background: var(--cl-info-bg); }
.cl-chip--neutral { color: var(--cl-neutral-text); background: var(--cl-neutral-bg); }

/* ---- buttons ------------------------------------------------------------ */

.cl-btn {
  display: inline-block;
  font-family: var(--cl-font-ui);
  font-weight: 600;
  font-size: var(--cl-size-secondary);
  line-height: 1;
  padding: 10px 16px;
  border: 1px solid var(--cl-line);
  border-radius: var(--cl-radius);
  background: var(--cl-paper);
  color: var(--cl-ink);
  cursor: pointer;
  text-decoration: none;
  text-align: center;
}

.cl-btn:hover { border-color: var(--cl-muted); }

.cl-btn:focus-visible {
  outline: 2px solid var(--cl-brand);
  outline-offset: 2px;
}

.cl-btn--primary {
  background: var(--cl-brand);
  border-color: var(--cl-brand);
  color: #FFFFFF;
}

.cl-btn--primary:hover {
  background: var(--cl-brand-hover);
  border-color: var(--cl-brand-hover);
}

.cl-btn--danger {
  background: var(--cl-error-text);
  border-color: var(--cl-error-text);
  color: #FFFFFF;
}

.cl-btn--ghost {
  background: transparent;
  border-color: transparent;
  color: var(--cl-brand);
}

.cl-btn--ghost:hover { text-decoration: underline; }

.cl-btn[disabled],
.cl-btn--disabled {
  opacity: .5;
  cursor: not-allowed;
  pointer-events: none;
}

/* ---- cards -------------------------------------------------------------- */

.cl-card {
  background: var(--cl-paper);
  border: 1px solid var(--cl-line);
  border-radius: var(--cl-radius);
  padding: 16px 20px;
}

.cl-card__title {
  font-family: var(--cl-font-ui);
  font-size: var(--cl-size-caption);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--cl-caption);
  margin: 0 0 8px;
}

/* Stat card: caption label over a large tabular figure. */
.cl-stat__value {
  font-family: var(--cl-font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 1.75rem;
  font-weight: 500;
  color: var(--cl-ink);
  line-height: 1.1;
}

.cl-stat__unit {
  font-family: var(--cl-font-ui);
  font-size: var(--cl-size-secondary);
  color: var(--cl-muted);
  margin-left: .25em;
}

/* Token-area hero: the one dark card in the system. */
.cl-card--hero {
  background: var(--cl-brand-deep);
  border-color: var(--cl-brand-deep);
  color: var(--cl-paper);
}

.cl-card--hero .cl-card__title { color: rgba(250, 248, 244, .65); }
.cl-card--hero .cl-stat__value { color: var(--cl-paper); }
.cl-card--hero .cl-stat__unit  { color: rgba(250, 248, 244, .7); }

/* ---- tables ------------------------------------------------------------- */

.cl-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--cl-font-ui);
  font-size: var(--cl-size-secondary);
  color: var(--cl-ink);
  background: var(--cl-paper);
  border: 1px solid var(--cl-line);
  border-radius: var(--cl-radius);
}

.cl-table th {
  font-size: var(--cl-size-caption);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-align: left;
  color: var(--cl-caption);
  padding: 10px 12px;
  border-bottom: 1px solid var(--cl-line);
  background: var(--cl-paper);
}

.cl-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--cl-line-inner);
  vertical-align: top;
}

.cl-table tbody tr:last-child td { border-bottom: 0; }

.cl-table tbody tr:hover td { background: rgba(28, 36, 32, .03); }

/* Numeric columns: right-aligned mono with tabular figures. */
.cl-table td.cl-num,
.cl-table th.cl-num { text-align: right; }

/* ---- misc scaffolding ---------------------------------------------------- */

.cl-desk          { background: var(--cl-desk); }
.cl-desk-registry { background: var(--cl-desk-registry); }

.cl-rule       { border: 0; border-top: 1px solid var(--cl-line); }
.cl-rule-inner { border: 0; border-top: 1px solid var(--cl-line-inner); }

.cl-link { color: var(--cl-brand); text-decoration: none; }
.cl-link:hover { color: var(--cl-brand-hover); text-decoration: underline; }

/* Charts (internal/dashboard SVG) inherit the UI face when embedded. */
.cl-chart { font-family: var(--cl-font-ui); }
.cl-chart svg { display: block; max-width: 100%; height: auto; }