/* ============================================================
   SHARED DESIGN TOKENS — Homeberry AI Solutions Ltd ("Sorted")
   Used by every property in the silent-build programme.

   Brand values are EXTRACTED from the live hub stylesheet
   (css/style.css) — dark green on cream — not invented. The only
   deliberate divergence is --text-muted, darkened from the hub's
   #6b7c6b to #5a6b5a so that muted text clears WCAG AA (4.5:1) at
   body size rather than only at large size. Rationale recorded
   inline below.

   Reading-comfort floor for all new properties:
     body text >= 18px, line-height >= 1.6, generous spacing,
     measure capped near 68ch, WCAG AA contrast throughout.
   ============================================================ */

:root {
  /* --- Brand greens (from css/style.css) --- */
  --green-deep:    #14532d;
  --green-primary: #166534;   /* 7.0:1 on cream — AA/AAA body */
  --green-mid:     #15803d;
  --green-light:   #22c55e;
  --green-pale:    #dcfce7;
  --green-ghost:   #f0fdf4;

  /* --- Surfaces (from css/style.css) --- */
  --cream:      #fefdf8;
  --cream-warm: #faf8f0;
  --white:      #ffffff;

  /* --- Text --- */
  --text-dark:  #0f1a0f;      /* headings */
  --text-body:  #374737;      /* 9.7:1 on cream */
  --text-muted: #5a6b5a;      /* 5.6:1 on cream. Hub uses #6b7c6b (4.4:1),
                                 which is AA for large text only — darkened
                                 here because these properties set muted text
                                 at body size. */
  --text-invert: #ffffff;

  /* --- Accent (from css/style.css) --- */
  --gold:       #ca8a04;
  --gold-light: #fef3c7;

  /* --- Data-publication accents (Registry Report) --- */
  --rule:        #e3e0d4;     /* hairline rules on cream */
  --rule-strong: #c9c5b4;
  --collecting:  #8a6d1f;     /* "still collecting" state, 4.9:1 on cream */

  /* --- Type --- */
  --font-display: 'DM Serif Display', Georgia, 'Times New Roman', serif;
  --font-body:    'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  --fs-body:  18px;           /* reading-comfort floor */
  --lh-body:  1.7;            /* >= 1.6 */
  --measure:  68ch;

  /* --- Space --- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px;

  /* --- Shape (from css/style.css) --- */
  --radius:    16px;
  --radius-sm: 10px;
  --radius-xs: 6px;

  --shadow-sm: 0 1px 3px rgba(20,83,45,0.08);
  --shadow-md: 0 4px 20px rgba(20,83,45,0.10);
  --shadow-lg: 0 12px 40px rgba(20,83,45,0.12);

  --max-w:      1080px;
  --max-w-text: 720px;
  --transition: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- Reset --- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-body);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, svg, video { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--text-dark);
  line-height: 1.25;
  margin: 0 0 var(--sp-4);
  font-weight: 400;
}
h1 { font-size: clamp(30px, 5vw, 44px); }
h2 { font-size: clamp(24px, 3.6vw, 32px); margin-top: var(--sp-8); }
h3 { font-size: clamp(20px, 2.6vw, 24px); margin-top: var(--sp-6); }
p, li { max-width: var(--measure); }
p  { margin: 0 0 var(--sp-5); }
ul, ol { margin: 0 0 var(--sp-5); padding-left: var(--sp-5); }
li { margin-bottom: var(--sp-3); }

a { color: var(--green-primary); text-decoration: underline; text-underline-offset: 3px; }
a:hover, a:focus { color: var(--green-deep); }
:focus-visible { outline: 3px solid var(--green-mid); outline-offset: 3px; border-radius: var(--radius-xs); }

/* --- Layout --- */
.wrap { width: 100%; max-width: var(--max-w); margin: 0 auto; padding: 0 var(--sp-5); }
.wrap--text { max-width: var(--max-w-text); }
main { padding: var(--sp-7) 0 var(--sp-9); }
.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--green-deep); color: var(--text-invert);
  padding: var(--sp-3) var(--sp-4); z-index: 100;
}
.skip-link:focus { left: var(--sp-4); top: var(--sp-4); }

/* --- Masthead (publication properties) --- */
.masthead {
  background: var(--green-deep);
  color: var(--text-invert);
  font-size: 15px;
  line-height: 1.5;
  padding: var(--sp-3) 0;
}
.masthead a { color: var(--green-pale); }
.masthead p { max-width: none; margin: 0; }

/* --- Site header --- */
.site-head { border-bottom: 1px solid var(--rule); padding: var(--sp-5) 0; background: var(--cream-warm); }
.site-head .brand { font-family: var(--font-display); font-size: 22px; color: var(--text-dark); text-decoration: none; }
.site-nav { display: flex; flex-wrap: wrap; gap: var(--sp-5); margin-top: var(--sp-3); font-size: 16px; }

/* --- Cards, tables, states --- */
.card {
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: var(--sp-5);
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--sp-5);
}
.table-scroll { overflow-x: auto; margin-bottom: var(--sp-6); }
table { border-collapse: collapse; width: 100%; font-size: 17px; }
caption { text-align: left; color: var(--text-muted); padding-bottom: var(--sp-3); }
th, td { text-align: left; padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--rule); vertical-align: top; }
th { font-weight: 600; color: var(--text-dark); border-bottom: 2px solid var(--rule-strong); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--font-mono); }

.badge {
  display: inline-block; font-size: 14px; line-height: 1.4;
  padding: 2px var(--sp-3); border-radius: 999px;
  border: 1px solid currentColor;
}
.badge--collecting { color: var(--collecting); }
.badge--verify { color: #8a1f1f; border-style: dashed; }
.badge--pass { color: var(--green-primary); }
.note { color: var(--text-muted); font-size: 16px; }

.btn {
  display: inline-block; font: inherit; font-weight: 600;
  background: var(--green-primary); color: var(--text-invert);
  padding: var(--sp-3) var(--sp-5); border: 0; border-radius: var(--radius-sm);
  text-decoration: none; cursor: pointer;
  transition: background var(--transition);
}
.btn:hover, .btn:focus { background: var(--green-deep); color: var(--text-invert); }
.btn--ghost { background: transparent; color: var(--green-primary); border: 2px solid var(--green-primary); }
.btn--ghost:hover, .btn--ghost:focus { background: var(--green-ghost); color: var(--green-deep); }

/* --- Shared disclosure footer --- */
.hb-footer {
  border-top: 1px solid var(--rule);
  background: var(--cream-warm);
  padding: var(--sp-7) 0;
  font-size: 16px;
  color: var(--text-muted);
}
.hb-footer p { max-width: var(--measure); margin-bottom: var(--sp-4); }
.hb-footer__links { display: flex; flex-wrap: wrap; gap: var(--sp-4); margin-bottom: var(--sp-4); }
.hb-footer__disclosure { font-weight: 500; color: var(--text-body); }

/* --- Motion --- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

@media (max-width: 600px) {
  :root { --sp-9: 64px; --sp-8: 48px; }
  main { padding: var(--sp-6) 0 var(--sp-8); }
}