/* =========================================================
   Burg's Eye View - theme tokens and base component styles
   Source of truth: brand-theme-spec.md (same bundle).
   Import order: fonts/fonts.css (or Google Fonts) then this file.
   ========================================================= */

:root {
  /* color */
  --paper:      #FBF7EC;
  --field:      #F7F1E3;
  --ink:        #0E3E47;
  --ink-muted:  #3D5F68;
  --teal:       #187786;
  --gold:       #F0A72E;
  --coral:      #E4633F;
  --line:       rgba(14, 62, 71, .16);
  --teal-tint:  rgba(24, 119, 134, .10);
  --shadow:     0 1px 2px rgba(14, 62, 71, .06);

  /* shape */
  --radius:     14px;
  --radius-sm:  10px;

  /* type */
  --font-display: "Fraunces", Georgia, "Iowan Old Style", serif;
  --font-ui:      "Libre Franklin", "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "IBM Plex Mono", "Courier New", monospace;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0B2A31;  --field: #10333C;  --ink: #F3EBD9;
    --ink-muted: #9DB8BE;  --teal: #3BAABB;  --coral: #E87352;
    --line: rgba(243, 235, 217, .16);
    --teal-tint: rgba(59, 170, 187, .14);
    --shadow: none;
  }
}
:root[data-theme="dark"] {
  --paper: #0B2A31;  --field: #10333C;  --ink: #F3EBD9;
  --ink-muted: #9DB8BE;  --teal: #3BAABB;  --coral: #E87352;
  --line: rgba(243, 235, 217, .16);
  --teal-tint: rgba(59, 170, 187, .14);
  --shadow: none;
}

/* ---------- base ---------- */
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 16.5px/1.65 var(--font-ui);
}
h1 { font: 700 clamp(34px, 5vw, 52px)/1.08 var(--font-display); letter-spacing: .2px; margin: 0 0 .35em; }
h2 { font: 600 clamp(26px, 3.5vw, 34px)/1.15 var(--font-display); margin: 0 0 .4em; }
h3 { font: 600 21px/1.25 var(--font-display); margin: 0 0 .45em; }
small, figcaption { font: 400 13.5px/1.5 var(--font-ui); color: var(--ink-muted); }
a { color: var(--teal); text-decoration: none; }
a:hover, a:focus-visible { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
hr { border: none; border-top: 1px solid var(--line); }

.section-label {
  font: 600 12px/1 var(--font-ui);
  text-transform: uppercase;
  letter-spacing: .22em;
  color: var(--teal);
}

/* numeric alignment for records and votes */
table.data { border-collapse: collapse; width: 100%; }
table.data th { font: 600 13px var(--font-ui); text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); }
table.data td { font: 400 14px var(--font-mono); font-variant-numeric: tabular-nums; padding: 8px 10px; border-bottom: 1px solid var(--line); }
table.data td.num, table.data th.num { text-align: right; }
.table-scroll { overflow-x: auto; }

/* ---------- buttons ---------- */
.btn {
  display: inline-block;
  font: 600 15px var(--font-ui);
  border-radius: var(--radius-sm);
  padding: 10px 18px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: filter .15s ease-out, background .15s ease-out;
}
.btn:hover { filter: brightness(1.08); text-decoration: none; }
.btn-primary   { background: var(--ink); color: var(--paper); }
.btn-follow    { background: var(--gold); color: #0E3E47; }   /* Follow / Subscribe / Support only */
.btn-secondary { background: transparent; color: var(--teal); border-color: var(--teal); }
.btn-danger    { background: var(--coral); color: #fff; }

/* ---------- cards ---------- */
.card {
  background: var(--field);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 24px;
  box-shadow: var(--shadow);
  transition: border-color .15s ease-out;
}
.card:hover { border-color: var(--teal); }

/* ---------- chips and tags ---------- */
.tag {
  display: inline-block;
  font: 600 11px/1 var(--font-ui);
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--teal);
  background: var(--teal-tint);
  border-radius: 999px;
  padding: 6px 12px;
}
.chip-pending { background: var(--gold); color: #0E3E47; }
.chip-overdue { background: var(--coral); color: #fff; }
.chip-pending, .chip-overdue {
  display: inline-block; font: 600 11px/1 var(--font-ui);
  text-transform: uppercase; letter-spacing: .14em;
  border-radius: 999px; padding: 6px 12px;
}

/* ---------- callouts ---------- */
.alert {
  background: var(--field);
  border-left: 4px solid var(--coral);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 14px 18px;
}

/* ---------- masthead ---------- */
.masthead {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 28px;
  padding: 14px 28px;
}
.masthead nav { display: flex; gap: 22px; margin-left: auto; align-items: center; }
.masthead nav a { font: 500 15px var(--font-ui); color: var(--ink); }
.masthead nav a.active { box-shadow: inset 0 -2px 0 var(--teal); }

/* ---------- footer ---------- */
.site-footer {
  background: #0B2A31;
  color: #F3EBD9;
  padding: 44px 28px;
  margin-top: 60px;
}
.site-footer a { color: #3BAABB; }

/* ---------- wave divider ----------
   Inline SVG version in brand-theme-spec.md section 5.
   Utility class draws it as a masked band in the current teal. */
.wave-divider {
  height: 14px;
  background: var(--teal);
  opacity: .45;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 14'><path d='M 2 8 Q 17 1 32 8 T 62 8 T 92 8 T 122 8 T 152 8 T 182 8 T 212 8 T 242 8' fill='none' stroke='black' stroke-width='4' stroke-linecap='round'/></svg>") repeat-x left center / 240px 14px;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 14'><path d='M 2 8 Q 17 1 32 8 T 62 8 T 92 8 T 122 8 T 152 8 T 182 8 T 212 8 T 242 8' fill='none' stroke='black' stroke-width='4' stroke-linecap='round'/></svg>") repeat-x left center / 240px 14px;
  border: none;
  margin: 34px 0;
}

/* ---------- motion ---------- */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}