/* ==========================================================================
   Pig Farm shared tokens — pigfarm.club (Club) + Pig Farm Labs (Labs)
   v0.1 · 14 Nov 2026 · a cohesive starting point, not a redesign.

   HOW TO USE
     1. Load this file AFTER the site's own CSS (Labs: after src/styles/tokens.css).
     2. Put data-site="club" or data-site="labs" on <html>.
     That's it: the [data-site] blocks win over :root by specificity, so
     Labs' existing var names are re-pointed below without renaming anything.

   Sources (sampled, not guessed):
     cream  #fff4de  ← pigfarm-club src/app/splash.css (body + .pfc-splash --bg)
     ink    #4a1608  ← splash.css text + _labs/labs.css --ink
     line   #621d0c  ← taco-hop.svg outline + labs.css --line
     taco   #e5a654 shell, #fbb83d cheese, #f63c22 tomato, #4ead25 lettuce,
            #fea9a9 cheeks  ← taco-hop.svg fills (Bon's drawing, read only)
     potion #d6ff8c / #9cee55 / #6fd42e face, #7fe33c / #c6ff7a stream,
            wipe #b6f56a→#6fd42e  ← labs.css (branch splash/enter-labs @ 2e151a4)
   ========================================================================== */

/* ---------- fonts: self-hosted, OFL (fonts/OFL.txt). Latin subset. ---------- */
@font-face{
  font-family:"PF Nunito";
  src:url("fonts/Nunito-latin-var.woff2") format("woff2");
  font-weight:200 1000; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"PF Nunito Sans";
  src:url("fonts/NunitoSans-latin-wght.woff2") format("woff2");
  font-weight:200 1000; font-style:normal; font-display:swap;
}

/* registered so the Labs entry wipe can animate a mask radius */
@property --pf-wipe-r{ syntax:"<length>"; inherits:false; initial-value:0px; }

/* ==========================================================================
   SHARED BASE
   ========================================================================== */
:root{
  color-scheme:light;

  /* neutrals — warm cream + dark-brown ink */
  --pf-cream:#fff4de;            /* page background (Club splash, shipped) */
  --pf-surface:#fffaf0;          /* cards / raised panels on cream */
  --pf-surface-2:#fbe9c8;        /* quiet wells, thumbnails, code (ink 12.48:1) */
  --pf-ink:#4a1608;              /* text, UI outlines, the 3D button base */
  --pf-line:#621d0c;             /* illustration outline (taco, beaker, bubbles) */
  --pf-ink-muted:#7a4a33;        /* secondary text */
  --pf-rule:rgba(98,29,12,.16);  /* hairlines where an outline is too loud */
  --pf-rule-strong:rgba(98,29,12,.45);
  --pf-hover-wash:rgba(98,29,12,.07);

  /* taco palette — decorative only (never a text background) */
  --pf-taco-shell:#e5a654;
  --pf-taco-cheese:#fbb83d;
  --pf-taco-tomato:#f63c22;
  --pf-taco-lettuce:#4ead25;
  --pf-taco-cheek:#fea9a9;

  /* type — one pairing, both sites */
  --pf-font-display:"PF Nunito",ui-rounded,"SF Pro Rounded",system-ui,sans-serif;
  --pf-font-body:"PF Nunito Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --pf-font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --pf-weight-body:400; --pf-weight-strong:700; --pf-weight-display:900; --pf-weight-button:800;
  --pf-tracking-display:-.01em;
  --pf-leading-display:1.06;

  /* outline, radius, shadow (hard offset, straight down — matches the button) */
  --pf-outline:3px;              /* buttons, stickers, hero objects */
  --pf-outline-thin:2px;         /* cards, inputs, chips */
  --pf-radius-sm:8px; --pf-radius-md:14px; --pf-radius-lg:22px; --pf-radius-pill:999px;
  --pf-shadow-hard-sm:0 3px 0 var(--pf-ink);
  --pf-shadow-hard:0 6px 0 var(--pf-ink);
  --pf-shadow-hard-lg:0 8px 0 var(--pf-ink);
  --pf-shadow-ambient:0 12px 18px rgba(98,29,12,.22);   /* the one soft shadow */
  --pf-lift:-2px;

  /* focus — ink ring + cream gap (from the Enter Labs button) */
  --pf-focus:var(--pf-ink); --pf-focus-width:3px; --pf-focus-offset:5px;
  --pf-focus-gap:0 0 0 9px var(--pf-cream), 0 0 0 12px rgba(74,22,8,.25);

  /* squishy 3D button */
  --pf-btn-height:58px;          /* face; +6px base = 64px target */
  --pf-btn-height-sm:44px;
  --pf-btn-base:6px;
  --pf-btn-pad:0 28px;
  --pf-btn-font-size:20px;
  --pf-btn-gloss:rgba(255,255,255,.55);
  --pf-btn-press:translateY(5px) scale(1.04,.94);
  --pf-btn-hover:translateY(-2px);
  --pf-btn-ease:cubic-bezier(.3,.7,.4,1.4);           /* springy overshoot */
  --pf-btn-dur:140ms;

  /* motion — shared families */
  --pf-ease-out:cubic-bezier(.2,.7,.2,1);
  --pf-ease-hop-squash:cubic-bezier(.3,0,.6,1); --pf-ease-hop-rise:cubic-bezier(.2,.6,.35,1);
  --pf-ease-hop-fall:cubic-bezier(.55,0,.8,.45); --pf-ease-hop-settle:cubic-bezier(.3,0,.4,1);
  --pf-dur-fast:120ms; --pf-dur-med:200ms; --pf-dur-slow:400ms;

  /* ---------- the Club → Labs transition (ONE definition, both sides) ----------
     Club exit : green circle grows OUTWARD from the pressed button.
     Labs entry: page arrives fully green, a cream hole grows OUTWARD from centre.
     Same fill, same duration, same easing, same direction. */
  --pf-wipe-top:#b6f56a;
  --pf-wipe-bottom:#6fd42e;
  --pf-wipe-solid:#8fe64a;       /* flat stand-in (theme-color, no-gradient fallback) */
  --pf-wipe-fill:
    radial-gradient(circle at 30% 30%,rgba(255,255,255,.35) 0 6px,transparent 7px) 0 0/46px 46px,
    linear-gradient(180deg,var(--pf-wipe-top),var(--pf-wipe-bottom));
  --pf-wipe-dur:600ms;
  --pf-wipe-ease:cubic-bezier(.65,0,.35,1);
  --pf-wipe-delay-out:200ms;     /* lets the button squash first */
  --pf-wipe-nav-after:720ms;     /* Club navigates at this point (JS timer) */
  --pf-wipe-delay-in:0ms;
  --pf-wipe-r-max:150vmax;
  --pf-wipe-z:50;

  /* accent defaults (Club) so un-flagged pages still look right */
  --pf-accent:#ff7a2e; --pf-accent-hi:#ffb066; --pf-accent-lo:#ff5a2c;
  --pf-accent-hover:#ff8a3d; --pf-accent-pressed:#ff6a3a;
  --pf-accent-tint:#ffe3c2; --pf-on-accent:#4a1608; --pf-accent-text:#b3261a;
  --pf-accent-shade:rgba(150,36,8,.30);
  --pf-accent-glow:rgba(255,140,60,.45);
}

