/* ═══════════════════════════════════════════════════════════
   JENGA SAVANNAH — SHARED DESIGN SYSTEM
   Direction: warm editorial (light), green as accent.
   Imported by index.html and portal.html. Single source of truth:
   pages may compose these tokens but must not redefine them.
═══════════════════════════════════════════════════════════ */

/* ── FONTS (self-hosted) ───────────────────────────────── */
/* Newsreader — one editorial serif for both display and body; hierarchy
   comes from weight (400–800) + optical sizing (opsz, applied automatically).
   Variable woff2 split by Unicode subset (latin + latin-ext) per Google Fonts. */
@font-face{
  font-family:'Newsreader';
  src:url('fonts/Newsreader-latin.woff2') format('woff2');
  font-weight:400 800;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Newsreader';
  src:url('fonts/Newsreader-latin-ext.woff2') format('woff2');
  font-weight:400 800;font-style:normal;font-display:swap;
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* True italic — used for the <em> accent words in headings (not a synthesised slant). */
@font-face{
  font-family:'Newsreader';
  src:url('fonts/Newsreader-italic-latin.woff2') format('woff2');
  font-weight:400 800;font-style:italic;font-display:swap;
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Newsreader';
  src:url('fonts/Newsreader-italic-latin-ext.woff2') format('woff2');
  font-weight:400 800;font-style:italic;font-display:swap;
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root{
  /* ── PRIMITIVES ──────────────────────────────────────── */
  /* surfaces */
  --paper:        #faf8f5;   /* page background */
  --sand:         #f4eee4;   /* second tonal layer — warm, for alternating sections */
  --card:         #fffdfb;   /* raised surfaces */
  --forest:       #0e3d2e;   /* the one dark block (footer / featured) */
  --cream:        #f3efe8;   /* text + fills on forest */

  /* ink */
  --ink:          #2b2620;   /* primary text */
  --ink-2:        #6b645b;   /* secondary text */
  --ink-3:        #787067;   /* tertiary / labels — darkened to clear WCAG AA (4.5:1) on --paper */

  /* brand accent */
  --green:        #186b50;   /* primary accent */
  --green-deep:   #115540;   /* hover / pressed */
  --green-wash:   rgba(24,107,80,0.08);   /* tinted fills */
  --green-line:   rgba(24,107,80,0.28);   /* underline accents */

  /* semantic state (sparing: true state only) */
  --warn:         #b45309;
  --warn-wash:    rgba(180,83,9,0.10);
  --danger:       #b3261e;
  --danger-wash:  rgba(179,38,30,0.08);

  /* structure */
  --line:         rgba(43,38,32,0.13);   /* hairlines */
  --line-soft:    rgba(43,38,32,0.07);

  /* ── TYPE ────────────────────────────────────────────── */
  --font-display: 'Newsreader', Georgia, 'Times New Roman', serif;
  --font-body:    'Newsreader', Georgia, 'Times New Roman', serif;

  /* ── SHAPE & ELEVATION ───────────────────────────────── */
  --radius-s:     10px;
  --radius-m:     14px;
  --radius-pill:  99px;
  --shadow-card:  0 24px 48px -32px rgba(43,38,32,0.18);
  --shadow-soft:  0 1px 2px rgba(43,38,32,0.05);

  /* ── MOTION ──────────────────────────────────────────── */
  --ease:         cubic-bezier(0.16,1,0.3,1);
  --speed:        0.15s;
}

/* ── BASE ──────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:var(--font-body);
  background:var(--paper);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%}
a{color:inherit}
*:focus-visible{outline:2px solid var(--green);outline-offset:3px}

/* ── SHARED COMPONENTS ─────────────────────────────────── */

/* buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--font-body);font-size:14.5px;font-weight:500;
  border-radius:12px;padding:12px 24px;border:none;cursor:pointer;
  text-decoration:none;white-space:nowrap;
  transition:background var(--speed),border-color var(--speed),transform var(--speed);
}
.btn:active{transform:scale(0.97)}
.btn-primary{background:var(--green);color:#fff}
.btn-primary:hover{background:var(--green-deep)}
.btn-ghost{border:1px solid var(--line);background:transparent;color:var(--ink)}
.btn-ghost:hover{border-color:var(--ink-3)}
.btn-cream{background:var(--cream);color:var(--forest);font-weight:600}
.btn-cream:hover{background:#fff}

/* status pills */
.pill{
  display:inline-flex;align-items:center;gap:6px;
  font-size:11.5px;font-weight:500;padding:3.5px 11px;border-radius:var(--radius-pill);
  white-space:nowrap;
}
.pill-green{background:var(--green-wash);color:var(--green)}
.pill-warm{background:rgba(43,38,32,0.06);color:var(--ink-2)}
.pill-line{border:1px solid var(--line);color:var(--ink-3)}
.pill-warn{background:var(--warn-wash);color:var(--warn)}
.pill-danger{background:var(--danger-wash);color:var(--danger)}

/* cards */
.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius-m);
}

/* forms */
.form-label{
  display:block;font-size:13px;font-weight:500;color:var(--ink);
  margin-bottom:7px;
}
.form-input,.form-select{
  width:100%;font-family:var(--font-body);font-size:14.5px;color:var(--ink);
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius-s);
  padding:12px 14px;
  transition:border-color var(--speed);
}
.form-input::placeholder{color:var(--ink-3)}
.form-input:hover,.form-select:hover{border-color:var(--ink-3)}
.form-input:focus,.form-select:focus{border-color:var(--green);outline:none;box-shadow:0 0 0 3px var(--green-wash)}
.form-textarea{
  width:100%;font-family:var(--font-body);font-size:14.5px;line-height:1.55;color:var(--ink);
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius-s);
  padding:12px 14px;resize:vertical;min-height:104px;max-height:240px;
  transition:border-color var(--speed);
}
.form-textarea::placeholder{color:var(--ink-3)}
.form-textarea:hover{border-color:var(--ink-3)}
.form-textarea:focus{border-color:var(--green);outline:none;box-shadow:0 0 0 3px var(--green-wash)}
.form-label-opt{font-weight:400;color:var(--ink-3)}
.form-counter{display:block;text-align:right;margin-top:6px;font-size:12px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.form-counter.near{color:var(--ink-2);font-weight:500}