/* ==========================================================================
   FeedCo — Design Tokens & Shared Atoms
   Single source of truth. Linked by index.html and screens.html.
   Edit a value here and every page + screen updates on refresh.
   ========================================================================== */
:root{
  /* ---- Ink (text & structure) ---- */
  --ink:#1A1613;          /* masthead, primary text */
  --espresso:#2E2823;     /* headings, ink hover/pressed */
  --graphite:#6E6459;     /* secondary text */
  --ash:#A89E92;          /* tertiary text, captions, inactive */

  /* ---- Paper (surfaces) ---- */
  --ivory:#FBF7F0;        /* app canvas (warm paper) */
  --porcelain:#FFFFFF;    /* cards & elevated surfaces */
  --linen:#F3ECE1;        /* subtle fills, pressed rows */
  --hairline:#E4DCD0;     /* borders & rules */

  /* ---- Accents — purple & orange (rationed) ---- */
  --plum:#5E2A55;         /* primary accent — aubergine */
  --plum-deep:#42203C;    /* pressed plum */
  --plum-soft:#EFE2EC;    /* cool tint fills */
  --amber:#C9612C;        /* secondary accent — burnt orange */
  --amber-deep:#A24A1E;   /* pressed amber */
  --amber-soft:#F8E6D4;   /* warm tint fills */

  /* ---- Functional ---- */
  --positive:#3F6B4B;     /* confirmations (used sparingly) */
  --focus:#5E2A55;        /* focus ring = plum */

  /* ---- Type ---- */
  --serif:'Playfair Display','Didot','Hoefler Text',Georgia,serif;
  --sans:'Inter',-apple-system,system-ui,'Helvetica Neue',sans-serif;

  /* ---- Shape ---- */
  --r-sm:4px; --r-md:8px; --r-lg:14px; --r-pill:999px;
  --gutter:28px;

  /* ---- Elevation ---- */
  --shadow-card:0 1px 2px rgba(26,22,19,.05),0 10px 30px rgba(26,22,19,.06);
  --shadow-float:0 8px 20px rgba(26,22,19,.12),0 2px 6px rgba(26,22,19,.08);
}

/* ---- Reset & base ---- */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--ivory);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.wrap{max-width:1040px;margin:0 auto;padding:0 var(--gutter)}

/* ---- Atoms ---- */
.kicker{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--graphite)}
.serif{font-family:var(--serif)}

/* Wordmark — lowercase serif "feed" over a tracked "COLLECTIVE".
   Size the whole lockup with one font-size on .logo; parts scale in em. */
.logo{display:inline-flex;flex-direction:column;align-items:center;line-height:1;color:var(--ink)}
.logo.left{align-items:flex-start}
.logo .w{font-family:var(--serif);font-weight:500;font-size:1em;line-height:1;letter-spacing:.005em;text-transform:lowercase}
.logo .d{font-family:var(--sans);font-weight:600;font-size:max(7px,.2em);letter-spacing:.38em;padding-left:.38em;margin-top:.5em;text-transform:uppercase;opacity:.82;color:inherit}
.line{height:1px;background:var(--ink);opacity:.85}
.hr{height:1px;background:var(--hairline);border:0}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--sans);font-weight:600;font-size:13px;letter-spacing:.06em;text-transform:uppercase;border-radius:var(--r-sm);padding:13px 22px;cursor:pointer;border:1px solid transparent;text-decoration:none;transition:background .15s,color .15s,border-color .15s}
.btn-primary{background:var(--ink);color:var(--ivory)}
.btn-primary:hover{background:var(--espresso)}
.btn-plum{background:var(--plum);color:var(--ivory)}
.btn-plum:hover{background:var(--plum-deep)}
.btn-outline{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn-outline:hover{background:var(--ink);color:var(--ivory)}
.btn-ghost{background:transparent;color:var(--plum);text-transform:none;letter-spacing:0;font-weight:600;padding:13px 6px}
.btn-disabled,.btn[disabled]{background:var(--linen);color:var(--ash);border-color:transparent;cursor:not-allowed}
.btn-sm{padding:9px 16px;font-size:11px}
.btn-block{display:flex;width:100%}
.btn-row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}

/* Tags / labels */
.tags{display:flex;gap:10px;flex-wrap:wrap}
.tag{font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;padding:6px 12px;border-radius:var(--r-pill);border:1px solid var(--hairline);color:var(--graphite);white-space:nowrap}
.tag.tastemaker{border-color:var(--amber);color:var(--amber-deep);background:var(--amber-soft)}
.tag.solid{background:var(--plum);color:var(--ivory);border-color:var(--plum)}
.tag.mission{border-color:var(--plum);color:var(--plum)}
.tag.ink{background:var(--ink);color:var(--ivory);border-color:var(--ink)}