/* ==========================================================================
   CLUB accent — taco orange → salsa red
   ========================================================================== */
[data-site="club"]{
  --pf-accent:#ff7a2e;           /* taco orange — button mid, swatches   ink 5.73:1 */
  --pf-accent-hi:#ffb066;        /* button top stop                      ink 8.27:1 */
  --pf-accent-lo:#ff5a2c;        /* button bottom stop (darkest)         ink 4.79:1 */
  --pf-accent-hover:#ff8a3d;     /*                                      ink 6.35:1 */
  --pf-accent-pressed:#ff6a3a;   /*                                      ink 5.23:1 */
  --pf-accent-tint:#ffe3c2;      /* tint surface                         ink 12.07:1 */
  --pf-on-accent:#4a1608;        /* text on any accent fill = ink */
  --pf-accent-text:#b3261a;      /* salsa: links/eyebrows on cream 6.00, surface 6.29, tint 5.30 */
  --pf-accent-shade:rgba(150,36,8,.30);   /* inset bottom shade in the 3D face */
  --pf-accent-glow:rgba(255,140,60,.45);
}

/* ==========================================================================
   LABS accent — potion green (the Enter Labs button)
   + compat: re-points Labs' EXISTING tokens.css names. Nothing renamed.
   ========================================================================== */
