/* ============================================================
   Connected - shared design system
   Source of truth: brand-src/tokens/connected-tokens.css
   Rules enforced here:
   - Gold surfaces take Ink labels, never white (1.84:1 fails)
   - Bowlby One: display only, one moment per screen, never < 16px
   - Archivo does everything else
   ============================================================ */

:root {
  --gold: #EDB71E;
  --clay: #F2ADA0;
  --butter: #F9DDAD;
  --mist: #CAE4DC;
  --ink: #47443F;
  --paper: #FEFBF3;
  --info: #4786C6;
  --danger: #EF5423;

  --display: "Bowlby One", "Archivo", sans-serif;
  --body: "Archivo", system-ui, sans-serif;

  --radius: 14px;
  --radius-lg: 22px;
  --border: 2.5px solid var(--ink);
  --shadow: 5px 5px 0 var(--ink);
  --shadow-sm: 3px 3px 0 var(--ink);
  --maxw: 1080px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { line-height: 1.2; margin: 0 0 0.5em; }

.display {
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.08;
}

a { color: var(--info); text-decoration-thickness: 2px; text-underline-offset: 3px; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

.caption {
  font-family: var(--body);
  font-weight: 500;
  font-size: 12.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Buttons ---------------------------------------------------- */
.btn {
  display: inline-block;
  font-family: var(--body);
  font-weight: 700;
  font-size: 17px;
  padding: 15px 30px;
  border-radius: var(--radius);
  border: var(--border);
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}
.btn-gold { background: var(--gold); color: var(--ink); box-shadow: var(--shadow); }
.btn-paper { background: var(--paper); color: var(--ink); box-shadow: var(--shadow-sm); }
.btn:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--ink); }
.btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }

/* Cards ------------------------------------------------------ */
.card {
  background: var(--paper);
  border: var(--border);
  border-radius: var(--radius-lg);
  padding: 26px 28px;
}
.card-butter { background: var(--butter); }
.card-mist { background: var(--mist); }
.card-clay { background: var(--clay); }
.card-shadow { box-shadow: var(--shadow); }

/* Checker strip (brand motif) -------------------------------- */
.checker {
  height: 18px;
  background-image:
    linear-gradient(45deg, var(--gold) 25%, transparent 25%, transparent 75%, var(--gold) 75%),
    linear-gradient(45deg, var(--gold) 25%, var(--paper) 25%, var(--paper) 75%, var(--gold) 75%);
  background-size: 36px 36px;
  background-position: 0 0, 18px 18px;
  border-top: var(--border);
  border-bottom: var(--border);
}

/* Tables ------------------------------------------------------ */
.tbl { width: 100%; border-collapse: collapse; font-size: 15.5px; }
.tbl th {
  text-align: left;
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 10px 14px;
  background: var(--ink);
  color: var(--paper);
}
.tbl td { padding: 11px 14px; border-bottom: 1.5px solid rgba(71, 68, 63, 0.25); vertical-align: top; }
.tbl tr:last-child td { border-bottom: none; }
.tbl-frame { border: var(--border); border-radius: var(--radius); overflow: hidden; }
.tbl-scroll { overflow-x: auto; }

@media (max-width: 640px) {
  body { font-size: 16px; }
}