/* DigitalBamboo — Design Tokens
 * v1.0 — sourced from brand/Digital Bamboo Design System/digital-bamboo.css
 * Variable names keep the --db- prefix used by the canonical brand kit so
 * this file stays a drop-in target for future syncs.
 */

@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,600;12..96,700;12..96,800&family=Hanken+Grotesk:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap");

:root {
  /* ─── Color · brand (Jade) ─── */
  --db-accent:        #2F6B4F;   /* Jade — primary brand */
  --db-accent-deep:   #234F3B;   /* hover / pressed */
  --db-accent-light:  #7FBE99;   /* tint, highlights */

  /* ─── Color · secondary (Clay) ─── */
  --db-clay:          #BC6B43;   /* secondary accent, used sparingly */
  --db-clay-deep:     #8A4A28;

  /* ─── Color · neutrals (warm) ─── */
  --db-ink:           #16180F;   /* near-black — dark surfaces & headings text */
  --db-text:          #191B16;   /* body copy */
  --db-paper:         #F4F1E9;   /* page background / light text-on-dark */
  --db-line:          #E0DCD0;   /* hairline borders, dividers */

  /* ─── Type · families ─── */
  --db-font-display:  "Bricolage Grotesque", system-ui, sans-serif;
  --db-font-body:     "Hanken Grotesk", system-ui, sans-serif;
  --db-font-mono:     "IBM Plex Mono", "Courier New", monospace;

  /* ─── Type · scale (layout-tuned, not the generic brand-book scale) ─── */
  --db-text-xs:       11px;
  --db-text-sm:       13px;
  --db-text-base:     15px;
  --db-text-lg:       18px;
  --db-text-xl:       24px;
  --db-text-2xl:      32px;
  --db-text-3xl:      48px;
  --db-text-display:  72px;

  /* ─── Type · weights ─── */
  --db-weight-light:    300;
  --db-weight-regular:  400;
  --db-weight-medium:   500;
  --db-weight-semibold: 600;
  --db-weight-bold:     700;
  --db-weight-black:    800;

  /* ─── Type · letter-spacing ─── */
  --db-tracking-tight:   -0.02em;
  --db-tracking-normal:   0;
  --db-tracking-wide:     0.04em;   /* wordmark */
  --db-tracking-wider:    0.18em;   /* section labels */
  --db-tracking-widest:   0.32em;   /* taglines, eyebrows */

  /* ─── Layout ─── */
  --db-radius-sm:    6px;
  --db-radius-md:    10px;
  --db-radius-lg:    14px;
  --db-border-hair:  1px solid rgba(22, 24, 15, 0.08);
  --db-border-rule:  2px solid var(--db-accent);
}

/* ─── Reusable utility classes ─── */
.db-display { font-family: var(--db-font-display); font-weight: var(--db-weight-black); letter-spacing: var(--db-tracking-wide); }
.db-body    { font-family: var(--db-font-body);    font-weight: var(--db-weight-regular); }
.db-mono    { font-family: var(--db-font-mono);    font-size: var(--db-text-xs); letter-spacing: var(--db-tracking-wider); text-transform: uppercase; }

.db-bg-primary  { background: var(--db-accent); color: var(--db-paper); }
.db-bg-paper    { background: var(--db-paper); color: var(--db-text); }
.db-bg-ink      { background: var(--db-ink); color: var(--db-paper); }