[data-site="labs"]{
  --pf-accent:#9cee55;           /* potion — button mid                  ink 10.48:1 */
  --pf-accent-hi:#d6ff8c;        /* button top stop                      ink 13.16:1 */
  --pf-accent-lo:#6fd42e;        /* button bottom stop (darkest)         ink 7.90:1 */
  --pf-accent-hover:#b6f56a;     /*                                      ink 11.54:1 */
  --pf-accent-pressed:#7fe33c;   /*                                      ink 9.19:1 */
  --pf-accent-tint:#eafbd8;      /* tint surface                         ink 13.69:1 */
  --pf-on-accent:#4a1608;
  --pf-accent-text:#2d6a0f;      /* deep potion: links on cream 6.05, surface 6.35, tint 6.07 */
  --pf-accent-shade:rgba(36,112,8,.32);
  --pf-accent-glow:rgba(150,255,80,.5);
  --pf-pig:#b0235f;              /* Labs' pig-pink mark colour, kept for the mark only (5.92:1 on cream) */

  /* ---- MAP: existing Labs name            → shared token ----
     --color-bg / --color-surface         → --pf-cream / --pf-surface
     --color-surface-2, --thumb-bg        → --pf-surface-2
     --color-text / --color-text-muted    → --pf-ink / --pf-ink-muted
     --color-border / --color-border-strong → --pf-rule / --pf-rule-strong
     --color-accent(-hover) / --color-on-accent → --pf-accent-lo(-hover) / --pf-on-accent
     --color-link(-hover), --color-eyebrow → --pf-accent-text / --pf-ink
     --color-focus                        → --pf-focus
     --font-body / --font-display         → --pf-font-body / --pf-font-display
     --weight-display                     → --pf-weight-display
     --radius-sm/md/lg/btn/pill           → --pf-radius-sm/md/lg/pill/pill
     --border-width                       → --pf-outline-thin
     --shadow-card(-hover) / --shadow-btn → --pf-shadow-hard-sm / --pf-shadow-hard
     --nav-bg / --nav-blur                → cream, no blur (no glass)
     --ease-hop-*                         → --pf-ease-hop-* (already identical)
     NOT mapped on purpose: game player/embed darks (--player-*, --embed-bg,
     --poster-*), --dmock-* Discord mock, semantic success/danger/violet/amber. */
  --color-bg:var(--pf-cream);
  --color-surface:var(--pf-surface);
  --color-surface-2:var(--pf-surface-2);
  --color-input-bg:var(--pf-surface);
  --color-text:var(--pf-ink);
  --color-text-muted:var(--pf-ink-muted);
  --color-border:var(--pf-rule);
  --color-border-strong:var(--pf-rule-strong);
  --color-accent:var(--pf-accent-lo);
  --color-accent-hover:var(--pf-accent-hover);
  --color-on-accent:var(--pf-on-accent);
  --color-link:var(--pf-accent-text);
  --color-link-hover:var(--pf-ink);
  --color-eyebrow:var(--pf-accent-text);
  --color-focus:var(--pf-focus);
  --color-status-dot:var(--pf-rule-strong);
  --thumb-bg:var(--pf-surface-2);
  --nav-bg:var(--pf-cream);
  --nav-blur:none;
  --switch-bg:var(--pf-ink); --switch-text:var(--pf-cream);
  --switch-active-bg:var(--pf-cream); --switch-active-text:var(--pf-ink);
  --avatar-text:var(--pf-ink);
  --type-badge-bg:var(--pf-surface); --type-badge-text:var(--pf-ink);
  --soon-bg:var(--pf-surface-2); --soon-back-bg:var(--pf-ink); --soon-back-text:var(--pf-cream);
  --font-body:var(--pf-font-body);
  --font-display:var(--pf-font-display);
  --font-eyebrow:var(--pf-font-display);
  --weight-display:var(--pf-weight-display);
  --tracking-display:var(--pf-tracking-display);
  --radius-sm:var(--pf-radius-sm); --radius-md:var(--pf-radius-md); --radius-lg:var(--pf-radius-lg);
  --radius-btn:var(--pf-radius-pill); --radius-input:var(--pf-radius-sm);
  --border-width:var(--pf-outline-thin);
  --shadow-sm:none;
  --shadow-card:var(--pf-shadow-hard-sm);
  --shadow-card-hover:var(--pf-shadow-hard);
  --shadow-btn:var(--pf-shadow-hard);
  --lift:var(--pf-lift);
}

/* ==========================================================================
   REFERENCE: squishy 3D button  (.pf-btn, .pf-btn--sm)
   Works on <a> or <button>. Target: 64px (sm: 50px) incl. the base.
   ========================================================================== */
