/* Stokta — Brand Tokens v1.0
   Drop into your global stylesheet. All values are production-final. */

:root {
  /* ─── Color ─────────────────────────────────────────── */
  --color-primary:        #0E2A33;   /* Ledger Ink — wordmark, primary CTA, dark surfaces */
  --color-primary-hover:  #1A3A45;   /* Primary hover (≈6% lighter) */
  --color-accent:         #12B886;   /* Guarantee Green — confirmation only */
  --color-accent-tint:    rgba(18, 184, 134, 0.10);
  --color-accent-border:  rgba(18, 184, 134, 0.22);
  --color-accent-deep:    #0B7A5A;   /* Accent text on accent tint (AA) */

  --color-text:           #14181B;
  --color-on-primary:     #F7FAF9;   /* Text/wordmark on --color-primary */

  --color-surface:        #F7FAF9;   /* Paper — default page background */
  --color-surface-alt:    #EEF2F1;   /* Outer canvas behind cards */

  --color-grey-60:        #5B6770;   /* Slate — secondary text, captions */
  --color-grey-20:        #C9D1D3;   /* Hair — disabled, strong dividers */
  --color-hair:           #E4EAEB;   /* Default hairline / divider */

  /* Semantic non-accent states (do NOT swap with --color-accent) */
  --color-danger-bg:      #FDECEC;
  --color-danger-border:  #F5C2C2;
  --color-danger-text:    #9A1F1F;

  /* ─── Type ──────────────────────────────────────────── */
  --font-sans: 'Inter', system-ui, -apple-system, Segoe UI, sans-serif;

  --fs-display:   64px;  --lh-display: 65px;  --ls-display:  -0.032em; --fw-display:   800;
  --fs-heading:   32px;  --lh-heading: 37px;  --ls-heading:  -0.020em; --fw-heading:   600;
  --fs-body:      17px;  --lh-body:    26px;  --ls-body:     -0.005em; --fw-body:      400;
  --fs-caption:   12px;  --lh-caption: 16px;  --ls-caption:   0.060em; --fw-caption:   500;
  --fs-eyebrow:   11px;  --lh-eyebrow: 16px;  --ls-eyebrow:   0.180em; --fw-eyebrow:   600;
  --fs-button:    15px;  --lh-button:  1;     --ls-button:   -0.005em; --fw-button:    600;

  /* Wordmark */
  --ls-wordmark:  -0.045em;
  --fw-wordmark:  900;

  /* ─── Spacing (4px base) ────────────────────────────── */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;
  --space-18: 72px;
  --space-24: 96px;

  /* ─── Radii ─────────────────────────────────────────── */
  --radius:        6px;
  --radius-pill:   999px;

  /* ─── Borders ───────────────────────────────────────── */
  --border-hair:   1px solid var(--color-hair);

  /* ─── Type features ─────────────────────────────────── */
  --font-features: "ss01", "cv11";
}

html { font-family: var(--font-sans); color: var(--color-text); }
html, body { background: var(--color-surface); }

/* Tabular numerals — apply to anything that renders numbers (IDs, prices, dates). */
.tabular,
.invoice,
[data-tabular] { font-variant-numeric: tabular-nums; }

/* ─── Wordmark ────────────────────────────────────────── */
.wordmark {
  font-family: var(--font-sans);
  font-weight: var(--fw-wordmark);
  letter-spacing: var(--ls-wordmark);
  line-height: 1;
  display: inline-flex;
  align-items: center;
  color: var(--color-primary);
}
.wordmark--on-dark { color: var(--color-on-primary); }
.wordmark__dot {
  display: inline-block;
  width: 0.18em;
  height: 0.18em;
  border-radius: 50%;
  background: var(--color-accent);
  margin-left: 0.06em;
  margin-bottom: 0.04em;
  align-self: flex-end;
}

/* ─── Primary CTA ─────────────────────────────────────── */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--color-primary);
  color: #fff;
  font-family: var(--font-sans);
  font-size: var(--fs-button);
  font-weight: var(--fw-button);
  letter-spacing: var(--ls-button);
  line-height: var(--lh-button);
  padding: 14px 22px;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
}
.btn-primary:hover { background: var(--color-primary-hover); }
.btn-primary[disabled] {
  background: var(--color-grey-20);
  color: var(--color-grey-60);
  cursor: not-allowed;
}

/* ─── Status Badge — Guarantee ────────────────────────── */
.badge--guarantee {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--color-accent-tint);
  border: 1px solid var(--color-accent-border);
  color: var(--color-accent-deep);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.003em;
  line-height: 1;
  padding: 7px 12px 7px 10px;
  border-radius: var(--radius-pill);
}

/* Extended status pills — same geometry, different semantics. */
.badge--pending {
  background: rgba(201, 209, 211, 0.24);
  border: 1px solid var(--color-grey-20);
  color: var(--color-grey-60);
}
.badge--overdue {
  background: var(--color-danger-bg);
  border: 1px solid var(--color-danger-border);
  color: var(--color-danger-text);
}
.badge--cancelled {
  background: var(--color-hair);
  border: 1px solid var(--color-hair);
  color: var(--color-grey-60);
}