.pf-btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:var(--pf-btn-height); min-width:44px; padding:var(--pf-btn-pad);
  margin-bottom:var(--pf-btn-base);                   /* room for the 3D base: no layout shift on press */
  border:var(--pf-outline) solid var(--pf-ink); border-radius:var(--pf-radius-pill);
  background:linear-gradient(180deg,var(--pf-accent-hi) 0%,var(--pf-accent) 48%,var(--pf-accent-lo) 100%);
  color:var(--pf-on-accent);
  font:var(--pf-weight-button) var(--pf-btn-font-size)/1 var(--pf-font-display); letter-spacing:.01em;
  text-decoration:none; white-space:nowrap; cursor:pointer;
  -webkit-tap-highlight-color:transparent; touch-action:manipulation;
  box-shadow:0 var(--pf-btn-base) 0 var(--pf-ink),var(--pf-shadow-ambient),
    inset 0 -6px 0 var(--pf-accent-shade),inset 0 3px 0 rgba(255,255,255,.7);
  transition:transform var(--pf-btn-dur) var(--pf-btn-ease),box-shadow var(--pf-btn-dur) ease;
}
.pf-btn::after{                                     /* gloss */
  content:""; position:absolute; left:30%; right:16%; top:5px; height:7px;
  border-radius:var(--pf-radius-pill); background:var(--pf-btn-gloss); pointer-events:none;
}
@media (hover:hover){
  .pf-btn:hover{
    transform:var(--pf-btn-hover);
    box-shadow:0 8px 0 var(--pf-ink),0 16px 22px rgba(98,29,12,.24),
      inset 0 -6px 0 var(--pf-accent-shade),inset 0 3px 0 rgba(255,255,255,.7);
  }
}
.pf-btn:active,.pf-btn.is-pressed{
  transform:var(--pf-btn-press);
  box-shadow:0 1px 0 var(--pf-ink),0 4px 8px rgba(98,29,12,.2),
    inset 0 -4px 0 var(--pf-accent-shade),inset 0 3px 0 rgba(255,255,255,.7);
}
.pf-btn:focus-visible{ outline:var(--pf-focus-width) solid var(--pf-focus); outline-offset:var(--pf-focus-offset); }
.pf-btn--sm{ --pf-btn-height:var(--pf-btn-height-sm); --pf-btn-pad:0 20px; --pf-btn-font-size:17px; --pf-btn-base:5px; }

/* ==========================================================================
   REFERENCE: the transition
   Club exit  : <div class="pf-wipe-out" aria-hidden="true"> ; JS sets --pf-wipe-x/-y
                on <html> to the button centre and adds html.pf-leaving, then
                navigates after --pf-wipe-nav-after (720ms) to LABS_URL?from=club.
   Labs entry : <div class="pf-wipe-in" aria-hidden="true"> in <body>; a tiny inline
                script in <head> adds html.pf-arriving only when ?from=club is
                present (then history.replaceState removes the param).
                No JS → no overlay → nothing can get stuck covering the page.
   ========================================================================== */
.pf-wipe-out,.pf-wipe-in{
  position:fixed; inset:0; z-index:var(--pf-wipe-z); pointer-events:none;
  background:var(--pf-wipe-solid); background:var(--pf-wipe-fill); visibility:hidden;
}
.pf-wipe-out{ clip-path:circle(0 at var(--pf-wipe-x,50%) var(--pf-wipe-y,70%)); }
html.pf-leaving .pf-wipe-out{
  visibility:visible;
  animation:pf-wipe-out var(--pf-wipe-dur) var(--pf-wipe-delay-out) var(--pf-wipe-ease) both;
}
@keyframes pf-wipe-out{
  from{ clip-path:circle(0 at var(--pf-wipe-x,50%) var(--pf-wipe-y,70%)); }
  to  { clip-path:circle(var(--pf-wipe-r-max) at var(--pf-wipe-x,50%) var(--pf-wipe-y,70%)); }
}
.pf-wipe-in{
  -webkit-mask:radial-gradient(circle at 50% 50%,transparent var(--pf-wipe-r),#000 calc(var(--pf-wipe-r) + 1px));
          mask:radial-gradient(circle at 50% 50%,transparent var(--pf-wipe-r),#000 calc(var(--pf-wipe-r) + 1px));
}
html.pf-arriving .pf-wipe-in{
  visibility:visible;
  animation:pf-wipe-in var(--pf-wipe-dur) var(--pf-wipe-delay-in) var(--pf-wipe-ease) both;
}
@keyframes pf-wipe-in{            /* the opacity tail also covers browsers without @property */
  0%  { --pf-wipe-r:0px; opacity:1; }
  90% { opacity:1; }
  100%{ --pf-wipe-r:var(--pf-wipe-r-max); opacity:0; visibility:hidden; }
}

/* ---------- reduced motion: no wipe either side, instant states ---------- */
@media (prefers-reduced-motion:reduce){
  .pf-wipe-out,.pf-wipe-in{ display:none !important; }   /* Club navigates natively; Labs shows at once */
  .pf-btn,.pf-btn::after{ transition:none !important; animation:none !important; }
  .pf-btn:hover{ transform:none; }
  .pf-btn:active,.pf-btn.is-pressed{ transform:none; }   /* pressed = shadow change only */
}